問題

• ReactNative動畫支援的怎麼樣?
• ReactNative的動畫使用起來方便嗎？
• ReactNative動畫的效能和H5效能相比怎麼樣？
• ReactNative動畫的效能怎麼優化？

RN動畫支援：

從上面的MineNode我們可以看出RN中有3個地方可以使用動畫：

• 用於建立更精細的互動控制的動畫Animated；
• 用於全域性的佈局動畫LayoutAnimation；
• 用於構建Navigator不同頁面切換的動畫；

此篇文章主要是講Animated相關的內容，平時動畫中用得最多的也是它，其他兩個通過文件可以很容易的使用。

RN動畫的使用

一個明天不上班的的動畫實現，同時從小變大並且旋轉，我們可以從註釋中看到RN動畫的實現步驟，程式碼

從上面demo可以看出，動畫的使用邏輯還算清晰，雖然比不上css3動畫編寫簡單，同時不需要二次分裝，直接向上面使用即可。

具體的效果是這樣：

RN動畫和H5動畫對比

• RN中的的動畫均為 JavaScript 動畫，即通過 JavaScript 程式碼控制影象的各種引數值的變化，從而產生時間軸上的動畫效果。 RN通過封裝一個Animated的元素，內部通過資料繫結和DOM操作變更元素，結合React的生命週期完善記憶體管理，解決條件競爭問題，對外表現則與原生元件相同，實現了高效流暢的動畫效果。

• CSS3動畫vs ReactNative動畫錄製:

• 上述動畫css3使用animation: rotate 0.2s linear infinite;實現: 

• RN採用如下實現： 

• 關於效能測試都採用instruments來測試Time Profiler資料,其中紅線是動畫開始時候，從圖中可以看出兩者消耗都低，但是css3動畫的效能稍微優於RN的動畫。 

綜合

#### React Native的動畫支援度還是很廣: - CSS3可以實現的動畫RN基本上可以實現，同時還包裝了很多類似語法糖的東西，譬如3種動畫型別（spring、decay、timing），Interpolation插值函式、4種動畫組合（同時、順序、錯峰、延遲）、動畫執行回撥、跟蹤動態值、Animated.event輸入事件、響應當前的動畫值、等功能; - 關於React Native 支援的Easing型別可以到原始碼中去找符合自己專案需求的動畫型別，

React Native編寫使用起來也很有方便，具有邏輯性：

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

####React Native動畫效能沒有那麼差，或者說比想象中要好:

for Animated： - 通過封裝一個Animated的元素; - 內部通過資料繫結和DOM操作變更元素; - 結合React的生命週期完善記憶體管理，解決條件競爭問題; - 對外表現則與原生元件相同，實現了高效流暢的動畫效果;

For Navigator頁面切換動畫不流暢： - 使用InteractionManager在轉場動畫的過程中，使新頁面只渲染必要的少量的內容。 - InteractionManager.runAfterInteractions只有一個函式型別的引數，當轉場動畫結束，這個回撥函式就會被觸發(所有基於AnimatedAPI的動畫都會觸發InteractionManager.runAfterInteractions)。

參考

• https://facebook.github.io/react-native/docs/animations.html#content
• https://facebook.github.io/react-native/docs/navigator.html#content
• https://facebook.github.io/react-native/docs/layoutanimation.html#content