第10章 動畫

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

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

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

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

CSS漸變組：

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

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

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

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

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

使用漸變組的隱患

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

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

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

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

間隔渲染

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

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

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

使用requestAnimationFrame實現(xiàn)間隔渲染

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

示例：page90

使用setTimeout實現(xiàn)間隔渲染

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

示例：page91

總結：

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

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

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

總結

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

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