移動Web利器transformjs入門

keithxiaoy 發布于2019-08-20 12:33 / 3069人閱讀

摘要：更別提配合一些運動或者時間的庫來編程了。姿勢封裝了一大堆關鍵幀動畫，開發者只需要關心添加或者移除相關的動畫的便可以。

簡介

在過去的兩年，越來越多的同事、朋友和其他不認識的童鞋進行移動web開發的時候，都使用了transformjs，所有必要介紹一下，讓更多的人受益，提高編程效率，并享受編程樂趣。（當然transformjs不僅僅支持移動設備，支持CSS3 3D Transforms的瀏覽器都能正常使用transformjs）

傳送門

官方網站：http://alloyteam.github.io/AlloyTouch/transformjs/
Github地址：https://github.com/AlloyTeam/AlloyTouch/tree/master/transformjs

安裝

npm install css3transform

API

Transform(domElement, [notPerspective]);

通過上面一行代碼的調用，就可以設置或者讀取 domElement的"translateX", "translateY", "translateZ", "scaleX", "scaleY", "scaleZ", "rotateX", "rotateY", "rotateZ", "skewX", "skewY", "originX", "originY", "originZ"！

方便吧！

使用姿勢

Transform(domElement);//or Transform(domElement, true);

//set "translateX", "translateY", "translateZ", "scaleX", "scaleY", "scaleZ", "rotateX", "rotateY", "rotateZ", "skewX", "skewY", "originX", "originY", "originZ"
domElement.translateX = 100;
domElement.scaleX = 0.5;
domElement.originX = 0.5;

//get "translateX", "translateY", "translateZ", "scaleX", "scaleY", "scaleZ", "rotateX", "rotateY", "rotateZ", "skewX", "skewY", "originX", "originY", "originZ"
console.log(domElement.translateX )

傳統的CSS3編程的問題

以前，我們一般使用animate.css、zepto/jQuery的animate方法或者tween.js+css3進行交互特效編程。總結下來有三個缺點：

不直觀

不直接

不方便

不直觀

看下面這張圖：

順序影響結果，不直觀。那么為什么會是這個結果？可以通過new WebKitCSSMatrix(transform_str)對比最終的matrix。

這也直接說明了矩陣不符合交換律。AB!=BA

不直接

zepto姿勢：

$("#some_element").animate({
  opacity: 0.25, left: "50px",
  color: "#abcdef",
  rotateZ: "45deg", translate3d: "0,10px,0"
}, 500, "ease-out")

translate3d: "0,10px,0"非常不方便，無法step遞進遞減控制。更別提配合一些運動或者時間的庫來編程了。可能你會反駁"ease-out"不就可以實現緩動嗎？但是如果我需要讓x和y以及z分別對應不同的緩動函數，這種基于字符串編程的形式就費勁了~~
這里還需要注意的是，zepto里的順序也會影響結果。因為其最后也是拼成string賦給dom元素。

tween.js姿勢

var position = { x: 100, y: 100, rotation: 0 },
    target = document.getElementById("target");

    new TWEEN.Tween(position)
    .to({ x: 700, y: 200, rotation: 359 }, 2000)
    .delay(1000)
    .easing(TWEEN.Easing.Elastic.InOut)
    .onUpdate(function update() {
        var t_str= "translateX(" + position.x + "px) translateY(" + position.y + "px) rotate(" + Math.floor(position.rotation) + "deg)";
        element.style.transform = element.style.msTransform = element.style.OTransform = element.style.MozTransform = element.style.webkitTransform = t_str;
    });

使用字符串的方式，看著就心累。更別提寫的過程要遭受多少折磨。

animate.css姿勢:

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

animate.css封裝了一大堆關鍵幀動畫，開發者只需要關心添加或者移除相關的動畫的class便可以。這一定程度上給交互特效帶來了極大的遍歷，但是要有硬傷：

可編程性不夠高

適用于簡單場景

沒有change回調，只有end回調

不方便

transform的旋轉點基準點默認是在中心，但是有些是時候，不系統在中心，我們傳統的做法是使用transform-origin來設置基準點。

注意，是另一個屬性transform-origin，而不是transform。但是如果需要運動transform-origin呢？這種設計是不是就廢了？有沒有需要運動origin的場景？這個在游戲設計中是經常會使用的到，這個以后另外多帶帶開篇再說，事實就是，有場景是需要運動origin來達到某種效果。

transformjs

基于上面種種不便，所以有了transformjs！

transformjs作為騰訊AlloyTeam移動開發利器之一，廣泛應用于手Q Web、微信Web相關業務開發

transformjs專注于CSS3 transform讀取和設置的一個超輕量級js庫，大大提高了CSS3 transform的可編程性

transformjs高度抽象，不與任何時間、運動框架捆綁，所以可以和任意時間、和運動框架輕松搭配使用

transformjs使用matrix3d為最終輸出給dom對象，硬件加速的同時，不失去可編程性

transformjs擁有超級易用的API，一分鐘輕松上手，二分鐘嵌入真實項目實戰

transformjs擴展了transform本身的能力，讓transform origin更加方便

開始使用吧：
官方網站：http://alloyteam.github.io/AlloyTouch/transformjs/
Github地址：https://github.com/AlloyTeam/AlloyTouch/tree/master/transformjs

云服務器 GPU云服務器 transformjs web前端入門移動web web后端入門

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81051.html

移動Web利器transformjs入門

摘要：更別提配合一些運動或者時間的庫來編程了。姿勢封裝了一大堆關鍵幀動畫，開發者只需要關心添加或者移除相關的動畫的便可以。簡介在過去的兩年，越來越多的同事、朋友和其他不認識的童鞋進行移動web開發的時候，都使用了transformjs，所有必要介紹一下，讓更多的人受益，提高編程效率，并享受編程樂趣。（當然transformjs不僅僅支持移動設備，支持CSS3 3D Transforms的...

mrcode 2019-08-30 13:08 評論0 收藏0
庫&插件&框架&工具

摘要：一些有用的一些有用的，包括轉換小箭頭三角形媒體查詢等中文指南是當下最熱門的前端資源模塊化管理和打包工具。 nodejs 入門 nodejs 入門教程，大家可以在 github 上提交錯誤 2016 年最好用的表單驗證庫 SMValidator.js 前端表單驗證工具分享淺談前端線上部署與運維說到前端部署，可能大多數前端工程師在工作中都是使用的公司現成的部署系統，與SRE對接、一起完...

Codeing_ls 2019-08-01 18:22 評論0 收藏0
庫&插件&框架&工具

摘要：一些有用的一些有用的，包括轉換小箭頭三角形媒體查詢等中文指南是當下最熱門的前端資源模塊化管理和打包工具。 nodejs 入門 nodejs 入門教程，大家可以在 github 上提交錯誤 2016 年最好用的表單驗證庫 SMValidator.js 前端表單驗證工具分享淺談前端線上部署與運維說到前端部署，可能大多數前端工程師在工作中都是使用的公司現成的部署系統，與SRE對接、一起完...

xiaowugui666 2019-08-21 18:43 評論0 收藏0
CSS相關文章

摘要：如何用獲取虛擬鍵盤高度前端早讀課月號早讀文章由湯谷投稿分享。大殺器和把動畫轉換成原生動畫初來乍到，本文搬運自我月份在知乎發的文章。前端面試之 CSS3 新特性除了 HTML5 的新特性，CSS3 的新特性也是面試中經常被問到的。如何用 js 獲取虛擬鍵盤高度？-前端早讀課 9月7號早讀文章由@湯谷投稿分享。正文從這開始～這是一個存在很久的歷史問題了，對于這樣一個具有普遍性的問題...

FrozenMap 2019-08-29 14:21 評論0 收藏0