React Native 之 动画

---

流动,有意义的动画移动对用户体验至关重要。喜欢ReactNative一切,动画api目前处于开发阶段,但已经开始合并两个互补的系统:LayoutAnimation动画——整个布局的事务,支持更细粒度的动画和交互式控制特定的值。

Animated

动画库的目的是使它以一种非常高性能的方式很容易简明地表达各种各样的有趣的动画和交互模式。动画注重陈述性输入和输出之间的关系,具有可配置之间的转换,和简单的启动/停止方法来控制基于时间的动画执行。例如,一个完整的组件实现一个简单的弹簧反弹看起来像这样:

class Playground extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      bounceValue: new Animated.Value(0),
    };
  }
  render() {
    return (
      <Animated.Image                         // Base: Image, Text, View
        source={{uri: 'http://i.imgur.com/XMKOH81.jpg'}}
        style={{
          flex: 1,
          transform: [                        // `transform` is an ordered array
            {scale: this.state.bounceValue},  // Map `bounceValue` to `scale`
          ]
        }}
      />
    );
  }
  componentDidMount() {
    this.state.bounceValue.setValue(1.5);     // Start large
    Animated.spring(                          // Base: spring, decay, timing
      this.state.bounceValue,                 // Animate `bounceValue`
      {
        toValue: 0.8,                         // Animate to smaller size
        friction: 1,                          // Bouncier spring
      }
    ).start();                                // Start the animation
  }
}