transformjs：讓天下沒有難做的生意！不對，是特效！

【當耐特】發表於2014-09-24
ORMJS特效

寫在前面

transform是css3新增的一個屬性,可是令開發者費解的是，其內部又有大量的屬性如旋轉、縮放、扭曲、平移，這也就導致了獲取或者是設定transform中一個或者多個屬性變得異常麻煩。

transform.js意義

  • 讓前端沒有難做的特效
  • 告別style.xxxTransform= "xxx(xxdeg) xxx(xxx) "
  • 直接element.scaleX=0.5，element.ratation=30.....,更加pure和友好;
  • 自動更新元素的顯示狀態

當然這裡transformjs沒有提供諸如:animate({scaleX:2,ratation:60},500)的方法，開發者可以基於transform.js自行去封裝，transformjs都這麼便利了，結合tween也好，或者利用transition也好，封裝一個animate方法應該非常簡單。說白了，transformjs只負責讓開發者通過簡單的賦值操作，讓dom變化。

5分鐘精通transform.js

這裡是沒有使用任何模組化開發框架，直接暴露在window下的使用程式碼：

var element = document.querySelector("#testTransform");
//只需這一行程式碼
transform.mix(element);
//element就能夠72變
element.rotation++;
element.scaleX = 2;
element.scaleY = 3;

當然還可以設定諸如：x, y, scaleX, scaleY, rotation, skewX, skewY, regX, regY等屬性。

其中x對應translateX、y對應translateY、rotation對應rotateZ，regX和regY相當於設定transform-origin。其餘屬性和transform一致。目前不支援3d

transform.js原理

transformjs依賴 observablejs用於響應屬性改變，自動更新元素顯示狀態。
transformjs依賴 matrix2D用於將元素的transform屬性轉換為2*3的矩陣，然後賦值給dom的style的transform屬性。見核心程式碼：

observer.propertyChangedHandler = function () {
    var mtx = self.element.matrix2D.identity().appendTransform(self.element.x, self.element.y, self.element.scaleX, self.element.scaleY, self.element.rotation, self.element.skewX, self.element.skewY, self.element.regX, self.element.regY);
    self.element.style.transform = self.element.style.msTransform = self.element.style.OTransform = self.element.style.MozTransform = self.element.style.webkitTransform = "matrix(" + [mtx.a, mtx.b, mtx.c, mtx.d, mtx.tx, mtx.ty].join(",") + ")";
}

線上演示

http://kmdjs.github.io/transformjs/

Github

https://github.com/kmdjs/kmdjs

有問題反饋

在使用中有任何問題，歡迎反饋給我，可以用以下聯絡方式跟我交流

  • mail:(kmdjs#qq.com, 把#換成@)
  • qq: 644213943
  • weibo: @當耐特

相關文章