React中常見的動畫實現(xiàn)的幾種方式

更新時間：2018年01月10日 09:35:08 作者：有贊技術(shù)團隊

本篇文章主要介紹了React中常見的動畫實現(xiàn)的幾種方式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

現(xiàn)在，用戶對于前端頁面的要求已經(jīng)不能滿足于實現(xiàn)功能，更要有顏值，有趣味。除了整體 UI 的美觀，在合適的地方添加合適的動畫效果往往比靜態(tài)頁面更具有表現(xiàn)力，達到更自然的效果。比如，一個簡單的 loading 動畫或者頁面切換效果不僅能緩解用戶的等待情緒，甚至通過使用品牌 logo 等形式，默默達到品牌宣傳的效果。

React 作為最近幾年比較流行的前端開發(fā)框架，提出了虛擬 DOM 概念，所有 DOM 的變化都先發(fā)生在虛擬 DOM 上，通過 DOM diff 來分析網(wǎng)頁的實際變化，然后反映在真實 DOM 上，從而極大地提升網(wǎng)頁性能。然而，在動畫實現(xiàn)方面，React 作為框架并不會直接給組件提供動畫效果，需要開發(fā)者自行實現(xiàn)，而傳統(tǒng) web 動畫大多數(shù)都通過直接操作實際 DOM 元素來實現(xiàn)，這在 React 中顯然是不被提倡的。那么，在 React 中動畫都是如何實現(xiàn)的呢？

所有動畫的本質(zhì)都是連續(xù)修改 DOM 元素的一個或者多個屬性，使其產(chǎn)生連貫的變化效果，從而形成動畫。在 React 中實現(xiàn)動畫本質(zhì)上與傳統(tǒng) web 動畫一樣，仍然是兩種方式：通過 css3 動畫實現(xiàn)和通過 js 修改元素屬性。只不過在具體實現(xiàn)時，要更為符合 React 的框架特性，可以概括為幾類：

基于定時器或 requestAnimationFrame(RAF) 的間隔動畫；
基于 css3 的簡單動畫；
React 動畫插件 CssTransitionGroup；
結(jié)合 hook 實現(xiàn)復(fù)雜動畫；
其他第三方動畫庫。

一、基于定時器或 RAF 的間隔動畫

最早，動畫的實現(xiàn)都是依靠定時器 setInterval ， setTimeout 或者 requestAnimationFrame (RAF) 直接修改 DOM 元素的屬性。不熟悉 React 特性的開發(fā)者可能會習(xí)慣性地通過 ref 或者 findDOMNode() 獲取真實的 DOM 節(jié)點，直接修改其樣式。然而，通過 ref 直接獲取真實 DOM 并對其操作是是不被提倡使用，應(yīng)當(dāng)盡量避免這種操作。

因此，我們需要將定時器或者 RAF 等方法與 DOM 節(jié)點屬性通過 state 聯(lián)系起來。首先，需要提取出與變化樣式相關(guān)的屬性，替換為 state ，然后在合適的生命周期函數(shù)中添加定時器或者 requestAnimationFrame 不斷修改 state ，觸發(fā)組件更新，從而實現(xiàn)動畫效果。

示例

以一個進度條為例，代碼如下所示：

// 使用requestAnimationFrame改變state
import React, { Component } from 'react';

export default class Progress extends Component { 
  constructor(props) {
    super(props);
    this.state = {
      percent: 10
    };
  }

  increase = () => {
    const percent = this.state.percent;
    const targetPercent = percent >= 90 ? 100 : percent + 10;
    const speed = (targetPercent - percent) / 400;
    let start = null;
    const animate = timestamp => {
      if (!start) start = timestamp;
      const progress = timestamp - start;
      const currentProgress = Math.min(parseInt(speed * progress + percent, 10), targetPercent);
      this.setState({
        percent: currentProgress
      });
      if (currentProgress < targetPercent) {
        window.requestAnimationFrame(animate);
      }
    };
    window.requestAnimationFrame(animate);
  }

  decrease = () => {
    const percent = this.state.percent;
    const targetPercent = percent < 10 ? 0 : percent - 10;
    const speed = (percent - targetPercent) / 400;
    let start = null;
    const animate = timestamp => {
      if (!start) start = timestamp;
      const progress = timestamp - start;
      const currentProgress = Math.max(parseInt(percent - speed * progress, 10), targetPercent);
      this.setState({
          percent: currentProgress
        });
      if (currentProgress > targetPercent) {
        window.requestAnimationFrame(animate);
      }
    };
    window.requestAnimationFrame(animate);
  }

  render() {
    const { percent } = this.state;

    return (
      <div>
        <div className="progress">
          <div className="progress-wrapper" >
            <div className="progress-inner" style = {{width: `${percent}%`}} ></div>
          </div>
          <div className="progress-info" >{percent}%</div>
        </div>
        <div className="btns">
          <button onClick={this.decrease}>-</button>
          <button onClick={this.increase}>+</button>
        </div>
      </div>
    );
  }
}

在示例中，我們在 increase 和 decrease 函數(shù)中構(gòu)建線性過渡函數(shù) animation ， requestAnimationFrame 在瀏覽器每次重繪前執(zhí)行會執(zhí)行過渡函數(shù)，計算當(dāng)前進度條 width 屬性并更新該 state ，使得進度條重新渲染。該示例的效果如下所示：

這種實現(xiàn)方式在使用 requestAnimationFrame 時性能不錯，完全使用純 js 實現(xiàn)，不依賴于 css，使用定時器時可能出現(xiàn)掉幀卡頓現(xiàn)象。此外，還需要開發(fā)者根據(jù)速度函數(shù)自己計算狀態(tài)，比較復(fù)雜。

二、基于 css3 的簡單動畫

當(dāng) css3 中的 animation 和 transition 出現(xiàn)和普及后，我們可以輕松地利用 css 實現(xiàn)元素樣式的變化，而不用通過人為計算實時樣式。

示例

我們?nèi)砸陨厦娴倪M度條為例，使用 css3 實現(xiàn)進度條動態(tài)效果，代碼如下所示：

import React, { Component } from 'react';

export default class Progress extends Component { 
  constructor(props) {
    super(props);
    this.state = {
      percent: 10
    };
  }

  increase = () => {
    const percent = this.state.percent + 10;
    this.setState({
      percent: percent > 100 ? 100 : percent,
    })
  }

  decrease = () => {
    const percent = this.state.percent - 10;
    this.setState({
      percent: percent < 0 ? 0 : percent,
    })
  }

  render() {
    // 同上例， 省略
    ....
  }
}

.progress-inner {
 transition: width 400ms cubic-bezier(0.08, 0.82, 0.17, 1);
 // 其他樣式同上，省略
 ...
}

在示例中， increase 和 decrease 函數(shù)中不再計算 width ，而是直接設(shè)置增減后的寬度。需要注意的是，在 css 樣式中設(shè)置了 transition 屬性，該屬性在其指定的 transition-property 發(fā)生變化時自動實現(xiàn)樣式的動態(tài)變化效果，并且可以設(shè)置不同的速度效果的速度曲線。該示例的效果如下圖所示，可以發(fā)現(xiàn)，與上一個例子不同的是，右側(cè)的進度數(shù)據(jù)是直接變化為目標(biāo)數(shù)字，沒有具體的變化過程，而進度條的動態(tài)效果因為不再是線性變化，效果更為生動。

基于 css3 的實現(xiàn)方式具有較高的性能，代碼量少，但是只能依賴于 css 效果，對于復(fù)雜動畫也很難實現(xiàn)。此外，通過修改 state 實現(xiàn)動畫效果，只能作用于已經(jīng)存在于 DOM 樹中的節(jié)點。如果想用這種方式為組件添加入場和離場動畫，需要維持至少兩個 state 來實現(xiàn)入場和離場動畫，其中一個 state 用于控制元素是否顯示，另一個 state 用于控制元素在動畫中的變化屬性。在這種情況下，開發(fā)者需要花費大量精力來維護組件的動畫邏輯，十分復(fù)雜繁瑣。

三、React 動畫插件 CssTransitionGroup

React 曾為開發(fā)者提供過動畫插件 react-addons-css-transition-group ，后交由社區(qū)維護，形成現(xiàn)在的 react-transition-group ，該插件可以方便地實現(xiàn)組件的入場和離場動畫，使用時需要開發(fā)者額外安裝。 react-transition-group 包含 CSSTransitionGroup 和 TransitionGroup 兩個動畫插件，其中，后者是底層 api，前者是后者的進一步封裝，可以較為便捷地實現(xiàn) css 動畫。

示例

以一個動態(tài)增加tab的為例，代碼如下：

import React, { Component } from 'react'; 
import { CSSTransitionGroup } from 'react-transition-group';

let uid = 2; 
export default class Tabs extends Component { 
  constructor(props) {
    super(props);
    this.state = {
      activeId: 1,
      tabData: [{
        id: 1,
        panel: '選項1'
      }, {
        id: 2,
        panel: '選項2'
      }]
    };
  }

  addTab = () => {
    // 添加tab代碼
    ...
  }

  deleteTab = (id) => {
    // 刪除tab代碼
    ...
  }

  render() {
    const { tabData, activeId } = this.state;

    const renderTabs = () => {
      return tabData.map((item, index) => {
        return (
          <div
            className={`tab-item${item.id === activeId ? ' tab-item-active' : ''}`}
            key={`tab${item.id}`}
          >
            {item.panel}
            <span className="btns btn-delete" onClick={() => this.deleteTab(item.id)}>✕</span>
          </div>
        );
      })
    }

    return (
      <div>
        <div className="tabs" >
          <CSSTransitionGroup
           transitionName="tabs-wrap"
           transitionEnterTimeout={500}
           transitionLeaveTimeout={500}
          >
           {renderTabs()}
          </CSSTransitionGroup>
          <span className="btns btn-add" onClick={this.addTab}>+</span>
        </div>
        <div className="tab-cont">
          cont
        </div>
      </div>
    );
  }
}

/* tab動態(tài)增加動畫 */
.tabs-wrap-enter {
 opacity: 0.01;
}

.tabs-wrap-enter.tabs-wrap-enter-active {
 opacity: 1;
 transition: all 500ms ease-in;
}

.tabs-wrap-leave {
 opacity: 1;
}

.tabs-wrap-leave.tabs-wrap-leave-active {
 opacity: 0.01;
 transition: all 500ms ease-in;
}

CSSTransitionGroup 可以為其子節(jié)點添加額外的 css 類，然后通過 css 動畫達到入場和離場動畫效果。為了給每個 tab 節(jié)點添加動畫效果，需要先將它們包裹在 CSSTransitionGroup 組件中。當(dāng)設(shè)定 transitionName 屬性為 'tabs-wrapper' ， transitionEnterTimeout 為400毫秒后，一旦 CSSTransitionGroup 中新增節(jié)點，該新增節(jié)點會在出現(xiàn)時被添加上 css 類 'tabs-wrapper-enter' ，然后在下一幀時被添加上 css 類 'tabs-wrapper-enter-active' 。由于這兩個 css 類中設(shè)定了不同的透明度和 css3 transition 屬性，所以節(jié)點實現(xiàn)了透明度由小到大的入場效果。400毫秒后 css 類 'tabs-wrapper-enter' 和 'tabs-wrapper-enter-active' 將會同時被移除，節(jié)點完成整個入場動畫過程。離場動畫的實現(xiàn)類似于入場動畫，只不過被添加的 css 類名為 'tabs-wrapper-leave' 和 'tabs-wrapper-leave-active' 。該示例效果如下圖所示：

CSSTransitionGroup 支持以下7個屬性：

其中，入場和離場動畫是默認(rèn)開啟的，使用時需要設(shè)置 transitionEnterTimeout 和 transitionLeaveTimeout 。值得注意的是， CSSTransitionGroup 還提供出現(xiàn)動畫（appear），使用時需要設(shè)置 transitionAppearTimeout 。那么，出現(xiàn)動畫和入場動畫有什么區(qū)別呢？當(dāng)設(shè)定 transitionAppear 為 true 時， CSSTransitionGroup 在 初次渲染 時，會添加一個出現(xiàn)階段。在該階段中， CSSTransitionGroup 的已有子節(jié)點都會被相繼添加 css 類 'tabs-wrapper-appear' 和 'tabs-wrapper-appear-active' ，實現(xiàn)出現(xiàn)動畫效果。因此，出現(xiàn)動畫僅適用于 CSSTransitionGroup 在初次渲染時就存在的子節(jié)點，一旦 CSSTransitionGroup 完成渲染，其子節(jié)點就只可能有入場動畫（enter），不可能有出現(xiàn)動畫（appear）。

此外，使用 CSSTransitionGroup 需要注意以下幾點：

CSSTransitionGroup 默認(rèn)在 DOM 樹中生成一個 span 標(biāo)簽包裹其子節(jié)點，如果想要使用其他 html 標(biāo)簽，可設(shè)定 CSSTransitionGroup 的 component 屬性；
CSSTransitionGroup 的子元素必須添加 key 值才會在節(jié)點發(fā)生變化時，準(zhǔn)確地計算出哪些節(jié)點需要添加入場動畫，哪些節(jié)點需要添加離場動畫；
CSSTransitionGroup 的動畫效果只作用于直接子節(jié)點，不作用于其孫子節(jié)點；
動畫的結(jié)束時間不以 css 中 transition-duration 為準(zhǔn)，而是以 transitionEnterTimeout ， transitionLeaveTimeout ， TransitionAppearTimeout 為準(zhǔn)，因為某些情況下 transitionend 事件不會被觸發(fā)，詳見 MDN transitionend 。

CSSTransitionGroup 實現(xiàn)動畫的優(yōu)點是：

簡單易用，可以方便快捷地實現(xiàn)元素的入場和離場動畫；
與 React 結(jié)合，性能比較好。

CSSTransitionGroup 缺點也十分明顯：

局限于出現(xiàn)動畫，入場動畫和離場動畫；
由于需要制定 transitionName ，靈活性不夠；
只能依靠 css 實現(xiàn)簡單的動畫。

四、結(jié)合 hook 實現(xiàn)復(fù)雜動畫

在實際項目中，可能需要一些更炫酷的動畫效果，這些效果僅依賴于 css3 往往較難實現(xiàn)。此時，我們不妨借助一些成熟的第三方庫，如 jQuery 或 GASP，結(jié)合 React 組件中的生命周期鉤子方法 hook 函數(shù)，實現(xiàn)復(fù)雜動畫效果。除了 React 組件正常的生命周期外， CSSTransitionGroup 的底層 api TransitonGroup 還為其子元素額外提供了一系列特殊的生命周期 hook 函數(shù)，在這些 hook 函數(shù)中結(jié)合第三方動畫庫可以實現(xiàn)豐富的入場、離場動畫效果。

TransisitonGroup 分別提供一下六個生命周期 hook 函數(shù)：

componentWillAppear(callback)
componentDidAppear()
componentWillEnter(callback)
componentDidEnter()
componentWillLeave(callback)
componentDidLeave()

它們的觸發(fā)時機如圖所示：

示例

GASP 是一個 flash 時代發(fā)展至今的動畫庫，借鑒視頻幀的概念，特別適合做長時間的序列動畫效果。本文中，我們用 TransitonGroup 和 react-gsap-enhancer （一個可以將 GSAP 應(yīng)用于 React 的增強庫）完成一個圖片畫廊，代碼如下：

import React, { Component } from 'react'; 
import { TransitionGroup } from 'react-transition-group'; 
import GSAP from 'react-gsap-enhancer' 
import { TimelineMax, Back, Sine } from 'gsap';

class Photo extends Component { 
  constructor(props) {
    super(props);
  }

  componentWillEnter(callback) {
    this.addAnimation(this.enterAnim, {callback: callback})
  }

  componentWillLeave(callback) {
    this.addAnimation(this.leaveAnim, {callback: callback})
  }

  enterAnim = (utils) => {
    const { id } = this.props;
    return new TimelineMax()
      .from(utils.target, 1, {
        x: `+=${( 4 - id ) * 60}px`,
        autoAlpha: 0,
        onComplete: utils.options.callback,
      }, id * 0.7);
  }

  leaveAnim = (utils) => {
    const { id } = this.props;
    return new TimelineMax()
      .to(utils.target, 0.5, {
        scale: 0,
        ease: Sine.easeOut,
        onComplete: utils.options.callback,
      }, (4 - id) * 0.7);
  }

  render() {
    const { url } = this.props;
    return (
      <div className="photo">
        <img src={url} />
      </div>
    )
  }
}

const WrappedPhoto = GSAP()(Photo);

export default class Gallery extends Component { 
  constructor(props) {
    super(props);
    this.state = {
      show: false,
      photos: [{
        id: 1,
        url: 'http://img4.imgtn.bdimg.com/it/u=1032683424,3204785822&fm=214&gp=0.jpg'
      }, {
        id: 2,
        url: 'http://imgtu.5011.net/uploads/content/20170323/7488001490262119.jpg'
      }, {
        id: 3,
        url: 'http://tupian.enterdesk.com/2014/lxy/2014/12/03/18/10.jpg'
      }, {
        id: 4,
        url: 'http://img4.imgtn.bdimg.com/it/u=360498760,1598118672&fm=27&gp=0.jpg'
      }]
    };
  }

  toggle = () => {
    this.setState({
      show: !this.state.show
    })
  }

  render() {
    const { show, photos } = this.state;

    const renderPhotos = () => {
      return photos.map((item, index) => {
        return <WrappedPhoto id={item.id} url={item.url} key={`photo${item.id}`} />;
      })
    }

    return (
      <div>
        <button onClick={this.toggle}>toggle</button>
        <TransitionGroup component="div">
          {show && renderPhotos()}
        </TransitionGroup>
      </div>
    );
  }
}

在該示例中，我們在子組件 Photo 的 componentWillEnter 和 componentWillLeave 兩個 hook 函數(shù)中為每個子組件添加了入場動畫 enterAnim 和離場動畫 LeaveAnim 。在入場動畫中，使用 TimeLineMax.from(target, duration, vars, delay) 方式建立時間軸動畫，指定了每個子組件的動畫移動距離隨 id 增大而減小，延期時間隨著 id 增大而增大，離場動畫中每個子組件的延期時間隨著 id 增大而減小，從而實現(xiàn)根據(jù)組件 id 不同具有不同的動畫效果。實際使用時，你可以根據(jù)需求對任一子組件添加不同的效果。該示例的效果如下圖所示：

在使用 TransitionGroup 時，在 componentnWillAppear(callback) ， componentnWillEntercallback) ， componentnWillLeave(callback) 函數(shù)中一定要在函數(shù)邏輯結(jié)束后調(diào)用 callback ，以保證 TransitionGroup 能正確維護子節(jié)點的狀態(tài)序列。

結(jié)合 hook 實現(xiàn)動畫可以支持各種復(fù)雜動畫，如時間序列動畫等，由于依賴第三方庫，往往動畫效果比較流暢，用戶體驗較好。但是第三方庫的引入，需要開發(fā)者額外學(xué)習(xí)對應(yīng)的 api，也提升了代碼復(fù)雜度。

五、其他第三方動畫庫

此外，還有很多優(yōu)秀的第三方動畫庫，如 react-motion ，Animated， velocity-react 等，這些動畫庫在使用時也各有千秋。

Animated

Animated 是一個跨平臺的動畫庫，兼容 React 和 React Native。由于在動畫過程中，我們只關(guān)心動畫的初始狀態(tài)、結(jié)束狀態(tài)和變化函數(shù)，并不關(guān)心每個時刻元素屬性的具體值，所以 Animatied 采用聲明式的動畫，通過它提供的特定方法計算 css 對象，并傳入 Animated.div 實現(xiàn)動畫效果。

示例

我們使用 Animated 實現(xiàn)一個圖片翻轉(zhuǎn)的效果，代碼如下。

import React, { Component } from 'react'; 
import Animated from 'animated/lib/targets/react-dom';

export default class PhotoPreview extends Component { 
  constructor(props) {
    super(props);
    this.state = {
      anim: new Animated.Value(0)
    };
  }

  handleClick = () => {
    const { anim } = this.state;
    anim.stopAnimation(value => {
      Animated.spring(anim, {
        toValue: Math.round(value) + 1
      }).start();
    });
  }

  render() {
    const { anim } = this.state;

    const rotateDegree = anim.interpolate({
      inputRange: [0, 4],
      outputRange: ['0deg', '360deg']
    });

    return (
      <div>
        <button onClick={this.handleClick}>向右翻轉(zhuǎn)</button>
        <Animated.div
          style={{
            transform: [{
              rotate: rotateDegree
            }]
          }}
          className="preivew-wrapper"
        >
          <img
            alt="img"
            src="http://img4.imgtn.bdimg.com/it/u=1032683424,3204785822&fm=214&gp=0.jpg"
          />
        </Animated.div>
      </div>
    );
  }
}

在該示例中，我們希望實現(xiàn)每點擊一次按鈕，圖片向右旋轉(zhuǎn)90°。在組件初始化時新建了一個初始值為 0 的 Animated 對象 this.state.anim ，在 render 函數(shù)中通過插值函數(shù) interpolate 根據(jù) Animated 對象的當(dāng)前值計算得到對應(yīng)的旋轉(zhuǎn)角度 rotateDegree 。我們假設(shè)每點擊一次按鈕， Animated 對象的值加 1，相應(yīng)地圖像轉(zhuǎn)動90°，所以，設(shè)置 interpolate 函數(shù)的輸入?yún)^(qū)間為[0, 4]，輸出區(qū)間為['0deg', '360deg']進行線性插值。如果 Animated 對象當(dāng)前值為 2，對應(yīng)的旋轉(zhuǎn)角度就是 180deg。在組件渲染結(jié)構(gòu)中，需要使用 Animated.div 包裹動畫節(jié)點，并將變化的元素屬性封裝為 css 對象作為 stlye 傳入 Animated.div 中。在點擊事件中，考慮到按鈕可以多次連續(xù)點擊，我們首先使用 stopAnimation 停止當(dāng)前動畫，并獲取 Animated 對象的當(dāng)前值 value ，隨后使用 Animated.spring 函數(shù)開啟一次彈簧動畫過程，從而實現(xiàn)一個流暢的動畫效果。由于每次轉(zhuǎn)動停止時，我們希望圖片的翻轉(zhuǎn)角度都是90°的整數(shù)倍，所以需要對 Animated.spring 的終止值進行取整。最終我們實現(xiàn)了如下效果:

使用時需要注意一下幾點：

Animated 對象的值和其插值結(jié)果只能作用于 Animated.div 節(jié)點；
interpolate 默認(rèn)會根據(jù)輸入?yún)^(qū)間和輸出區(qū)間進行線性插值，如果輸入值超出輸入?yún)^(qū)間不受影響，插值結(jié)果默認(rèn)會根據(jù)輸出區(qū)間向外延展插值，可以通過設(shè)置 extrapolate 屬性限制插值結(jié)果區(qū)間。

Animated 在動畫過程中不直接修改組件 state ，而是通過其新建對象的組件和方法直接修改元素的屬性，不會重復(fù)觸發(fā) render 函數(shù)，是 React Native 中非常穩(wěn)定的動畫庫。但是在 React 中存在低版本瀏覽器兼容問題，且具有一定學(xué)習(xí)成本。

結(jié)語

當(dāng)我們在 React 中實現(xiàn)動畫時，首先要考量動畫的難易程度和使用場景，對于簡單動畫，優(yōu)先使用 css3 實現(xiàn)，其次是基于 js 的時間間隔動畫。如果是元素入場動畫和離場動畫，則建議結(jié)合 CSSTransitionGroup 或者 TransitionGroup 實現(xiàn)。當(dāng)要實現(xiàn)的動畫效果較為復(fù)雜時，不妨嘗試一些優(yōu)秀的第三方庫，打開精彩的動效大門。

Ps. 本文所有示例代碼可訪問 github 查看