當耐特

原文鏈接 - 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)