• 在網(wǎng)頁中動畫的實(shí)現(xiàn)方式
• React提供的動畫輔助工具ReactCSSTransitionGroup
• React-Motion動畫庫

---

一、動畫的實(shí)現(xiàn)方式
在網(wǎng)頁中，實(shí)現(xiàn)動畫無外乎兩種方式：

• CSS3方式，也就是利用瀏覽器對CSS3原生支持實(shí)現(xiàn)動畫；
• 腳本方式，通過間隔一段時間用JavaScript來修改頁面元素樣式來實(shí)現(xiàn)動畫。

CSS3方式
CSS3的方式下，開發(fā)者一般在CSS中定義一些包含CSS3transition語法的規(guī)則。在某些特定情況下，讓這些規(guī)則發(fā)生作用，于是瀏覽器會將這些規(guī)則應(yīng)用于指定的DOM元素上，產(chǎn)生動畫的效果。這種方式效率比腳本方式高，因?yàn)闉g覽器原生支持，省去了JavaScript的解釋執(zhí)行負(fù)擔(dān)，有的瀏覽器甚至可以充分利用CPU加速的優(yōu)勢，進(jìn)一步增強(qiáng)動畫渲染的性能。
不過CSS3也有不少缺點(diǎn)：
首先，CSS3transition對一個動畫規(guī)則的定義是基于時間和速度曲線的規(guī)則。就是CSS3的動畫過程要描述成“在什么時間范圍內(nèi)，以什么樣的運(yùn)動節(jié)奏完成動畫”，這可能不利于動畫的流暢，因?yàn)閯赢嬍强赡鼙恢型敬驍嗟摹?br />因?yàn)镃SS3transition總是一閃而過，捕捉不到中間狀態(tài)，只能一遍一遍用肉眼去檢查動畫效果，這給開發(fā)者帶來了很大的痛苦。

腳本方式
相對于CSS3方式，腳本方式最大的好處就是更強(qiáng)的靈活性，開發(fā)者可以任意控制動畫的時間長度，也可以控制每個時間點(diǎn)上動畫渲染的樣式，可以更容易做出豐富的動畫效果。
腳本方式的缺點(diǎn)也很明顯，動畫過程通過JavaScript實(shí)現(xiàn)，不是瀏覽器原生支持，消耗的計算資源更多。

---

二、 ReactCSSTransition規(guī)則
Transition并不能代替CSS，相反，它離不開CSS，其扮演的角色是讓React組件在生命周期的特定階段使用不同的CSS規(guī)則，而連接React組件和CSS需要遵守一些規(guī)則。

類名規(guī)則
配合TransitionGroup中的transitionName屬性，對應(yīng)CSS規(guī)則中類名遵從統(tǒng)一的規(guī)則。類名由-符號把幾個單詞連接起來，除了transitionName的值，還可以有這幾個單詞：enter代表“裝載”開始時的狀態(tài)，leave代表“卸載”開始時的狀態(tài)，active代表動畫結(jié)束時的狀態(tài)。
假設(shè)transitionName為sample，那么定制相關(guān)React組件的類名就是：

• sample-enter
• sample-enter-active
• sample-leave
• sample-leave-active
  其中active后綴類名的作用比較特殊，因?yàn)橛肅SS3的transition功能實(shí)現(xiàn)動畫，必須定義“開始狀態(tài)”和“結(jié)束狀態(tài)”，只有存在這兩個狀態(tài)，CSS3才知道如何將元素屬性從“開始狀態(tài)”在指定的時間按照指定的速度曲線轉(zhuǎn)換為“結(jié)束狀態(tài)”，這兩個狀態(tài)必須定義在兩個不同的CSS類中，否則CSS3無法區(qū)分。

動畫時間長度
使用TransitionGroup，動畫的持續(xù)時間在兩個地方都要指定，第一個是在Transition-Group中以Timeout為結(jié)尾的屬性，第二個地方是在CSS文件中transition-duration規(guī)則。

裝載時機(jī)
TransitionGroup要發(fā)揮作用，必須自身已經(jīng)完成裝載了。因?yàn)門ransition也只是一個React組件，功能只有在被裝載之后才能發(fā)揮。

首次裝載
在Todo應(yīng)用中，TransitionGroup自身被裝載的時候，可能已經(jīng)包含了若干個TodoItem組件實(shí)例，但這些TodoItem組件雖然經(jīng)歷了裝載過程，卻沒有動畫效果，只有在TransitionGroup被裝載之后新加入的TodoItem組件才有動畫效果。如果想讓這些子組件也有動畫效果，那就要使用appear過程，appear代表的就是隨TransitionGroup一起“出現(xiàn)”的過程。

---

三、React-Motion動畫庫
React-Motion使用的是腳本方式。
react-motion中大量的使用了“以函數(shù)為子組件”的模式，react-motion提供的組件，都預(yù)期接受一個函數(shù)作為子組件。舉例如下：

Motion組件的defaultStyle屬性指定了一個初始值，style屬性指定了目標(biāo)值，期間不斷調(diào)用作為子組件的函數(shù)，完成動畫過程。
很顯然，motion并不直接參與動畫的繪制，它只是提供參數(shù)。具體的繪制過程，由作為子組件的繪制函數(shù)來完成，很顯然這種“以函數(shù)為子組件”的模式帶來了很大的靈活度。

轉(zhuǎn)載于:https://blog.51cto.com/chengyanli/2327141

總結(jié)

以上是生活随笔為你收集整理的React总结篇之十_动画的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。