移動Web利器transformjs入門

簡介

在過去的兩年，愈來愈多的同事、朋友和其餘不認識的童鞋進行移動web開發的時候，都使用了transformjs，全部必要介紹一下，讓更多的人受益，提升編程效率，並享受編程樂趣。（固然transformjs不單單支持移動設備，支持CSS3 3D Transforms的瀏覽器都能正常使用transformjs）

傳送門

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

安裝

npm install css3transform

API

Transform(domElement, [notPerspective]);

經過上面一行代碼的調用，就能夠設置或者讀取 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 = 50;

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

傳統的CSS3編程的問題

之前，咱們通常使用animate.css、zepto/jQuery的animate方法或者tween.js+css3進行交互特效編程。總結下來有三個缺點：

• 不直觀
• 不直接
• 不方便

不直觀

看下面這張圖：

順序影響結果，不直觀。那麼爲何會是這個結果？能夠經過new WebKitCSSMatrix(transform_str)對比最終的matrix。

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

不直接

zepto姿式：

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

translate3d: '0,10px,0'很是不方便，沒法step遞進遞減控制。更別提配合一些運動或者時間的庫來編程了。可能你會反駁'ease-out'不就能夠實現緩動嗎？可是若是我須要讓x和y以及z分別對應不一樣的緩動函數，這種基於字符串編程的形式就費勁了~~
這裏還須要注意的是，zepto裏的順序也會影響結果。由於其最後也是拼成string賦給dom元素。

tween.js姿式

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

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

animate.css姿式:

@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封裝了一大堆關鍵幀動畫，開發者只須要關心添加或者移除相關的動畫的class即可以。這必定程度上給交互特效帶來了極大的遍歷，可是要有硬傷：

• 可編程性不夠高
• 適用於簡單場景
• 沒有change回調，只有end回調

不方便

transform的旋轉點基準點默認是在中心，可是有些是時候，不繫統在中心，咱們傳統的作法是使用transform-origin來設置基準點。

注意，是另外一個屬性transform-origin，而不是transform。可是若是須要運動transform-origin呢？這種設計是否是就廢了？有沒有須要運動origin的場景？這個在遊戲設計中是常常會使用的到，這個之後另外單獨開篇再說，事實就是，有場景是須要運動origin來達到某種效果。

transformjs

基於上面種種不便，因此有了transformjs！

• transformjs做爲騰訊AlloyTeam移動開發利器之一，普遍應用於手Q Web、微信Web相關業務開發
• transformjs專一於CSS3 transform讀取和設置的一個超輕量級js庫，大大提升了CSS3 transform的可編程性
• transformjs高度抽象，不與任什麼時候間、運動框架捆綁，因此能夠和任意時間、和運動框架輕鬆搭配使用
• transformjs使用matrix3d爲最終輸出給dom對象，硬件加速的同時，不失去可編程性
• transformjs擁有超級易用的API，一分鐘輕鬆上手，二分鐘嵌入真實項目實戰
• transformjs擴展了transform自己的能力，讓transform origin更加方便

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