React Native中Animated庫的使用

在移動客戶端開發中流暢、有意義的動畫是非常重要的，現實生活中的物體在開始移動和停下來的時候都具有一定的慣性，我們在介面中也可以使用動畫來實現契合物理規律的互動。

官方在開發RN的時候，提供了兩個互補的動畫系統：用於建立精細的互動控制的動畫Animated和用於全域性的佈局動畫LayoutAnimation。

本篇文章主要講Animated動畫庫的使用

執行一個動畫最基本的原理就是呼叫動畫函式改變一個變數值，而這個變數值繫結到控制元件的屬性上，比如透明的、位置等。通過動畫函式改變值從而使控制元件動起來。所以最基本的動畫要有2個屬性 - 變數值（Animated.Value和Animated.ValueXY）區別一個是單個值，一個是向量值（可以理解為二維座標值） - 動畫型別：timing、spring、decay

先簡單看個例子
``` const App = () => { const scaleAnim = useRef(new Animated.Value(0)).current;

const fadeIn = () => { // Will change fadeAnim value to 1 in 2 seconds Animated.timing(scaleAnim, { toValue: 1, duration: 2000, }).start(); };

const fadeOut = () => { // Will change fadeAnim value to 0 in 2 seconds Animated.timing(scaleAnim, { toValue: 0, duration: 2000, }).start(); };

return ( ); }; ```

要想寫一個動畫需要以下幾步： 1. 使用基本的Animated元件，如Animated.View、Animated.Image、Animated.Text和其他（使用AnimatedImplementation來包裝）; 1. 使用Animated.Value設定一個或多個初始化值,如位置屬性、透明屬性、角度屬性等; 1. 將初始化值繫結到動畫目標的屬性上，如style; 1. 通過動畫型別Api設定動畫引數，如spring、decay、timing三種動畫型別; 1. 呼叫start啟動動畫，同時可以在start裡面回撥相關功能;

動畫型別 timing、spring、decay

1. Animated.decay() 以指定的初始速度開始變化，然後變化速度越來越慢直至停下。

decay 動畫引數 export type DecayAnimationConfigSingle = AnimationConfig & { velocity: number, // 起始速度，必填引數 deceleration?: number, // 速度衰減比例，預設為0.997 }; decay典型的使用場景是某個以元件一定的速度執行並不斷減速，比如，移動（swipe或者fling）一張卡片。手指讓卡片滑動並具有速度，最後卡片會因為阻力減速，並最終停止。 一般都是配合手勢一起用

1. Animated.spring()提供了一個簡單的彈簧物理模型.

``` export type SpringAnimationConfig = AnimationConfig & { toValue: number | AnimatedValue | {x: number, y: number} | AnimatedValueXY, overshootClamping?: boolean, // 布林表示彈簧是否應夾緊而不是彈跳，預設為false。 restDisplacementThreshold?: number, // 靜止位移的閾值，低於該閾值時應考慮彈簧處於靜止狀態。預設值為0.001。 restSpeedThreshold?: number, // 靜止時應考慮彈簧的速度，以每秒畫素為單位。預設值為0.001。 velocity?: number | {x: number, y: number}, // 附著在彈簧上的物體的初始速度。預設值為0（物件處於靜止狀態） delay?: number, // 延遲（毫秒）後啟動動畫。預設值為0。

bounciness?: number,                            // 控制彈性，預設8。
speed?: number,                                 // 控制動畫的速度。預設12。

tension?: number,                               // 張力，預設40
friction?: number,                              // 摩擦力，預設為7.

stiffness?: number,                             // 彈簧剛度係數，預設100。
damping?: number,                               // 定義了由於摩擦力如何阻尼彈簧的運動，預設10。
mass?: number,                                  // 物體的質量附著在彈簧的末端，預設1。

}; 不能同時定義 bounciness/speed、tension/friction 或 stiffness/damping/mass 這三組資料，只能指定其中一組，即三選一 ``` 3. Animated.timing()使用easing 函式讓數值隨時間動起來。

export type TimingAnimationConfigSingle = AnimationConfig & { toValue: number | AnimatedValue, // easing?: (value: number) => number, // 緩動函式。 預設為Easing.inOut(Easing.ease)。 duration?: number, // 動畫的持續時間（毫秒）。預設值為 500. delay?: number, // 開始動畫前的延遲時間（毫秒）。預設為 0. }; 以上三個都有兩個共同的不常用的引數： isInteraction: 指定本動畫是否在InteractionManager的佇列中註冊以影響其任務排程。預設值為 true。 useNativeDriver: 啟用原生動畫驅動。預設不啟用(false)。
注意⚠️：啟動原生動畫驅動時，位移translateX這種動畫屬性時不能與其他動畫屬性一起使用。安卓機上會有問題

組合動畫

parallel（同時執行）、sequence（順序執行）、delay(延時執行)、``

1、使用sequence可以把多個動畫組織起來，讓他們依次順序執行。
動畫1 -> 動畫2 -> 動畫3 ->動畫4 -> 動畫5

例子中有兩個動畫。一個控制透明度，另一個移動一定距離 ``` const App = () => { const fadeAnim = useRef(new Animated.Value(0)).current; const translateAnim = useRef(new Animated.Value(0)).current;

const fadeIn = () => { Animated.parallel([ Animated.timing(fadeAnim, { toValue: 1, duration: 1000 }), Animated.timing(translateAnim, { toValue: 50, duration: 1000 }), ]).start(); }; return (

); } `` 2、使用parallel方法會讓一組動畫同時開始執行。這組動畫裡有一個停止了，其他的也全部都停止。不過你可以通過修改屬性stopTogether`來修改這個行為。

3、stagger和parallel類似，也是使一組動畫同時執行。但是，稍有一點不同的是這些動畫之間開始時間依次會有一定的延遲。

const fadeIn = () => { Animated.stagger(4000,[ Animated.timing(fadeAnim, { toValue: 1, duration: 1000 }), Animated.timing(translateAnim, { toValue: 50, duration: 1000 }), ]).start(); }; 3、Animated.delay的本質是它建立了一個什麼都不幹，只等待的Animated.timing。主要目的就是用來在stagger或者sequence裡作為一組動畫的一部分。

Animated.sequence([ Animated.delay(300), Animated.timing(this._animatedValue, { toValue: 100, duration: 500 }) ]).start() 還可以作為引數使用 Animated.timing(this._animatedValue, { toValue: 100, delay: 300, duration: 500 }).start() 這二種方式動畫效果一樣

插值 interpolate

當我們動畫的值與要改變的屬性值不是同一單位的時候，就可以使用 interpolate 來幫我們進行一個單位的對映轉換，插值的好處在於我們可以宣告一個動畫變數來控制多個並行動畫，簡單易控制。 例如： transform: [ { rotateZ: translateAnim.interpolate({ inputRange: [0, 1], outputRange:['0deg','60deg'] }) } ]

常用方法

Animated.Value和Animated.ValueXY就是上面我們所說的變數值即動畫執行過程中會不斷的更改這個值Animated.Value提供了以下方法： - constructor：建構函式。new Animated.Value(0) - setValue：設定新的值，注意此方法會停止動畫 - setOffset：設定一個修正值，不論接下來的值是由setValue、一個動畫，還是Animated.event產生的，都會加上這個值。常用來在拖動操作一開始的時候用來記錄一個修正值（譬如當前手指位置和View位置）。 - flattenOffset：該用來把相對值合併到值裡，然後相對值設定為0，最終輸出的值不會發生變化。常常在拖動操作結束以後呼叫。 - addListener：非同步監聽動畫值變化 - removeListener：刪除指定監聽器 - removeAllListeners：刪除所有監聽器 - stopAnimation：停止動畫，返回當前動畫值。 - interpolate：差值，可以將值對映成新的值，後面會具體介紹。

Animated.ValueXY其實是就是2個Animated.Value，方法和Animated.Value一樣，不過比Animated.Value 多了2個方法： - getLayout：將一個{x, y} 組合轉換為一個可用的位移變換(translation transform)，例如：

> style={{\
> transform: this.state.anim.getTranslateTransform()\
> }}

• getTranslateTransform：將一個{x, y} 組合轉換為一個可用的位移變換(translation transform)，例如：

  style={{\ transform: this.state.anim.getTranslateTransform()\ }}

``` import React, { useRef } from "react"; import { Animated, PanResponder, StyleSheet, View } from "react-native";

const DraggableView = () => { const pan = useRef(new Animated.ValueXY()).current;

const panResponder = PanResponder.create({ onStartShouldSetPanResponder: () => true, onPanResponderMove: Animated.event([ null, { dx: pan.x, // x,y are Animated.Value dy: pan.y, }, ]), onPanResponderRelease: () => { Animated.spring( pan, // Auto-multiplexed { toValue: { x: 0, y: 0 } } // Back to zero ).start(); }, });

return ( ); }; style={[pan.getLayout(), styles.box]} 等同於： style={[styles.box,{transform: [ { translateX: pan.x }, { translateY: pan.y } ]}]}

```

效果演示：

上面例子還使用了Animated.event方法，這個方法用來把一組資料匹配到動畫需要的資料上，最後對匹配完成的資料呼叫setValue方法
PanResponder的例子：

onPanResponderMove: Animated.event([ null, // raw event arg ignored {dx: this._pan.x, dy: this._pan.y}, // gestureState arg ]),

在onPanResponderMove方法裡，呼叫了Animated.event。引數是一個數組，裡面有兩個元素。我們忽略了第一個初始事件的值。第二個元素是gestureState，提供了很有用的值dx和dy。這兩個值就是使用者從觸碰螢幕開始手指移動的距離。

自定義動畫createAnimatedComponent

預設的情況下Animated.View、Animated.Text和Animated.Image支援動畫。有的時候，你需要其他的某些元件也變成動畫元件，方法createAnimatedComponent可以完成這個任務。它會把的元件props或者state等屬性和Animated.Value自動繫結起來。

比如ScrollView：

let AnimatedScrollView = Animated.createAnimatedComponent(ScrollView)