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

時間 2019-11-30

標籤 transformjs 天下沒有生意不對特效简体版

原文原文鏈接

寫在前面

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

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變化。css

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等屬性。java

其中x對應translateX、y對應translateY、rotation對應rotateZ，regX和regY至關於設置transform-origin。其他屬性和transform一致。目前不支持3dcss3

transform.js原理

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

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(",") + ")";
}