摘要：更別提配合一些運(yùn)動(dòng)或者時(shí)間的庫(kù)來(lái)編程了。姿勢(shì)封裝了一大堆關(guān)鍵幀動(dòng)畫，開發(fā)者只需要關(guān)心添加或者移除相關(guān)的動(dòng)畫的便可以。

在過(guò)去的兩年，越來(lái)越多的同事、朋友和其他不認(rèn)識(shí)的童鞋進(jìn)行移動(dòng)web開發(fā)的時(shí)候，都使用了transformjs，所有必要介紹一下，讓更多的人受益，提高編程效率，并享受編程樂(lè)趣。（當(dāng)然transformjs不僅僅支持移動(dòng)設(shè)備，支持CSS3 3D Transforms的瀏覽器都能正常使用transformjs）

官方網(wǎng)站：http://alloyteam.github.io/AlloyTouch/transformjs/
Github地址：https://github.com/AlloyTeam/AlloyTouch/tree/master/transformjs

npm install css3transform

Transform(domElement, [notPerspective]);

通過(guò)上面一行代碼的調(diào)用，就可以設(shè)置或者讀取 domElement的"translateX", "translateY", "translateZ", "scaleX", "scaleY", "scaleZ", "rotateX", "rotateY", "rotateZ", "skewX", "skewY", "originX", "originY", "originZ"！

方便吧！

Transform(domElement);//or Transform(domElement, true);

//set "translateX", "translateY", "translateZ", "scaleX", "scaleY", "scaleZ", "rotateX", "rotateY", "rotateZ", "skewX", "skewY", "originX", "originY", "originZ"
domElement.translateX = 100;
domElement.scaleX = 0.5;
domElement.originX = 0.5;

//get "translateX", "translateY", "translateZ", "scaleX", "scaleY", "scaleZ", "rotateX", "rotateY", "rotateZ", "skewX", "skewY", "originX", "originY", "originZ"
console.log(domElement.translateX )

以前，我們一般使用animate.css、zepto/jQuery的animate方法或者tween.js+css3進(jìn)行交互特效編程?？偨Y(jié)下來(lái)有三個(gè)缺點(diǎn)：

不直觀

不直接

不方便

看下面這張圖：

順序影響結(jié)果，不直觀。那么為什么會(huì)是這個(gè)結(jié)果？可以通過(guò)new WebKitCSSMatrix(transform_str)對(duì)比最終的matrix。

這也直接說(shuō)明了矩陣不符合交換律。AB!=BA

zepto姿勢(shì)：

$("#some_element").animate({
  opacity: 0.25, left: "50px",
  color: "#abcdef",
  rotateZ: "45deg", translate3d: "0,10px,0"
}, 500, "ease-out")

translate3d: "0,10px,0"非常不方便，無(wú)法step遞進(jìn)遞減控制。更別提配合一些運(yùn)動(dòng)或者時(shí)間的庫(kù)來(lái)編程了?？赡苣銜?huì)反駁"ease-out"不就可以實(shí)現(xiàn)緩動(dòng)嗎？但是如果我需要讓x和y以及z分別對(duì)應(yīng)不同的緩動(dòng)函數(shù)，這種基于字符串編程的形式就費(fèi)勁了~~
這里還需要注意的是，zepto里的順序也會(huì)影響結(jié)果。因?yàn)槠渥詈笠彩瞧闯蓅tring賦給dom元素。

tween.js姿勢(shì)

var position = { x: 100, y: 100, rotation: 0 },
    target = document.getElementById("target");

    new TWEEN.Tween(position)
    .to({ x: 700, y: 200, rotation: 359 }, 2000)
    .delay(1000)
    .easing(TWEEN.Easing.Elastic.InOut)
    .onUpdate(function update() {
        var t_str= "translateX(" + position.x + "px) translateY(" + position.y + "px) rotate(" + Math.floor(position.rotation) + "deg)";
        element.style.transform = element.style.msTransform = element.style.OTransform = element.style.MozTransform = element.style.webkitTransform = t_str;
    });

使用字符串的方式，看著就心累。更別提寫的過(guò)程要遭受多少折磨。

animate.css姿勢(shì):

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

animate.css封裝了一大堆關(guān)鍵幀動(dòng)畫，開發(fā)者只需要關(guān)心添加或者移除相關(guān)的動(dòng)畫的class便可以。這一定程度上給交互特效帶來(lái)了極大的遍歷，但是要有硬傷：

可編程性不夠高

適用于簡(jiǎn)單場(chǎng)景

沒(méi)有change回調(diào)，只有end回調(diào)

transform的旋轉(zhuǎn)點(diǎn)基準(zhǔn)點(diǎn)默認(rèn)是在中心，但是有些是時(shí)候，不系統(tǒng)在中心，我們傳統(tǒng)的做法是使用transform-origin來(lái)設(shè)置基準(zhǔn)點(diǎn)。

注意，是另一個(gè)屬性transform-origin，而不是transform。但是如果需要運(yùn)動(dòng)transform-origin呢？這種設(shè)計(jì)是不是就廢了？有沒(méi)有需要運(yùn)動(dòng)origin的場(chǎng)景？這個(gè)在游戲設(shè)計(jì)中是經(jīng)常會(huì)使用的到，這個(gè)以后另外多帶帶開篇再說(shuō)，事實(shí)就是，有場(chǎng)景是需要運(yùn)動(dòng)origin來(lái)達(dá)到某種效果。

基于上面種種不便，所以有了transformjs！

transformjs作為騰訊AlloyTeam移動(dòng)開發(fā)利器之一，廣泛應(yīng)用于手Q Web、微信Web相關(guān)業(yè)務(wù)開發(fā)

transformjs專注于CSS3 transform讀取和設(shè)置的一個(gè)超輕量級(jí)js庫(kù)，大大提高了CSS3 transform的可編程性

transformjs高度抽象，不與任何時(shí)間、運(yùn)動(dòng)框架捆綁，所以可以和任意時(shí)間、和運(yùn)動(dòng)框架輕松搭配使用

transformjs使用matrix3d為最終輸出給dom對(duì)象，硬件加速的同時(shí)，不失去可編程性

transformjs擁有超級(jí)易用的API，一分鐘輕松上手，二分鐘嵌入真實(shí)項(xiàng)目實(shí)戰(zhàn)

transformjs擴(kuò)展了transform本身的能力，讓transform origin更加方便

開始使用吧：
官方網(wǎng)站：http://alloyteam.github.io/AlloyTouch/transformjs/
Github地址：https://github.com/AlloyTeam/AlloyTouch/tree/master/transformjs