transformjs:讓天下沒有難做的生意!不對,是特效!


寫在前面

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: @當耐特


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM