原文連結: https://github.com/AlloyTeam/AlloyTouch/wiki/Powerful-transformjs
寫在前面
上星期在React微信群裡，有小夥伴覺得transformjs直接給DOM新增屬性太激進，不可取（由於不在那個微信群，不明白為什麼React會談到transformjs？！）。關於這點，其實在一年半前騰訊內部就有相關聲音，騰訊內部的小夥伴建議，不要汙染那麼多吧~~，給個總的namespace，如：
var element = document.querySelector("#test");
Transform(element);
element.transform.scaleX =2;
element.transform.translateX = 100;
element.transform.rotateX = 30;在騰訊內部，還有小夥伴建議，包裹一層把：
var transform = new Transform( dom, {
scaleX: 1,
skewY:30,
translateY:200
})
transform.translateY = 100;總之，就是不要這樣子（transformjs目前的姿勢）：
var element1= document.querySelector("#test");
Transform(element);
element.rotateZ = 45;那麼上面這種做法會有什麼問題？
- 既然JS裡提供了動態屬性並監聽變更進行callback的能力為什麼不能用？
- 違反哪條JS最佳實踐？
- 違反哪條Web最佳實踐？
- 違反哪條DOM最佳實踐？
後來，我找到以前提修改意見的騰訊小夥伴，他給了這樣的回答：
如果以後 w3c 需要給DOM元素擴充套件 translateX, translateY, translateZ, scaleX, scaleY, scaleZ, rotateX, rotateY, rotateZ, skewX, skewY, originX, originY, originZ，這就留下了巨大的隱患~~
對於這點，我認為，既然domElment.style.transform已經有了，擴充套件translateX, translateY, translateZ, scaleX, scaleY, scaleZ, rotateX, rotateY, rotateZ, skewX, skewY, originX, originY, originZ的可能性幾乎沒有，因為其實domElment.style.transform已經提供了足夠的靈活性。就算擴充套件了，transformjs打個補丁包或者prolyfill 一下便可。
然後我又問了一些小夥伴，得到一個非常有趣的回答：
反正你汙染了DOM，反正你汙染了DOM，反正你汙染了DOM....
....
條條大路通羅馬
transformjs不僅僅可以mix CSS3 transform到DOM元素，還能mix到任意的物件字面量，也可以把transformjs當作工具，他提供一些基礎的數學能力。
這裡需要特別注意，以前的姿勢可以繼續使用，這裡另外三種使用姿勢。
語法1
Transform(obj, [notPerspective]);如你所見，其他方式都不用變。只是第一個引數不僅僅可以傳DOM元素，也可以傳任意物件字面量等。
不賣關子，先看使用姿勢
var element = document.querySelector("#test"),
obj = {};
Transform(obj);
obj.rotateZ = 90;
element.style.transform = element.style.msTransform = element.style.OTransform = element.style.MozTransform = element.style.webkitTransform = obj.transform;看到了沒有，你不僅可以傳DOM元素進去，也可以傳物件字面量。你可以把obj.transform列印出來，上面是選擇了90度，所以它生成出來的matrix是：
perspective(500px) matrix3d(0,1,0,0,-1,0,0,0,0,0,1,0,0,0,0,1)你同樣也可以關閉透視投影，如：
var element = document.querySelector("#test"),
obj = {};
//關閉透視投影
Transform(obj, true);
obj.rotateZ = 90;
element.style.transform = element.style.msTransform = element.style.OTransform = element.style.MozTransform = element.style.webkitTransform = obj.transform;生成出來的matrix是：
matrix3d(0,1,0,0,-1,0,0,0,0,0,1,0,0,0,0,1)那麼運動的姿勢呢？這裡配合tween.js的示例如下：
var element = document.querySelector("#test"),
obj = { translateX: 0, translateY: 0 };
Transform(obj);
var tween = new TWEEN.Tween(obj)
.to({ translateX: 100, translateY: 100 }, 1000)
.onUpdate(function () {
element.style.transform = element.style.msTransform = element.style.OTransform = element.style.MozTransform = element.style.webkitTransform = obj.transform;
})
.start();
requestAnimationFrame(animate);
function animate(time) {
requestAnimationFrame(animate);
TWEEN.update(time);
}那麼如果用傳統的姿勢是？
var element = document.querySelector("#test");
Transform(element);
var tween = new TWEEN.Tween({ translateX: element.translateX, translateY: element.translateY })
.to({ translateX: 100, translateY: 100 }, 1000)
.onUpdate(function () {
element.translateX = this.translateX
element.translateY = this.translateY
})
.start();
requestAnimationFrame(animate);
function animate(time) {
requestAnimationFrame(animate);
TWEEN.update(time);
}這裡由於 TWEEN.Tween會去遍歷所以的屬性並且設定初始值，如tween裡面的程式碼：
// Set all starting values present on the target object
for (var field in object) {
_valuesStart[field] = parseFloat(object[field], 10);
}所以不能直接把 new TWEEN.Tween(element)。
因為在start之前，程式其實已經可以完全收集到所有需要to的屬性，去運動便可以。我們可以自己封裝一個tween去支援這種簡便的方式。如：
var Tween = function (obj) {
this.obj = obj;
return this;
}
Tween.prototype = {
to: function (targets, duration, easing) {
this.duration = duration;
this.targets = targets;
return this;
},
start: function () {
this.startTime = new Date();
this._beginTick();
},
_beginTick: function () {
var _startValues = {},
targets = this.targets;
for (var key in targets) {
if (targets.hasOwnProperty(key)) {
_startValues[key] = this.obj[key];
}
}
var self = this;
this._interval = setInterval(function () {
var dt = new Date() - self.startTime;
for (var key in targets) {
if (targets.hasOwnProperty(key)) {
if (dt >= self.duration) {
clearInterval(self._interval);
} else {
var p = dt / self.duration;
var dv = targets[key] - self.obj[key];
self.obj[key] += dv * p;
}
}
}
}, 15)
}
}這裡為了簡便使用setInterval去進行loop，當然可以換成其他方式。現在便可以使用如下方式：
var element = document.querySelector("#test");
Transform(element);
var tween = new Tween(element)
.to({ translateX: 100, translateY: 100 }, 1000)
.start();當然這有點跑題了。這裡只是對比直接使用DOM掛載和使用第三方物件掛載的區別。第三方掛載有點隔山打牛的感覺。
當然..，還沒有完，不僅僅可以上面那個樣子。那還可以把transformjs完全當作一個計算工具來用。
語法2
Transform.getMatrix3D(option)姿勢
var matrix3d = Transform.getMatrix3D({
translateX: 0,
translateY: 100,
scaleX:2
});
console.log(matrix3d);列印出來你將得到下面的值：
你想用這個值來幹什麼就幹什麼吧。看transformjs原始碼可以得到 Transform.getMatrix3D一共支援的屬性：
Transform.getMatrix3D = function (option) {
var defaultOption = {
translateX: 0,
translateY: 0,
translateZ: 0,
rotateX: 0,
rotateY: 0,
rotateZ: 0,
skewX: 0,
skewY: 0,
originX: 0,
originY: 0,
originZ: 0,
scaleX: 1,
scaleY: 1,
scaleZ: 1
};
for (var key in option) {
...
...
...
}語法3
Transform.getMatrix2D(option)不僅僅是3D matrix， transformjs也提供了2D的工具函式支援。
姿勢
var matrix2d = Transform.getMatrix2D({
translateX: 0,
translateY: 100,
scaleX:2
});
console.log(matrix2d);列印出來你將得到下面的值：
- a 水平縮放
- b 水平拉伸
- c 垂直拉伸
- d 垂直縮放
- tx 水平位移
- ty 垂直位移
那麼得到這個Matrix2D有什麼用?
- 縮放：scale(sx, sy) 等同於 matrix(sx, 0, 0, sy, 0, 0);
- 平移：translate(tx, ty) 等同於 matrix(1, 0, 0, 1, tx, ty);
- 旋轉：rotate(deg) 等同於 matrix(cos(deg), sin(deg), -sin(deg), cos(deg), 0, 0);
- 拉伸：skew(degx, degy) 等同於 matrix(1, tan(degy), tan(degx), 1, 0, 0);
看transformjs原始碼可以得到 Transform.getMatrix2D一共支援的屬性：
Transform.getMatrix2D = function(option){
var defaultOption = {
translateX: 0,
translateY: 0,
rotation: 0,
skewX: 0,
skewY: 0,
originX: 0,
originY: 0,
scaleX: 1,
scaleY: 1
};
...
...
...
}特別注意事項
Transform.getMatrix2D 和Transform.getMatrix3D都是支援origin特性，請和transform-origin說拜拜
Transform.getMatrix2D 和Transform.getMatrix3D沒有使用傳統的Math.tan去實現shew，取而代之的是half of rotation
如2d的skew：
Math.cos(skewY), Math.sin(skewY), -Math.sin(skewX), Math.cos(skewX)以前騰訊IEG的同學問過為什麼使用half of rotation，而不使用Math.tan？
原因很簡單，Math.tan扭曲力度特別大，而且會有無窮大的值導致扭曲橫跨整個螢幕。
而half of rotation則不會。
getMatrix2D有用嗎？
用於Dom Transformation時候，可以用於相容不支援CSS3 3D Transforms的瀏覽器
如，我們可以很輕鬆的把一些transformation屬性轉換成CSS3屬性賦給DOM:
var matrix = Transform.getMatrix2D({
rotation: 30,
scaleX: 0.5,
scaleY: 0.5,
translateX: 100
});
ele.style.transform = ele.style.msTransform = ele.style.OTransform = ele.style.MozTransform = ele.style.webkitTransform = "matrix(" + [matrix.a, matrix.b, matrix.c, matrix.d, matrix.tx, matrix.ty].join(",") + ")";用於Canvas和SVG Transformation
什麼？還能用於Canvas和SVG?是的，舉個例子，在Canvas畫一個旋轉30度、縮小成0.5倍，並且平移（200,200）的圖片：
var canvas = document.getElementById("ourCanvas"),
ctx = canvas.getContext("2d"),
img = new Image(),
rotation = 30 * Math.PI / 180;
img.onload = function () {
ctx.sava();
ctx.setTransform(
0.5 * Math.cos(rotation), 0.5 * Math.sin(rotation),
-0.5 * Math.sin(rotation), 0.5 * Math.cos(rotation),
200, 200
);
ctx.drawImage(img, 0, 0);
ctx.restore();
};
img.src = "asset/img/test.png";上面是我們傳統的姿勢。使用Transform.getMatrix2D 之後，變成這個樣子：
var canvas = document.getElementById("ourCanvas"),
ctx = canvas.getContext("2d"),
img = new Image();
var matrix = Transform.getMatrix2D({
rotation: 30,
scaleX: 0.5,
scaleY: 0.5,
translateX: 200,
translateY: 200
});
img.onload = function () {
ctx.sava();
ctx.setTransform(matrix.a, matrix.b, matrix.c, matrix.d, matrix.tx, matrix.ty);
ctx.drawImage(img, 0, 0);
ctx.restore();
};
img.src = "asset/img/test.png";可以看到，這裡讓開發者不用自己去拼湊matrix。SVG的粒子就不再舉例，和用於DOM的例子差不多，相信大家能夠很快搞定。
開始使用吧
- 官方網站：http://alloyteam.github.io/AlloyTouch/transformjs/
- Github地址：https://github.com/AlloyTeam/AlloyTouch/tree/master/transformjs
最後，多謝大家對transformjs的建議，有了你們中肯建議和意見，才讓它變得更好更靈活更強大。