和 transformjs 一塊兒搖擺

寫在前面

記得之前facebook作過一款HTML5遊戲。開場動畫是一塊軟體相似豆腐的東西一塊兒搖擺。相似的效果以下面的gif所示：

facebook當時使用的是createjs下的子項目easeljs和tweenjs去製做，基於Canvas的動畫。基本的原理主要是：循環運動Canvas抽象的DisplayObject的skewX和scaleY來實現軟體搖擺。
目前來看transformjs也能作到，由於transformjs也能運動skewX和scaleY。先來看看facebook的方式。

tweenjs + transformjs

注意這裏的tweenjs是createjs下的子項目，而不是github上的tween.js項目。

var element = document.querySelector("#test");
Transform(element);
element.originY = 100;
element.skewX = -20;

var Tween = createjs.Tween,
    sineInOutEase = createjs.Ease.sineInOut;
Tween.get(element, {loop: true}).to({scaleY: .8}, 450, sineInOutEase).to({scaleY: 1}, 450, sineInOutEase);
Tween.get(element, {loop: true}).to({skewX: 20}, 900, sineInOutEase).to({skewX: -20}, 900, sineInOutEase);複製代碼

在線演示地址： alloyteam.github.io/AlloyTouch/…
上面的代碼很精簡。這裏稍微解釋下：

• 元素的初始skewX是-20，爲了和scale的步調一致
• 元素的originY是100，爲的以企鵝的bottom center爲基準點

能夠看到，因爲transformjs高度抽象，能夠和tweenjs輕鬆搭配使用，沒有任何壓力。

AlloyFlow + transformjs

可能上面的代碼不是很明白具體實現的流程？說實話，第一次看到上面的代碼也沒有一下看清晰流程。那麼就使用AlloyFlow分解工做流的方式去實現一樣的效果。

var element = document.querySelector("#test");
Transform(element);
element.originY = 100;
element.skewX = -20;

function sineInOut(a) {
    return 0.5 * (1 - Math.cos(Math.PI * a));
}

var alloyFlow = new AlloyFlow({
    workflow: [
        {
            work: function () {
                To.go(element, "scaleY", .8, 450, sineInOut);
                To.go(element, "skewX", 20, 900, sineInOut)
            },
            start: 0
        }, {
            work: function () {
                To.go(element, "scaleY", 1, 450, sineInOut)
            },
            start: 450
        }, {
            work: function () {
                To.go(element, "scaleY", .8, 450, sineInOut);
                To.go(element, "skewX", -20, 900, sineInOut)
            },
            start: 900
        }, {
            work: function () {
                To.go(element, "scaleY", 1, 450, sineInOut);
            },
            start: 1350
        }, {
            work: function () {
                this.start();
            },
            start: 1800
        }
    ]
}).start();複製代碼

在線演示地址： alloyteam.github.io/AlloyTouch/…
能夠看到上面的workflow裏面有一堆work按照start的時間依次序執行，最後在1800ms的時候調用this.start()會回到起點從新開始運行。還須要解釋一下爲何選擇sineInOut的easing。能夠來看看其緩動圖像：

sineInOut速率是先慢後快再慢，恰好符合軟體自身約束做用力的模擬。
那麼，AlloyFlow是何方神器？且聽下回單獨開篇分解。

開始transformjs之旅

有不少童鞋問，transformjs還能作什麼酷炫特效？怎麼在官網看到的都是簡單的效果？
其實transformjs他只是提供了基礎的transformation能力，不與時間、和運動庫耦合。能夠和任意時間運動庫配合使用。因此怎麼酷炫徹底靠你們創意和想象力，搭配transformjs使用就對了。
transformjs會計算出matrix3d賦給dom的 transform msTransform OTransform MozTransform webkitTransform，保證硬件加速和兼容性的同時，不丟失可編程性，點個贊....

主頁：alloyteam.github.io/AlloyTouch/…
Github ：github.com/AlloyTeam/A…