来自 软件资讯 2019-11-14 16:40 的文章
当前位置: 威尼斯国际官方网站 > 软件资讯 > 正文

【奥门威尼斯网址】react动画难写

简介

transformjs在非react领域用得风生水起,那么react才干栈的同学能用上吗?答案是能够的。junexie童鞋已经造了个react版本。

动画达成形式

守旧 web 动漫的两种方式

  1. 纯粹的CSS3 :如:transition/animation+transform(赫赫有名的animate.css卡塔 尔(阿拉伯语:قطر‎
  2. JS + CSS3 transition或许animation:这里首先种同等,只是透过js里add class和remove class去充实可能移除对应的动漫
  3. 纯粹JS调整时间轴:第大器晚成和第三种都以自带时间轴,使用 setInterval / set提姆eout / requestAnimationFrame 不断地修正 DOM 的 style 属性发生动漫

对应在react中

使用CSS3

  • 奥门威尼斯网址 ,使用 ReactCSSTransitionGroup 来实现
  • 连锁动漫的class都有照拂的state,修正state约等于扩张如故移除class,也就一定于js里add class和remove class去充实大概移除对应的动漫

纯粹JS调整时间轴

  • 照例选用 setInterval / setTimeout / requestAnimationFrame,改过有些state 值,然后映射到 component 的 style 上。

此处很明显,方案1和方案2可应对简易场景(如未有prop change 回调等卡塔尔国,方案3可编制程序性最大,最灵敏,可以顺应复杂的动漫片场景恐怕接收复杂的并行场景。

安装

npm install css3transform-react

API

//set "translateX", "translateY", "translateZ", "scaleX", "scaleY", "scaleZ", "rotateX", "rotateY", "rotateZ", "skewX", "skewY", "originX", "originY", "originZ"
render() {
    return (
        <Transform
          translateX={100}
          scaleX={0.5}
          originX={0.5}>
          <div>sth</div>
        </Transform>
    );
}

// you can also use other porps, such as "className" or "style"
render() {
    return (
        <Transform
          translateX={100}
          className="ani"
          style={{width: '100px', background: 'red'}}
          <div>sth</div>
        </Transform>
    );
}

透过下面的注明,就可以设置也许读取"translateX", "translateY", "translateZ", "scaleX", "scaleY", "scaleZ", "rotateX", "rotateY", "rotateZ", "skewX", "skewY", "originX", "originY", "originZ"!

方便吧!

应用姿势

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 (
      <div>
        <Transform rotateZ={this.state.el1.rotateZ} className="test" style={{'backgroundColor': 'green'}}>
          transformjs
        </Transform>

        <Transform rotateY={this.state.el2.rotateY} className="test" style={{'backgroundColor': 'red', 'left': '200px'}}>
          transformjs
        </Transform>

      </div>
    );
  }
}

render(
    <Root />,
    document.getElementById('root')
);

尤其复杂的详尽的运用代码可以看这里:

在线演示

质量比较

因为react版本会有diff进度,然后apply diff to dom的进程,state改换不会全部innerHTML全体交替,所以对浏览器渲染来讲如故很有益,然而在js里diff的历程的耗费时间要么要求去profiles大器晚成把,倘使耗费时间严重,不在webworker里跑如故会卡住UI线程导致卡顿,交互作用延缓等。所以要看意气风发看CPU的耗费时间依旧很有尤为重要的。
首即便那方面包车型客车言传身教和守旧的直接操作dom的办法比较。就是上面这种思想的主意:

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

animate();

对二种艺术采纳chrome profiles了生机勃勃把。
先看总耗费时间相比

react:
奥门威尼斯网址 1

守旧方式:
奥门威尼斯网址 2

  • react在8739秒内CPU耗费时间花费了近乎1686ms
  • 观念方法在9254ms秒内CPU耗时开销雷同700ms

在不开展profiles就能够虚构到react是必然会越来越慢一些,因为state的退换要走把react生命周期走一回,然而足以见见react的耗费时间要么在能够采纳的限制。但是,我们犹盼找到拖慢的函数来。
那正是说在应用transformjs react版本中,哪个函数拖了后腿?张开profiles tree能够见见:

奥门威尼斯网址 3

正是它了。

/**
       * 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) {

张开对应的代码能够看来。注释里已经写了这是优化重视。

早先利用啊

官方网站:

Github地址:
别的难点和眼光接待new issue给我们。

本文由威尼斯国际官方网站发布于软件资讯,转载请注明出处:【奥门威尼斯网址】react动画难写

关键词: