react动画难写？试试react版transformjs

elarity 发布于2019-08-21 11:18 / 1677人阅读

摘要：童鞋已经造了个版本。这里很明显，方案和方案可应对简单场景如没有回调等，方案可编程性最大，最灵活，可以适合复杂的动画场景或者承受复杂的交互场景。主要是那上面的演示和传统的直接操作的方式对比。注释里已经写了这是优化重点。

简介

transformjs在非react领域用得风生水起，那么react技术栈的同学能用上吗？答案是可以的。junexie童鞋已经造了个react版本。

动画实现方式

传统 web 动画的两种方式：

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

JS + CSS3 transition或者animation：这里第一种一样，只是通过js里add class和remove class去增加或者移除对应的动画

纯粹JS控制时间轴：第一和第二种都是自带时间轴，使用 setInterval / setTimeout / 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 (
        
          sth
        
    );
}

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

); }

通过上面的声明，就可以设置或者读取"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 (
      
        
          transformjs
        

        
          transformjs
        

      
    );
  }
}

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

更加复杂的详细的使用代码可以看这里：https://github.com/AlloyTeam/AlloyTouch/blob/master/transformjs/react/example/src/index.jsx

在线演示

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

性能对比

因为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：

传统方式：

react在8739秒内CPU耗时花费了近似1686ms

传统方式在9254ms秒内CPU耗时花费近似700ms

在不进行profiles就能想象到react是一定会更慢一些，因为state的改变要走把react生命周期走一遍，但是可以看到react的耗时还是在可以接受的范围。但是，我们还是希望找到拖慢的函数来。
那么在使用transformjs react版本中，哪个函数拖了后腿？展开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) {

打开对应的代码可以看到。注释里已经写了这是优化重点。

开始使用吧

官方网站：http://alloyteam.github.io/AlloyTouch/transformjs/

Github地址：https://github.com/AlloyTeam/AlloyTouch/tree/master/transformjs
任何问题和意见欢迎new issue给我们。

云服务器 GPU云服务器 React版Mung React-Native版Mung react _React

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86540.html

AlloyTouch 0.2.0发布--鱼和熊掌兼得

摘要：主要更新版本已经支持事件回调了鱼和熊掌兼得慢，什么是鱼什么是熊掌鱼，性能。读取当触发了之后，会去清除定时器。这里需要注意，当用户传了配置，会延迟清除定时器，因为校正的过程需要。原文链接：https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-0.2.0 背景公司师姐昨日在KM发了篇长文，主要结论RAF+transform3d就...

csRyan 2019-08-21 11:24 评论0 收藏0
AlloyTouch 0.2.0发布--鱼和熊掌兼得

摘要：主要更新版本已经支持事件回调了鱼和熊掌兼得慢，什么是鱼什么是熊掌鱼，性能。读取当触发了之后，会去清除定时器。这里需要注意，当用户传了配置，会延迟清除定时器，因为校正的过程需要。原文链接：https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-0.2.0 背景公司师姐昨日在KM发了篇长文，主要结论RAF+transform3d就...

shevy 2019-08-30 13:17 评论0 收藏0
关于单页面应用一些随想

摘要：前面不短时间持续投入了时间在做应用架构方面的考量一个是冒险进行了一次应用架构的调整另一个是跟进了的进展当然实际上是同一个事情也许错过的比收获的还多一些不过能走到现在也算幸运了毕竟单页面应用还面临很多不成熟之处国庆长假过去不少现在的想法估计会前面不短时间持续投入了时间在做 React 应用架构方面的考量一个是冒险进行了一次应用架构的调整, 另一个是跟进了 Redux 的进展当然, 实际...

AaronYuan 2019-08-21 10:41 评论0 收藏0
超级小的web手势库AlloyFinger发布

摘要：拥有两个版本，无依赖的独立版和版本。除了对象，也可监听内元素的手势需要引擎内置对象支持绑定相关事件。据不完全统计，目前服务于兴趣部落群动漫腾讯学院腾讯等多个部门团队和项目。也可以在事件回调里根据携带的信息使用去操作。简介针对多点触控设备编程的Web手势组件，快速帮助你的web程序增加手势支持，也不用再担心click 300ms的延迟了。拥有两个版本，无依赖的独立版和react版本。...

ymyang 2019-08-19 18:24 评论0 收藏0
CSS相关文章

摘要：如何用获取虚拟键盘高度前端早读课月号早读文章由汤谷投稿分享。大杀器和把动画转换成原生动画初来乍到，本文搬运自我月份在知乎发的文章。前端面试之 CSS3 新特性除了 HTML5 的新特性，CSS3 的新特性也是面试中经常被问到的。如何用 js 获取虚拟键盘高度？-前端早读课 9月7号早读文章由@汤谷投稿分享。正文从这开始～这是一个存在很久的历史问题了，对于这样一个具有普遍性的问题...

FrozenMap 2019-08-29 14:21 评论0 收藏0