摘要：寫(xiě)在前面記得以前做過(guò)一款游戲。開(kāi)場(chǎng)動(dòng)畫(huà)是一塊軟體類(lèi)似豆腐的東西一起搖擺。基本的原理主要是循環(huán)運(yùn)動(dòng)抽象的的和來(lái)實(shí)現(xiàn)軟體搖擺。目前來(lái)看也能做到，因?yàn)橐材苓\(yùn)動(dòng)和。可以和任意時(shí)間運(yùn)動(dòng)庫(kù)配合使用。

記得以前facebook做過(guò)一款HTML5游戲。開(kāi)場(chǎng)動(dòng)畫(huà)是一塊軟體類(lèi)似豆腐的東西一起搖擺。類(lèi)似的效果如下面的gif所示：

facebook當(dāng)時(shí)使用的是createjs下的子項(xiàng)目easeljs和tweenjs去制作，基于Canvas的動(dòng)畫(huà)。基本的原理主要是：循環(huán)運(yùn)動(dòng)Canvas抽象的DisplayObject的skewX和scaleY來(lái)實(shí)現(xiàn)軟體搖擺。
目前來(lái)看transformjs也能做到，因?yàn)閠ransformjs也能運(yùn)動(dòng)skewX和scaleY。先來(lái)看看facebook的方式。

注意這里的tweenjs是createjs下的子項(xiàng)目，而不是github上的tween.js項(xiàng)目。

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
上面的代碼很精簡(jiǎn)。這里稍微解釋下：

元素的初始skewX是-20，為了和scale的步調(diào)一致

元素的originY是100，為的以企鵝的bottom center為基準(zhǔn)點(diǎn)

可以看到，由于transformjs高度抽象，可以和tweenjs輕松搭配使用，沒(méi)有任何壓力。

可能上面的代碼不是很明白具體實(shí)現(xiàn)的流程？說(shuō)實(shí)話，第一次看到上面的代碼也沒(méi)有一下看清晰流程。那么就使用AlloyFlow分解工作流的方式去實(shí)現(xiàn)同樣的效果。

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的時(shí)間依次序執(zhí)行，最后在1800ms的時(shí)候調(diào)用this.start()會(huì)回到起點(diǎn)重新開(kāi)始運(yùn)行。還需要解釋一下為什么選擇sineInOut的easing。可以來(lái)看看其緩動(dòng)圖像：

sineInOut速率是先慢后快再慢，剛好符合軟體自身約束作用力的模擬。
那么，AlloyFlow是何方神器？且聽(tīng)下回多帶帶開(kāi)篇分解。

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

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