react动画难写?试试react版transformjs

发布时间:2016-12-31 7:35:12编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"react动画难写?试试react版transformjs ",主要涉及到react动画难写?试试react版transformjs 方面的内容,对于react动画难写?试试react版transformjs 感兴趣的同学可以参考一下。

简介

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

安装

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'));

更加复杂的详细的使用代码可以看这里: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() {