transformjs 污染了 DOM？是你不了解它的強(qiáng)大

SmallBoyO 發(fā)布于2019-08-30 13:17 / 714人閱讀

摘要：的粒子就不再舉例，和用于的例子差不多，相信大家能夠很快搞定。開始使用吧官方網(wǎng)站地址最后，多謝大家對(duì)的建議，有了你們中肯建議和意見，才讓它變得更好更靈活更強(qiáng)大。

原文鏈接：https://github.com/AlloyTeam/AlloyTouch/wiki/Powerful-transformjs

寫在前面

上星期在React微信群里，有小伙伴覺得transformjs直接給DOM添加屬性太激進(jìn)，不可取（由于不在那個(gè)微信群，不明白為什么React會(huì)談到transformjs？！）。關(guān)于這點(diǎn)，其實(shí)在一年半前騰訊內(nèi)部就有相關(guān)聲音，騰訊內(nèi)部的小伙伴建議，不要污染那么多吧~~，給個(gè)總的namespace，如：

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

在騰訊內(nèi)部，還有小伙伴建議，包裹一層把：

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

})

transform.translateY = 100;

總之，就是不要這樣子（transformjs目前的姿勢(shì)）：

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

那么上面這種做法會(huì)有什么問題？

既然JS里提供了動(dòng)態(tài)屬性并監(jiān)聽變更進(jìn)行callback的能力為什么不能用？

違反哪條JS最佳實(shí)踐？

違反哪條Web最佳實(shí)踐？

違反哪條DOM最佳實(shí)踐？

后來，我找到以前提修改意見的騰訊小伙伴，他給了這樣的回答：

如果以后 w3c 需要給DOM元素?cái)U(kuò)展 translateX, translateY, translateZ, scaleX, scaleY, scaleZ, rotateX, rotateY, rotateZ, skewX, skewY, originX, originY, originZ，這就留下了巨大的隱患~~

對(duì)于這點(diǎn)，我認(rèn)為，既然domElment.style.transform已經(jīng)有了，擴(kuò)展translateX, translateY, translateZ, scaleX, scaleY, scaleZ, rotateX, rotateY, rotateZ, skewX, skewY, originX, originY, originZ的可能性幾乎沒有，因?yàn)槠鋵?shí)domElment.style.transform已經(jīng)提供了足夠的靈活性。就算擴(kuò)展了，transformjs打個(gè)補(bǔ)丁包或者prolyfill 一下便可。

然后我又問了一些小伙伴，得到一個(gè)非常有趣的回答：

反正你污染了DOM，反正你污染了DOM，反正你污染了DOM....

....

條條大路通羅馬

transformjs不僅僅可以mix CSS3 transform到DOM元素，還能mix到任意的對(duì)象字面量，也可以把transformjs當(dāng)作工具，他提供一些基礎(chǔ)的數(shù)學(xué)能力。

這里需要特別注意，以前的姿勢(shì)可以繼續(xù)使用，這里另外三種使用姿勢(shì)。

語法1

Transform(obj, [notPerspective]);

如你所見，其他方式都不用變。只是第一個(gè)參數(shù)不僅僅可以傳DOM元素，也可以傳任意對(duì)象字面量等。

不賣關(guān)子，先看使用姿勢(shì)

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元素進(jìn)去，也可以傳對(duì)象字面量。你可以把obj.transform打印出來，上面是選擇了90度，所以它生成出來的matrix是：

perspective(500px) matrix3d(0,1,0,0,-1,0,0,0,0,0,1,0,0,0,0,1)

你同樣也可以關(guān)閉透視投影，如：

var element = document.querySelector("#test"),
    obj = {};
//關(guān)閉透視投影
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)

那么運(yùn)動(dòng)的姿勢(shì)呢？這里配合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);
}

那么如果用傳統(tǒng)的姿勢(shì)是？

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會(huì)去遍歷所以的屬性并且設(shè)置初始值，如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)。
因?yàn)樵趕tart之前，程序其實(shí)已經(jīng)可以完全收集到所有需要to的屬性，去運(yùn)動(dòng)便可以。我們可以自己封裝一個(gè)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去進(jìn)行l(wèi)oop，當(dāng)然可以換成其他方式。現(xiàn)在便可以使用如下方式：

var element = document.querySelector("#test");
Transform(element);
var tween = new Tween(element)
    .to({ translateX: 100, translateY: 100 }, 1000)
    .start();

當(dāng)然這有點(diǎn)跑題了。這里只是對(duì)比直接使用DOM掛載和使用第三方對(duì)象掛載的區(qū)別。第三方掛載有點(diǎn)隔山打牛的感覺。
當(dāng)然..，還沒有完，不僅僅可以上面那個(gè)樣子。那還可以把transformjs完全當(dāng)作一個(gè)計(jì)算工具來用。

語法2

 Transform.getMatrix3D(option)

姿勢(shì)

var matrix3d = Transform.getMatrix3D({
    translateX: 0,
    translateY: 100,
    scaleX:2
});
console.log(matrix3d);

打印出來你將得到下面的值：

你想用這個(gè)值來干什么就干什么吧。看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的工具函數(shù)支持。

姿勢(shì)

var matrix2d = Transform.getMatrix2D({
    translateX: 0,
    translateY: 100,
    scaleX:2
});
console.log(matrix2d);

打印出來你將得到下面的值：

a 水平縮放

b 水平拉伸

c 垂直拉伸

d 垂直縮放

tx 水平位移

ty 垂直位移

那么得到這個(gè)Matrix2D有什么用?

縮放：scale(sx, sy) 等同于 matrix(sx, 0, 0, sy, 0, 0);

平移：translate(tx, ty) 等同于 matrix(1, 0, 0, 1, tx, ty);

旋轉(zhuǎn)：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
    };
    ...
    ...
    ...
}

特別注意事項(xiàng)

Transform.getMatrix2D 和Transform.getMatrix3D都是支持origin特性，請(qǐng)和transform-origin說拜拜
Transform.getMatrix2D 和Transform.getMatrix3D沒有使用傳統(tǒng)的Math.tan去實(shí)現(xiàn)shew，取而代之的是half of rotation

如2d的skew：

Math.cos(skewY), Math.sin(skewY), -Math.sin(skewX), Math.cos(skewX)

以前騰訊IEG的同學(xué)問過為什么使用half of rotation，而不使用Math.tan？
原因很簡單，Math.tan扭曲力度特別大，而且會(huì)有無窮大的值導(dǎo)致扭曲橫跨整個(gè)屏幕。

而half of rotation則不會(huì)。

getMatrix2D有用嗎？

用于Dom Transformation時(shí)候，可以用于兼容不支持CSS3 3D Transforms的瀏覽器

如，我們可以很輕松的把一些transformation屬性轉(zhuǎn)換成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?是的，舉個(gè)例子，在Canvas畫一個(gè)旋轉(zhuǎn)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";

上面是我們傳統(tǒng)的姿勢(shì)。使用Transform.getMatrix2D 之后，變成這個(gè)樣子：

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";

可以看到，這里讓開發(fā)者不用自己去拼湊matrix。SVG的粒子就不再舉例，和用于DOM的例子差不多，相信大家能夠很快搞定。

開始使用吧

官方網(wǎng)站：http://alloyteam.github.io/AlloyTouch/transformjs/

Github地址：https://github.com/AlloyTeam/AlloyTouch/tree/master/transformjs

最后，多謝大家對(duì)transformjs的建議，有了你們中肯建議和意見，才讓它變得更好更靈活更強(qiáng)大。

云服務(wù)器 GPU云服務(wù)器外呼系統(tǒng)阿里云服務(wù)器你了解了嗎 transformjs 它的訪問地址為你不知道

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/115449.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

SmallBoyO

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

騰訊云服務(wù)器2核4G3M+400G數(shù)據(jù)盤的配置到底怎么樣?

閱讀 3533·2021-11-18 13:22
RAKsmart：九月秒殺服務(wù)器$30/月起,洛杉磯/圣何塞/香港/日本站群特價(jià),全場VPS五折

閱讀 2547·2021-09-23 11:53
transformjs 污染了 DOM？是你不了解它的強(qiáng)大

閱讀 715·2019-08-30 13:17
sass筆記-3|Sass基礎(chǔ)語法之樣式復(fù)用和保持簡潔

閱讀 1339·2019-08-30 13:12
JS基礎(chǔ)入門篇（二十四）—DOM（下）

閱讀 891·2019-08-29 15:43
第一個(gè)小程序作品，第一個(gè)開源作品

閱讀 1091·2019-08-29 12:53
FE.BASE-前端設(shè)計(jì)模式、編碼與重構(gòu)筆記

閱讀 2826·2019-08-26 18:27
javascript函數(shù)防抖

閱讀 1494·2019-08-26 11:52

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

transformjs 污染了 DOM？是你不了解它的強(qiáng)大

相關(guān)文章