和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);

在線演示地址： http://alloyteam.github.io/AlloyTouch/transformjs/example/soft2.html
上面的代碼很精簡。這里稍微解釋下：

• 元素的初始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();

在線演示地址： http://alloyteam.github.io/AlloyTouch/transformjs/example/soft.html
可以看到上面的workflow里面有一堆work按照start的時間依次序執行，最后在1800ms的時候調用this.start()會回到起點重新開始運行。還需要解釋一下為什么選擇sineInOut的easing。可以來看看其緩動圖像：

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

開始transformjs之旅

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

主頁：http://alloyteam.github.io/AlloyTouch/transformjs/
Github ：https://github.com/AlloyTeam/AlloyTouch/tree/master/transformjs