react動(dòng)畫難寫？試試react版transformjs

elarity 發(fā)布于2019-08-21 11:18 / 1679人閱讀

摘要：童鞋已經(jīng)造了個(gè)版本。這里很明顯，方案和方案可應(yīng)對(duì)簡(jiǎn)單場(chǎng)景如沒(méi)有回調(diào)等，方案可編程性最大，最靈活，可以適合復(fù)雜的動(dòng)畫場(chǎng)景或者承受復(fù)雜的交互場(chǎng)景。主要是那上面的演示和傳統(tǒng)的直接操作的方式對(duì)比。注釋里已經(jīng)寫了這是優(yōu)化重點(diǎn)。

簡(jiǎn)介

transformjs在非react領(lǐng)域用得風(fēng)生水起，那么react技術(shù)棧的同學(xué)能用上嗎？答案是可以的。junexie童鞋已經(jīng)造了個(gè)react版本。

動(dòng)畫實(shí)現(xiàn)方式

傳統(tǒng) web 動(dòng)畫的兩種方式：

純粹的CSS3 ：如：transition/animation+transform（大名鼎鼎的animate.css）

JS + CSS3 transition或者animation：這里第一種一樣，只是通過(guò)js里add class和remove class去增加或者移除對(duì)應(yīng)的動(dòng)畫

純粹JS控制時(shí)間軸：第一和第二種都是自帶時(shí)間軸，使用 setInterval / setTimeout / requestAnimationFrame 不斷地修改 DOM 的 style 屬性產(chǎn)生動(dòng)畫

對(duì)應(yīng)在react中：

使用CSS3

使用 ReactCSSTransitionGroup 來(lái)實(shí)現(xiàn)

相關(guān)動(dòng)畫的class都有對(duì)應(yīng)的state，修改state相當(dāng)于增加或者移除class，也就相當(dāng)于js里add class和remove class去增加或者移除對(duì)應(yīng)的動(dòng)畫

純粹JS控制時(shí)間軸

仍然使用 setInterval / setTimeout / requestAnimationFrame，修改某個(gè) state 值，然后映射到 component 的 style 上。

這里很明顯，方案1和方案2可應(yīng)對(duì)簡(jiǎn)單場(chǎng)景（如沒(méi)有prop change 回調(diào)等），方案3可編程性最大，最靈活，可以適合復(fù)雜的動(dòng)畫場(chǎng)景或者承受復(fù)雜的交互場(chǎng)景。

安裝

npm install css3transform-react

API

//set "translateX", "translateY", "translateZ", "scaleX", "scaleY", "scaleZ", "rotateX", "rotateY", "rotateZ", "skewX", "skewY", "originX", "originY", "originZ"
render() {
    return (
        
          sth
        
    );
}

// you can also use other porps, such as "className" or "style"
render() {
    return (
        sth

); }

通過(guò)上面的聲明，就可以設(shè)置或者讀取"translateX", "translateY", "translateZ", "scaleX", "scaleY", "scaleZ", "rotateX", "rotateY", "rotateZ", "skewX", "skewY", "originX", "originY", "originZ"！

方便吧！

使用姿勢(shì)

import React, { Component } from "react";
import { render } from "react-dom";

import Transform from "../../transform.react.js";

class Root extends Component {

  constructor(props, context) {
    super(props, context);

    this.state = {
      el1: {rotateZ: 0},
      el2: {rotateY: 0}
    };

    this.animate = this.animate.bind(this);
  }

  animate() {
    this.setState({
      el1: {rotateZ: this.state.el1.rotateZ + 1},
      el2: {rotateY: this.state.el2.rotateY + 1}
    }, () => {
      requestAnimationFrame(this.animate);
    });

  }

  componentDidMount() {
    setTimeout(this.animate, 500);
  }

  render() {
    return (
      
        
          transformjs
        

        
          transformjs
        

      
    );
  }
}

render(
    ,
    document.getElementById("root")
);

更加復(fù)雜的詳細(xì)的使用代碼可以看這里：https://github.com/AlloyTeam/AlloyTouch/blob/master/transformjs/react/example/src/index.jsx

在線演示

http://alloyteam.github.io/AlloyTouch/transformjs/react/example/

性能對(duì)比

因?yàn)閞eact版本會(huì)有diff過(guò)程，然后apply diff to dom的過(guò)程，state改變不會(huì)整個(gè)innerHTML全部替換，所以對(duì)瀏覽器渲染來(lái)說(shuō)還是很便宜，但是在js里diff的過(guò)程的耗時(shí)還是需要去profiles一把，如果耗時(shí)嚴(yán)重，不在webworker里跑還是會(huì)卡住UI線程導(dǎo)致卡頓，交互延緩等。所以要看一看CPU的耗時(shí)還是很有必要的。
主要是那上面的演示和傳統(tǒng)的直接操作dom的方式對(duì)比。就是下面這種傳統(tǒng)的方式：

var element1 = document.querySelector("#test1");
Transform(element1);
...
...
function animate() {
    element1.rotateZ++;
    ...
    requestAnimationFrame(animate);
}

animate();

對(duì)兩種方式使用chrome profiles了一把。
先看總耗時(shí)對(duì)比：

react：

傳統(tǒng)方式：

react在8739秒內(nèi)CPU耗時(shí)花費(fèi)了近似1686ms

傳統(tǒng)方式在9254ms秒內(nèi)CPU耗時(shí)花費(fèi)近似700ms

在不進(jìn)行profiles就能想象到react是一定會(huì)更慢一些，因?yàn)閟tate的改變要走把react生命周期走一遍，但是可以看到react的耗時(shí)還是在可以接受的范圍。但是，我們還是希望找到拖慢的函數(shù)來(lái)。
那么在使用transformjs react版本中，哪個(gè)函數(shù)拖了后腿？展開(kāi)profiles tree可以看到：

就是它了。

/**
       * Reconciles the properties by detecting differences in property values and
       * updating the DOM as necessary. This function is probably the single most
       * critical path for performance optimization.
       *
       * TODO: Benchmark whether checking for changed values in memory actually
       *       improves performance (especially statically positioned elements).
       * TODO: Benchmark the effects of putting this at the top since 99% of props
       *       do not change for a given reconciliation.
       * TODO: Benchmark areas that can be improved with caching.
       *
       * @private
       * @param {object} lastProps
       * @param {object} nextProps
       * @param {?DOMElement} node
       */
      _updateDOMProperties: function (lastProps, nextProps, transaction) {

打開(kāi)對(duì)應(yīng)的代碼可以看到。注釋里已經(jīng)寫了這是優(yōu)化重點(diǎn)。

開(kāi)始使用吧

官方網(wǎng)站：http://alloyteam.github.io/AlloyTouch/transformjs/

Github地址：https://github.com/AlloyTeam/AlloyTouch/tree/master/transformjs
任何問(wèn)題和意見(jiàn)歡迎new issue給我們。