一個最基本的Animated創(chuàng)建過程如下:
創(chuàng)建Animated.Value，設(shè)置初始值，比如一個視圖的opacity屬性，最開始設(shè)置Animated.Value(0),來表示動畫的開始時候，視圖是全透明的。
AnimatedValue綁定到Style的可動畫屬性，比如透明度，
{opacity: this.state.fadeAnim}。使用Animated.timing來創(chuàng)建自動的動畫,或者使用Animated.event來根據(jù)手勢，觸摸，Scroll的動態(tài)更新動畫的狀態(tài)。
調(diào)用Animated.timing.start()開始動畫。
一個簡單的例子：
實現(xiàn)tab切換時，底部線條跟隨著移動。最終效果：
image.png
實現(xiàn)步驟：
- 因為改變的是底部線條的位置，所以設(shè)置初始值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函數(shù)，也就是插值函數(shù)。這個函數(shù)很強大，實現(xiàn)了數(shù)值大小、單位的映射轉(zhuǎn)換。 interpolate一般用于多個動畫共用一個Animated.Value，只需要在每個屬性里面映射好對應的值，就可以用一個變量控制多個動畫。
- 創(chuàng)建動畫并開始
Animated.timing(this.state.position, {
toValue: index， // 目標值
useNativeDriver: true // 使用原生驅(qū)動，防止動畫卡頓
}).start();
我這里的index是指線條的下標，分別為0,1。切換時，0，1分別映射到了位置的兩個值，position_0, position_1。這就是interpolate的用法，所以說同一時間可以指定很多動畫，只要是同一個inputRange，在這個時間內(nèi)，就可以同時響應動畫輸出outputRange。
Done.
更多屬性可參考：官方文檔、詳解React Native動畫
