一个最基本的Animated创建过程如下:
创建Animated.Value，设置初始值，比如一个视图的opacity属性，最开始设置Animated.Value(0),来表示动画的开始时候，视图是全透明的。
AnimatedValue绑定到Style的可动画属性，比如透明度，
{opacity: this.state.fadeAnim}。使用Animated.timing来创建自动的动画,或者使用Animated.event来根据手势，触摸，Scroll的动态更新动画的状态。
调用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动画
