transformjs污染了DOM?是你不了解它的强大

2022-10-01 11:47:31

原文链接: 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的建议，有了你们中肯建议和意见，才让它变得更好更灵活更强大。

码农公寓

写在前面

条条大路通罗马

语法1

语法2

姿势

语法3

姿势

特别注意事项

getMatrix2D有用吗？

开始使用吧

相关文章