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

---

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

創(chuàng)新互聯(lián)公司主要從事成都網站制作、成都網站設計、網頁設計、企業(yè)做網站、公司建網站等業(yè)務。立足成都服務連江,十多年網站建設經驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:18980820575

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

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

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

---

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

1. 類名規(guī)則
   配合TransitionGroup中的transitionName屬性，對應CSS規(guī)則中類名遵從統(tǒng)一的規(guī)則。類名由-符號把幾個單詞連接起來，除了transitionName的值，還可以有這幾個單詞：enter代表“裝載”開始時的狀態(tài)，leave代表“卸載”開始時的狀態(tài)，active代表動畫結束時的狀態(tài)。
   假設transitionName為sample，那么定制相關React組件的類名就是：
   • sample-enter
   • sample-enter-active
   • sample-leave
   • sample-leave-active
     其中active后綴類名的作用比較特殊，因為用CSS3的transition功能實現(xiàn)動畫，必須定義“開始狀態(tài)”和“結束狀態(tài)”，只有存在這兩個狀態(tài)，CSS3才知道如何將元素屬性從“開始狀態(tài)”在指定的時間按照指定的速度曲線轉換為“結束狀態(tài)”，這兩個狀態(tài)必須定義在兩個不同的CSS類中，否則CSS3無法區(qū)分。
2. 動畫時間長度
   使用TransitionGroup，動畫的持續(xù)時間在兩個地方都要指定，第一個是在Transition-Group中以Timeout為結尾的屬性，第二個地方是在CSS文件中transition-duration規(guī)則。
3. 裝載時機
   TransitionGroup要發(fā)揮作用，必須自身已經完成裝載了。因為Transition也只是一個React組件，功能只有在被裝載之后才能發(fā)揮。
4. 首次裝載
   在Todo應用中，TransitionGroup自身被裝載的時候，可能已經包含了若干個TodoItem組件實例，但這些TodoItem組件雖然經歷了裝載過程，卻沒有動畫效果，只有在TransitionGroup被裝載之后新加入的TodoItem組件才有動畫效果。如果想讓這些子組件也有動畫效果，那就要使用appear過程，appear代表的就是隨TransitionGroup一起“出現(xiàn)”的過程。

---

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

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

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

本文標題：React總結篇之十_動畫-創(chuàng)新互聯(lián)
當前網址：http://weahome.cn/article/coogod.html