Omi官方插件系列 - omi-transform介绍

原文连接 - https://github.com/AlloyTeam/omi/tree/master/tutorial

写在前面

Omi框架正式发布了omi-transform做为Omi组件化开发特效运动解决方案，让你轻松在Omi项目里快速简便支持CSS3 Transform设置。先说说 transform.js (npm上的名字是 css3transform)。transform.js做为移动Web特效解决方案，在手Q兴趣部落、日迹、QQ群、QQ附近等项目中普遍使用，以激进的修改DOM属性为代价，带来极为便利的可编程性。

你能够经过http://alloyteam.github.io/AlloyTouch/transformjs/快速了解它。

上面官网的例子都是原声js的，transformjs也拥有react版本，你也能够在react中以声明式的方式使用transformjs：

render() {
    return (
        <Transform
          translateX={100}
          scaleX={0.5}
          originX={0.5}>
          <div>sth</div>
        </Transform>
    );
}

3分钟掌握omi-transform

演示

http://alloyteam.github.io/omi/plugins/omi-transform/example/simple/

经过npm安装

npm install omi-transform

使用

import Omi from 'omi';
import OmiTransform from '../../omi-transform.js';

OmiTransform.init();

class App extends Omi.Component {
    constructor(data) {
        super(data);
    }

    installed(){
        setInterval(function(){
            this.refs.test.rotateZ += 0.1;
        }.bind(this));
    }

    render() {
        return  `
            <div omi-transform class="test" ref="test" rotateZ="45" translateX="100" perspective="400">
                omi-transform
            </div>

        `;
    }
}

Omi.render(new App(),"#container");

• 在须要使用transformjs的DOM上标记 omi-transform 和 ref="xxx"
• 在组件函数里即可以使用 this.refs.xxx 来读取或者设置 css transform属性
• this.refs.xxx 支持 "translateX", "translateY", "translateZ", "scaleX", "scaleY", "scaleZ", "rotateX", "rotateY", "rotateZ", "skewX", "skewY", "originX", "originY", "originZ", "perspective"这些属性设置和读取
• 没有标记perspective的话代码没有透视投影

性能对比

由于react版本会有diff过程，而后apply diff to dom的过程，state改变不会整个innerHTML所有替换，因此对浏览器渲染来讲仍是很便宜，可是在js里diff的过程的耗时仍是须要去profiles一把，若是耗时严重，不在webworker里跑仍是会卡住UI线程致使卡顿，交互延缓等。因此要看一看CPU的耗时仍是颇有必要的。

下面数据是对比omi-transform和react-transform，两种方式使用chrome profiles了一把。

先看总耗时对比：

react-transform：

omi-transform：

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

在不进行profiles就能想象到react是必定会更慢一些，由于state的改变要走把react生命周期走一遍，可是能够看到react的耗时仍是在能够接受的范围，没有慢到难以接受。

而Omi的方式则和传统的原生js的耗时如出一辙。觉得运动过程不进行DOMI Diff!!

慢着？不进行Diff？意思就是组件不进行update？
意思就是万一组件update，全部运动的状态都会丢失？Omi怎么解决这个问题？

状态保存

组件里的某个DOM在运动过程当中，可能会因为其余逻辑，进行update。有多是用户交互，有多是数据返回的回调。因此，update先后，DOM的状态的保留显得尤为重要，否则的话就会有闪烁、跳跃的效果或者其余显示逻辑错误。

...
    constructor(data) {
        super(data);
        //初始状态
        this.rotateZ  = 45;
    }

    installed(){
        setInterval(() =>{
            //sync for update 记录同步到this.rotateZ
            this.rotateZ = this.refs.test.rotateZ += 0.1;
        });
    }

    render() {
        //经过 ${this.rotateZ} 设置rotateZ
        return  `
            <div omi-transform class="test" ref="test" rotateZ="${this.rotateZ}" translateX="100" perspective="400" >
                omi-transform
            </div>

        `;
    }
    ...

上面的全部例子和代码能够在这里找到。

Omi相关

• Omi官网omijs.org
• Omi的Github地址https://github.com/AlloyTeam/omi
• 若是想体验一下Omi框架，能够访问 Omi Playground
• 若是想使用Omi框架或者开发完善Omi框架，能够访问 Omi使用文档
• 若是你想得到更佳的阅读体验，能够访问 Docs Website
• 若是你懒得搭建项目脚手架，能够试试 omi-cli
• 若是你有Omi相关的问题能够 New issue
• 若是想更加方便的交流关于Omi的一切能够加入QQ的Omi交流群(256426170)