transformjs 污染了 DOM? 是你不了解它的强大 | 掘金技术征文

时间  2019-11-21
标签 transformjs 污染 dom 不了解 强大 技术 征文 栏目 HTML 繁體版
原文   原文链接

原文连接: github.com/AlloyTeam/A…javascript

写在前面

上星期在React微信群里，有小伙伴以为transformjs直接给DOM添加属性太激进，不可取（因为不在那个微信群，不明白为何React会谈到transformjs？！）。关于这点，其实在一年半前腾讯内部就有相关声音，腾讯内部的小伙伴建议，不要污染那么多吧~~，给个总的namespace，如：java

var element = document.querySelector("#test");
Transform(element);
element.transform.scaleX =2;
element.transform.translateX = 100;
element.transform.rotateX = 30;复制代码

在腾讯内部，还有小伙伴建议，包裹一层把：git

var transform = new Transform( dom, {
    scaleX: 1,
    skewY:30,
    translateY:200

})

transform.translateY = 100;复制代码

总之，就是不要这样子（transformjs目前的姿式）：github

var element1= document.querySelector("#test");
Transform(element);
element.rotateZ = 45;复制代码

那么上面这种作法会有什么问题？web

  • 既然JS里提供了动态属性并监听变动进行callback的能力为何不能用？
  • 违反哪条JS最佳实践？
  • 违反哪条Web最佳实践？
  • 违反哪条DOM最佳实践？

后来，我找到之前提修改意见的腾讯小伙伴，他给了这样的回答：canvas

若是之后 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，反正你污染了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的例子差很少，相信你们可以很快搞定。

开始使用吧

最后，多谢你们对transformjs的建议，有了大家中肯建议和意见，才让它变得更好更灵活更强大。

掘金技术征文: gold.xitu.io/post/58522d…

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程