第10章 動畫

動畫可以讓用戶體驗變得更加流暢自然，而React的TransitionGroup插件配合CSS3可以讓我們在項目中整合動畫效果的變得易如反掌。

通常情況下，瀏覽器中的動畫都擁有一套極其命令式的API，你需要選擇一個元素并主動移動它或者改變它的樣式，已實現動畫效果。這種渲染方式顯得格格不入，因此React選擇了一種偏聲明式的方法實現動畫。

CSS漸變組(CSS Transition Group)會在何時的渲染及重渲染時間點有策略地添加和移動元素的class，以此來簡化將CSS動畫應用于漸變的過程，這意味著唯一需要你完成的任務就是給這些class寫明合適的樣式。

間隔渲染以犧牲性能為代價提供餓了更多的擴展性和可控性。這種方法需要更多次的渲染，但同時也允許你為CSS之外的內容，（比如滾動條位置及Canvas繪畫）添加動畫。

CSS漸變組：

<ReactCSSTransitionGrouptransitionName='question'>{questions} </ReactCSSTransitionGroup>

ReactCSSTransitionGroup 是一款插件，它在文件最頂部通過var ReactCSSTransitionGroup =React.addons.ReactCSSTransitionGroup;語句引入。 它會自動在合適的時候處理組件重渲染，同時根據當前的漸變狀態調整漸變組的class以便實現組件樣式的改變。

給漸變的class添加樣式

為元素添加transitionName ='question'意味著給它添加餓了4個class:question-enter、question-enter-active、question-leave及question-leave-active。當子組件進入或者退出ReactCSSTranstionGroup時，CSSTransitionGroup插件會自動添加或移除這些Class。

以下是問卷編輯器中使用到的漸變樣式：

survey-editor.question-enter{transform:scale(1.2);transition:transform 0.2s cubic-bezier(.97,.84,.5,1.21); } .survey-editor.question-enter-active{transform:scale(1); } .survey-editor.question-leave{transform：translateY(0);opacity:0;transition:opacity 1.25,transgorm 1scubic-bezier(.52,-0.25,.52,.95); } .survey-editor.question-leave-active{opacity:0;transform:translateY(-100%); }

漸變生命周期

question-enter與question-enter-active的區別在于，question-enter這個class是組件被添加到漸變組后即刻添加上的，而question-enter-active則是在下一輪渲染時添加的，這樣設計讓你能輕松的定義漸變開始時候的樣式，結束時候的樣式以及如何進行漸變。

例如：當問卷調查器重的問題被添加到列表的時候他們首先用scale（1.2）進行發大，然后漸變到正常的scale（1）狀態，總共花了0.2秒，這就創造出了一種你看到的跳出來的效果。默認情況下，漸變組同事開啟了進入和退出的動畫，你可以通過給組件添加transitionEnter={false}或tranitionLeave={false}屬性來禁用其中一個或全部禁用，除了可以控制選擇哪些動畫外，我們還能根據一個可配置 的值在特定的情況下禁用動畫，像是這樣：

<ReactCSSTransitionGrouptransitionName='question'transitionEnter={this.props.enableAnimations}transitionLeave={this.props.enableAnimations}>{questions} </ReactCSSTransitionGroup>

使用漸變組的隱患

使用漸變組主要有兩個重要的隱患需要注意

首先，漸變組會延遲子組件的移除直到動畫完成，這意味著如果你把一個列表的組件包裹進一個ReactCSSTransitionGroup中，卻沒有trasitionName屬性指定的class明確任何CSS，這些組件將無法被移除——甚至當你嘗試不再渲染它們時也不可以。

其次漸變組每一個子組件都必須設置一個獨一無二的key屬性，漸變組使用這個屬性來判斷組件究竟是進入還是退出，因為如果沒有設置key屬性動畫可能無法執行，同時組件會變得無法移除。

注意，即使漸變組只有一個子元素，它也需要設置一個key屬性。

間隔渲染

使用CSS3動畫能夠獲得巨大的性能提升并擁有簡潔的代碼，但他們并不總是解決問題的正確工具，有些時候，你必須為比較老，不支持CSS3的瀏覽器做兼容，還有些時候你想為CSS屬性之外的東西添加動畫，比如滾動條位置和Canvas繪畫，這些情況下，間隔渲染能夠滿足我們的要求，但是相比CSS3動畫來說，它會帶來一定的性能損耗。

間隔渲染最基本的思想就是周期性的觸發組件狀態更新，以明確當前處于整個動畫時間中的什么階段。通過在組件的render方法中加入這個狀態值，組件能夠在每次狀態更新觸發的重渲染中正確的表示當前的動畫階段。

因為這種方法設計多次重渲染，所以通常最好和requestAnimationFrame一起使用以避免不必要的渲染，不過在requestAnimationFrame不被支持或不可用的情況下，降級到不那么智能的setTimeout就是唯一的選擇了。

使用requestAnimationFrame實現間隔渲染

假設你希望使用間隔渲染將一個div從屏幕的一邊移動到另一邊，可以通過給他添加position：absolute并隨著時間變化不停的更新left屬性或者top屬性來實現，根據消耗時間內的變化總量，用requestAnimationFrame來實現這個動畫應該可以得出一個流暢的動畫。

示例：page90

使用setTimeout實現間隔渲染

盡管requestAnimatingFrame總體上能夠以最小的性能損耗實現最流暢的動畫，但它在比較老的瀏覽器上無法使用的，而且它被調用的次數可能比你想象的更頻繁（也更加無法預測）。這些情況下你可以使用setTimout。

示例：page91

總結：

在狀態改變過程中，使用CSS3和漸變組高效的應用漸變動畫。

使用requestAnimationFrame為CSS之外的東西添加動畫，如滾動條位置或者Canvas繪畫。

當requestAnimationFrame不被支持時降級到setTimeout方法。

總結

以上是生活随笔為你收集整理的React-引领未来的用户界面开发框架-读书笔记（四）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。