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

時間 2019-11-05

標籤 omi 官方插件系列 transform 介紹简体版

原文原文鏈接

原文連接 - https://github.com/AlloyTeam/omi/tree/master/tutorialcss

寫在前面

Omi框架正式發佈了omi-transform做爲Omi組件化開發特效運動解決方案，讓你輕鬆在Omi項目裏快速簡便支持CSS3 Transform設置。先說說 transform.js (npm上的名字是 css3transform)。transform.js做爲移動Web特效解決方案，在手Q興趣部落、日跡、QQ羣、QQ附近等項目中普遍使用，以激進的修改DOM屬性爲代價，帶來極爲便利的可編程性。html

你能夠經過http://alloyteam.github.io/AlloyTouch/transformjs/快速瞭解它。react

上面官網的例子都是原聲js的，transformjs也擁有react版本，你也能夠在react中以聲明式的方式使用transformjs：css3

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/git

經過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的耗時仍是頗有必要的。github

下面數據是對比omi-transform和react-transform，兩種方式使用chrome profiles了一把。web

先看總耗時對比：chrome

react-transform：
npm

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>

        `;
    }
    ...

上面的全部例子和代碼能夠在這裏找到。