Introduction to the

Transformjs is widely used in non-React areas, but does the React stack provide transformjS? The answer is yes. Junexie already made a React version.

Animation implementation

Traditional Web animation can be done in two ways:

  1. Transition /animation+ Transform (animate. CSS)
  2. JS + CSS3 transition or animation: this is the same as the first transition, but the JS add class and remove class to add or remove the corresponding animation
  3. Pure JS control timelines: The first and second are built-in timelines that use setInterval/setTimeout/requestAnimationFrame to constantly modify the DOM’s style property to generate animations

Corresponding to react:

Using CSS 3

  • Use ReactCSSTransitionGroup to do this
  • The class of the relevant animation has corresponding state. Modifying state is equivalent to adding or removing the class, which is equivalent to adding or removing the corresponding animation in JS add class and Remove class

Pure JS controls the timeline

  • Still use setInterval/setTimeout/requestAnimationFrame to change a state value and map it to the Component’s style.

It is obvious here that scheme 1 and Scheme 2 can handle simple scenes (no prop change callbacks, etc.), while Scheme 3 is the most programmable and flexible, and can be suitable for complex animation scenes or withstand complex interactive scenes.

The installation

npm install css3transform-reactCopy the code

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>
    );
}Copy the code

By the above statement, You can set or read “translateX”, “translateY”, “translateZ”, “scaleX”, “scaleY”, “scaleZ”, “rotateX”, “rotateY”, “rotateZ”, SkewX, skewY, originX, originY, originZ!

Easy!!!!

Use the pose

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')
);Copy the code

More complex detailed usage code can be seen here: github.com/AlloyTeam/A…

The online demo

Alloyteam. Making. IO/AlloyTouch /…

The performance comparison

Because the React version has a diff process and then applies the diff to DOM process, the state change doesn’t replace the innerHTML completely, so it’s still cheap for browsers to render. However, the diff process takes time with PROFILES in JS. If the time is serious, not running in the Webworker will still be stuck in the UI thread, resulting in lag, interaction delay, etc. So it’s worth taking a look at the CPU time. The main point is that the above demonstration contrasts with the traditional way of manipulating the DOM directly. This is the traditional way:

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

Use Chrome Profiles in two ways. Let’s take a look at the total time comparison:

React:

Traditional way:

  • React takes approximately 1686ms of CPU time in 8739 seconds
  • In the traditional way, the CPU consumption is approximately 700ms in 9254ms seconds

React will definitely be slower without profiles, because the state change needs to go through the React life cycle, but the React time is still within an acceptable range. But we still want to find functions that slow down. So which function is lagging behind in using the TransformJS React version? Expand the Profiles Tree to see:

That’s it.

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

Open the corresponding code to see. It’s written in the comments that this is the focus of optimization.

Get started

Official site: alloyteam. Making. IO/AlloyTouch /…

Github address: github.com/AlloyTeam/A… Any questions and comments are welcome to new Issue to us. AlloyTeam recruit a large number of front-end, have a dream love learning you please send your resume to [email protected].