React總結篇之十_動畫
- 在網頁中動畫的實現方式
- React提供的動畫輔助工具ReactCSSTransitionGroup
- React-Motion動畫庫
一、動畫的實現方式
在網頁中，實現動畫無外乎兩種方式：
- CSS3方式，也就是利用瀏覽器對CSS3原生支援實現動畫；
- 指令碼方式，通過間隔一段時間用JavaScript來修改頁面元素樣式來實現動畫。
-
CSS3方式
CSS3的方式下，開發者一般在CSS中定義一些包含CSS3transition語法的規則。在某些特定情況下，讓這些規則發生作用，於是瀏覽器會將這些規則應用於指定的DOM元素上，產生動畫的效果。這種方式效率比指令碼方式高，因為瀏覽器原生支援，省去了JavaScript的解釋執行負擔，有的瀏覽器甚至可以充分利用CPU加速的優勢，進一步增強動畫渲染的效能。
不過CSS3也有不少缺點：
首先，CSS3transition對一個動畫規則的定義是基於時間和速度曲線的規則。就是CSS3的動畫過程要描述成“在什麼時間範圍內，以什麼樣的運動節奏完成動畫”，這可能不利於動畫的流暢，因為動畫是可能被中途打斷的。
因為CSS3transition總是一閃而過，捕捉不到中間狀態，只能一遍一遍用肉眼去檢查動畫效果，這給開發者帶來了很大的痛苦。 - 指令碼方式
相對於CSS3方式，指令碼方式最大的好處就是更強的靈活性，開發者可以任意控制動畫的時間長度，也可以控制每個時間點上動畫渲染的樣式，可以更容易做出豐富的動畫效果。
指令碼方式的缺點也很明顯，動畫過程通過JavaScript實現，不是瀏覽器原生支援，消耗的計算資源更多。
二、 ReactCSSTransition規則
Transition並不能代替CSS，相反，它離不開CSS，其扮演的角色是讓React元件在生命週期的特定階段使用不同的CSS規則，而連線React元件和CSS需要遵守一些規則。
- 類名規則
配合TransitionGroup中的transitionName屬性，對應CSS規則中類名遵從統一的規則。類名由-符號把幾個單詞連線起來，除了transitionName的值，還可以有這幾個單詞：enter代表“裝載”開始時的狀態，leave代表“解除安裝”開始時的狀態，active代表動畫結束時的狀態。
假設transitionName為sample，那麼定製相關React元件的類名就是：- sample-enter
- sample-enter-active
- sample-leave
- sample-leave-active
其中active字尾類名的作用比較特殊，因為用CSS3的transition功能實現動畫，必須定義“開始狀態”和“結束狀態”，只有存在這兩個狀態，CSS3才知道如何將元素屬性從“開始狀態”在指定的時間按照指定的速度曲線轉換為“結束狀態”，這兩個狀態必須定義在兩個不同的CSS類中，否則CSS3無法區分。
- 動畫時間長度
使用TransitionGroup，動畫的持續時間在兩個地方都要指定，第一個是在Transition-Group中以Timeout為結尾的屬性，第二個地方是在CSS檔案中transition-duration規則。 - 裝載時機
TransitionGroup要發揮作用，必須自身已經完成裝載了。因為Transition也只是一個React元件，功能只有在被裝載之後才能發揮。 - 首次裝載
在Todo應用中，TransitionGroup自身被裝載的時候，可能已經包含了若干個TodoItem元件例項，但這些TodoItem元件雖然經歷了裝載過程，卻沒有動畫效果，只有在TransitionGroup被裝載之後新加入的TodoItem元件才有動畫效果。如果想讓這些子元件也有動畫效果，那就要使用appear過程，appear代表的就是隨TransitionGroup一起“出現”的過程。
三、React-Motion動畫庫
React-Motion使用的是指令碼方式。
react-motion中大量的使用了“以函式為子元件”的模式，react-motion提供的元件，都預期接受一個函式作為子元件。舉例如下：
Motion元件的defaultStyle屬性指定了一個初始值，style屬性指定了目標值，期間不斷呼叫作為子元件的函式，完成動畫過程。
很顯然，motion並不直接參與動畫的繪製，它只是提供引數。具體的繪製過程，由作為子元件的繪製函式來完成，很顯然這種“以函式為子元件”的模式帶來了很大的靈活度。