-
Notifications
You must be signed in to change notification settings - Fork 526
Powerful transformjs
原文链接: 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当作工具,他提供一些基础的数学能力。
这里需要特别注意,以前的姿势可以继续使用,这里另外三种使用姿势。
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完全当作一个计算工具来用。
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) {
...
...
...
}
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则不会。
用于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.save();
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.save();
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的建议,有了你们中肯建议和意见,才让它变得更好更灵活更强大。