转载

React Native中的动画过渡

最近我在为下一个动画设计试着找新灵感，并在一个网站上看到了一些。我很好奇能否用React Native实现这些过渡。

React Native中的动画过渡

我们可以看到上图包含了几个动画，工具栏(展示/隐藏)，底边条(展示/隐藏)，移动选定物品，隐藏所有其他物品，展示物品细节等等。

React Native中的动画过渡

动画的时间轴

这个过渡的难点是让这些动画同步。我们不能真的取消挂载列表页并展示详情页面，因为我们需要等待所有的动画放完。

同样我也喜欢简洁，易于维护的代码。如果你曾经尝试过为你的项目添加动画，代码经常会很乱，充满各种辅助参数与头疼的计算。这就是为什么我会推荐react-native-motion。

React Native中的动画过渡

react-native-motion的思想

你有留意到工具栏标题的动画吗？你只是移动标题一点，并把不透明度在0/1间变化，并不是多复杂的操作。但是为了这些，你要写这样的代码，这还没考虑到你实际为这个组件编写UI。

class TranslateYAndOpacity extends PureComponent {
  constructor(props) {
    // ...
    this.state = {
      opacityValue: new Animated.Value(opacityMin),
      translateYValue: new Animated.Value(translateYMin),
    };
    // ...
  }
  componentDidMount() {
    // ...
    this.show(this.props);
    // ...
  }
  componentWillReceiveProps(nextProps) {
    if (!this.props.isHidden && nextProps.isHidden) {
      this.hide(nextProps);
    }
    if (this.props.isHidden && !nextProps.isHidden) {
      this.show(nextProps);
    }
  }
  show(props) {
    // ...
    Animated.parallel([
      Animated.timing(opacityValue, { /* ... */ }),
      Animated.timing(translateYValue, { /*  ... */ }),
    ]).start();
  }
  hide(props) {
    // ...
    Animated.parallel([
      Animated.timing(opacityValue, { /* ... */ }),
      Animated.timing(translateYValue, { /*  ... */ }),
    ]).start();
  }
  render() {
    const { opacityValue, translateYValue } = this.state;
    
    const animatedStyle = {
      opacity: opacityValue,
      transform: [{ translateY: translateYValue }],
    };
    
    return (
      {this.props.children}
    );
  }
}

现在让我们看看怎么用react-native-motion实现它。我知道经常有些动画很特别，不过React Native提供了一个强大的动画API。不管怎么说，拥有一个基础动画库总是好的。

import { TranslateYAndOpacity } from 'react-native-motion';

class ToolbarTitle extends PureComponent {
  render() {
    return (
      
        
          // ...
        
      
    );
  }
}

共享元素

这个动画最大的问题是移动从列表中选择的物品。这个物品被列表页(ListPage)与详情页(DetailPage)共享，怎么在元素事实上并没有绝对地放置的时候，把一个物品从列表移动到详情页的顶部？使用React Native动作就会简单做到。

// List items page with source of SharedElement
import { SharedElement } from 'react-native-motion';

class ListPage extends Component {
  render() {
    return (
      
        {listItemNode}
      
    );
  }
}

我们定义了列表页中SharedElement的源要素。我们对详情页中的目的元素做类似的事，这样就能知道我们要把共享元素移动到的位置。

// Detail page with a destination shared element
import { SharedElement } from 'react-native-motion';

class DetailPage extends Component {
  render() {
    return (
      
        {listItemNode}
      
    );
  }
}

重点在哪里？

我们怎么把一个相对放置的元素从一个页面移动到另一个呢？很可惜这并不能做到。实际上SharedElement是这样运行的：