TAT.dnt react 动画难写?试试 react 版 transformjs
In Web开发 on 2016年12月20日 by view: 2,144
1

简介

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 / 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 可编程性最大,最灵活,可以适合复杂的动画场景或者承受复杂的交互场景。

安装

API

通过上面的声明,就可以设置或者读取"translateX", "translateY", "translateZ", "scaleX", "scaleY", "scaleZ", "rotateX", "rotateY", "rotateZ", "skewX", "skewY", "originX", "originY", "originZ"!

方便吧!

使用姿势

更加复杂的详细的使用代码可以看这里: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 的方式对比。就是下面这种传统的方式:

对两种方式使用 chrome profiles 了一把。
先看总耗时对比

react:

传统方式:

  • react 在 8739 秒内 CPU 耗时花费了近似 1686ms
  • 传统方式在 9254ms 秒内 CPU 耗时花费近似 700ms

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

就是它了。

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

开始使用吧

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

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


原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2016/12/react-animations-difficult-to-write-try-react-transformjs/

  1. 浅笑 2016 年 12 月 20 日

发表评论