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

来源:http://www.cnblogs.com/iamzhanglei/archive/2016/12/26/6221202.html
-Advertisement-
Play Games

原文鏈接: https://github.com/AlloyTeam/AlloyTouch/wiki/Powerful transformjs 寫在前面 上星期在React微信群里，有小伙伴覺得transformjs直接給DOM添加屬性太激進，不可取（由於不在那個微信群，不明白為什麼React會談到 ...


原文鏈接: 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的例子差不多，相信大家能夠很快搞定。

開始使用吧

最後，多謝大家對transformjs的建議，有了你們中肯建議和意見，才讓它變得更好更靈活更強大。



您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 微服務架構設計
    微服務 軟體架構是一個包含各種組織的系統組織，這些組件包括 Web伺服器, 應用伺服器, 資料庫,存儲, 通訊層), 它們彼此或和環境存在關係。系統架構的目標是解決利益相關者的關註點。 Conway’s law: Organizations which design systems[...] are... ...
  • 解決motools和jquery之間的衝突
    在同一個頁面需要同時使用motools和jquery，對於$，發生了衝突，以下是解決的辦法。 ...
  • Javascript高性能編程-提高數據訪問速度
    hasOwnProperty()僅檢索實例不檢索原型，in即檢索實例，又檢索原型 成員嵌套越深，訪問速度越慢，只在必要的情況下使用對象成員。 如果在同一個函數中你要多次讀取同一個對象屬性，最好將它存入一個局部變數。以局部變 量替代屬性，避免多餘的屬性查找帶來性能開銷。 如果在同一個函數中你要多次讀取 ...
  • Javascript高性能編程-提高javascript載入速度
    1、將所有<script>標簽放在儘可能接近<body>標簽底部的位置，以保證頁面在腳本運行之前完成解析儘量減少對整個頁面下載的影響 2、限制頁面的<script>總數也可以改善性能。每當頁面解析碰到一個<script>標簽時， 緊接著有一段時間用於代碼執 行。最小化這些延遲時間可以改善頁面的整體性 ...
  • 微信小程式
    最近在看微信小程式邊看邊寫demo，整體目錄結構是一：app.js，app.json，app.wxss這三個文件必須是放在根目錄下，二、一個小程式有多個頁面組成，其中每個頁面的結構是：page.js，page.json，page.wxml，page.wxss。 這些文件尾碼名都是微信小程式特定的，其 ...
  • javascript 表單
    在HTML中，表單是由<form>元素來組成的。在js中，表單對應的則是HTMLFormElement類型。它和其他HTML元素一樣具有相同的預設屬性。下麵是HTMLFormElement獨有的屬性和方法： acceptCharset:伺服器能夠處理的字元集，等價於HTML的accept-chars ...
  • js—模糊查詢
    首先要明白什麼是模糊查詢（廢話又來了），就是根據關鍵字把列表中符合關鍵字的一項或某項羅列出來，也就是要檢查列表的每一項中是否含有關鍵字，因此抽象一下就是一個字元串中是否含有某個字元或者字元串。 以下例子沒有接觸到後臺數據的知識，只是查詢當前表格中每一行所包含的關鍵字。 用到的方法為：string.i ...
  • 如何在Node.js中合併兩個複雜對象
    通常情況下，在Node.js中我們可以通過underscore的extend或者lodash的merge來合併兩個對象，但是對於像下麵這種複雜的對象，要如何來應對呢？ 例如我有以下兩個object： 希望合併之後的結果輸出成下麵這樣： 通過underscore或者lodash現有的方法我們無法實現上 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類