一个简单的react-native Animated动画

一个最基本的Animated创建过程如下:

1. 创建Animated.Value，设置初始值，比如一个视图的opacity属性，最开始设置Animated.Value(0),来表示动画的开始时候，视图是全透明的。

2. AnimatedValue绑定到Style的可动画属性，比如透明度，{opacity: this.state.fadeAnim}。

3. 使用Animated.timing来创建自动的动画,或者使用Animated.event来根据手势，触摸，Scroll的动态更新动画的状态。

4. 调用Animated.timing.start()开始动画。

一个简单的例子：

实现tab切换时，底部线条跟随着移动。最终效果：

image.png

实现步骤：

• 因为改变的是底部线条的位置，所以设置初始值position:

this.state = {
  position: new Animated.Value(0)
};

• AnimatedValue绑定到Style:

<Animated.View style={[
  styles.indicator,
  {
    transform: [
      { translateX: -baseWidth / 2 },
      { translateX: this._translateX },  
      { translateX: baseWidth / 2 }
    ]
  }
]}/>

this._translateX = this.state.position.interpolate({
  inputRange: [0, 1],
  outputRange: [position_0, position_1] // 两个位置下，线条距离左边框的长度
});

上面的栗子使用了interpolate函数，也就是插值函数。这个函数很强大，实现了数值大小、单位的映射转换。 interpolate一般用于多个动画共用一个Animated.Value，只需要在每个属性里面映射好对应的值，就可以用一个变量控制多个动画。

• 创建动画并开始

Animated.timing(this.state.position, {
  toValue: index，   // 目标值
  useNativeDriver: true   // 使用原生驱动，防止动画卡顿
}).start();

我这里的index是指线条的下标，分别为0,1。切换时，0，1分别映射到了位置的两个值，position_0, position_1。这就是interpolate的用法，所以说同一时间可以指定很多动画，只要是同一个inputRange，在这个时间内，就可以同时响应动画输出outputRange。

Done.

更多属性可参考：官方文档、详解React Native动画