Omi 擁抱 60FPS 的 Web 動畫

寫在前面

Omi 框架 正式發布了 → omi-transform。

Made css3 transform super easy. Made 60 FPS easy.

作為 Omi 組件化開發特效運動解決方案，讓你輕鬆在Omi項目里快速簡便支持CSS3 Transform設置。css3transform 是經受過海量項目洗禮的，作為移動 Web 特效解決方案，在微信、手Q興趣部落、日跡、QQ群、QQ附近等項目中廣泛使用，以激進的修改DOM屬性為代價，帶來極為便利的可編程性。

你可以通過css3transform 官方首頁快速了解它。

上面官網的例子都是原生 js 的，css3transform 也擁有react版本，你也可以在 react 中以聲明式的方式使用 css3transform：

render() {
return (
<Transform
translateX={100}
scaleX={0.5}
originX={0.5}>
<div>你要運動的 DOM</div>
</Transform>
)
}

這都不是重點，重點是 omi-transform。

3分鐘掌握 omi-transform

通過npm安裝

npm install omi-transform

使用

import { render, WeElement, define } from "omi"
import "omi-transform"
define("my-app", class extends WeElement {
static observe = true
install() {
this.data.rotateZ = 30
this.linkRef = (e) => {
this.animDiv = e
}
}
installed() {
setInterval(() => {
//slow
//this.data.rotateZ += 2
//fast
this.animDiv.rotateZ += 2
//sync for update call of any scenario
this.data.rotateZ = this.animDiv.rotateZ
}, 16)
}
render(props, data) {
return (
<css3-transform rotateZ={data.rotateZ} translateX={0} perspective={0} >
<div ref={this.linkRef}>
omi-transform
</div>
</css3-transform>
)
}
})
render(<my-app />, "body")

• 把需要運動的 DOM 使用 <css3-transform></css3-transform> 包裹
• 在需要使用 css3transform 的 DOM 上標記 ref 用來直接操作 DOM
• 在組件函數里便可以使用 this.refs.animDiv 來讀取或者設置 css transform屬性
• this.refs.xxx 支持 "translateX", "translateY", "translateZ", "scaleX", "scaleY", "scaleZ", "rotateX", "rotateY", "rotateZ", "skewX", "skewY", "originX", "originY", "originZ", "perspective" 這些屬性設置和讀取
• perspective 表示透視投影的距離

組件里的某個 DOM 在運動過程中，可能會由於其他邏輯，進行 update。有可能是用戶交互，有可能是數據返回的回調。所以，update 前後，DOM 的狀態的保留顯得尤其重要，不然的話就會有閃爍、跳躍的效果或者其他顯示邏輯錯誤。

可以看到上面的代碼在 DOM 運動過程中時不進行 Diff ？組件不進行 update ？萬一組件 update，所有運動的狀態都會丟失？Omi 怎麼解決這個問題？上面的代碼已經給出了答案：

使用 this.data.rotateZ 來同步運動 DOM 的狀態防止意外的刷新(update)

→ 演示

支持的屬性

PropertyDescribetranslateXtranslateXtranslateYtranslateYtranslateZtranslateZscaleXscaleXscaleYscaleYscaleZscaleZrotateXrotateXrotateYrotateYrotateZrotateZskewXskewXskewYskewYoriginXthe basic x point of rotationoriginYthe basic y point of rotationoriginZthe basic z point of rotationperspectivePerspective projection distance

你既可以 get 也可以 set。

性能對比

因為 react 版本會有 diff 過程，然後 apply diff to dom 的過程，state 改變不會整個 innerHTML 全部替換，所以對瀏覽器渲染來說還是很便宜，但是在 js 里 diff 的過程的耗時還是需要去 profiles 一把，如果耗時嚴重，不在 webworker 里跑還是會卡住UI線程導致卡頓，動畫卡頓丟幀、交互延緩等。所以要看一看 CPU 的耗時還是很有必要的。

下面數據是對比 omi-transform 和 react-transform，兩種方式使用 chrome profiles 了一把。

先看總耗時對比：

react-transform：

omi-transform：

• react 在8739秒內CPU耗時花費了近似

  1686ms

• Omi 方式在9254ms秒內CPU耗時花費近似

  700ms

在不進行 profiles 就能想像到 react 是一定會更慢一些，因為 state 的改變要走把 react 生命周期走一遍，但是可以看到 react 的耗時還是在可以接受的範圍，沒有慢到難以接受。

而 Omi 的方式則和傳統的原生 js 的耗時一模一樣。因為運動過程不進行DOM Diff，直接操作 DOM!!

Omi 自身對比

//slow
this.data.rotateZ += 2
//fast
this.animDiv.rotateZ += 2
this.data.rotateZ = this.animDiv.rotateZ

主要對比上面兩個代碼塊的執行效率，打開谷歌瀏覽器的 Performance 運行 10 秒左右，打開 Summary 對比:

SlowFast

可以看到 omi 的兩種方式都擁有很高性能，10秒鐘內擁有大量的空閑時間，但是 fast 確實更加 fast，scripting 的耗時更短。但是優勢不明顯是為什麼？因為 DOM 結構簡單，如果 DOM 結構越複雜， fast 直接操作 DOM 的方式會把 slow 的方式甩開一大截！下面進行驗證一下:

先發 render 的 DOM 結構修改成複雜的:

打開谷歌瀏覽器的 Performance 運行 10 秒左右，打開 Summary 對比:

SlowFast

可以看到 Scripting Time 已經拉開了差距！

對比前後兩次的數據：

DOM 結構SlowFast簡單

複雜

可以看到 Fast 的前後兩次沒有太大差別，Slow 前後兩次差距巨大。那麼 Fast 內核 css3transform 原理是什麼？

css3transform

安裝

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
domElement.translateX = 100
domElement.scaleX = 0.5
domElement.originX = 50
//get
console.log(domElement.translateX)

傳統的CSS3編程的問題

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

• 不直觀
• 不直接
• 不方便

不直觀

看下面這張圖：

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

這也直接說明了矩陣不符合交換律。A*B != B*A

不直接

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便可以。這一定程度上給交互特效帶來了極大的遍歷，但是要有硬傷：

• 可編程性不夠高
• 適用於簡單場景
• 只有 end 回調，沒有 change 回調

不方便

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

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

小結

基於上面種種不便，所以有了css3transform！

• css3transform 專註於CSS3 transform讀取和設置的一個超輕量級js庫，大大提高了CSS3 transform的可編程性
• css3transform 高度抽象，不與任何時間、運動框架捆綁，所以可以和任意時間、和運動框架輕鬆搭配使用
• css3transform 使用matrix3d為最終輸出給dom對象，硬體加速的同時，不失去可編程性
• css3transform 擁有超級易用的API，一分鐘輕鬆上手，二分鐘嵌入真實項目實戰
• css3transform 擴展了transform本身的能力，讓transform origin更加方便

實戰

你可以配合 createjs 的 tweenjs ，輕鬆製作出上面的搖擺特效:

var element = document.querySelector("#test")
Transform(element)
element.originY = 100
element.skewX = -20
var Tween = createjs.Tween,
sineInOutEase = createjs.Ease.sineInOut
Tween.get(element, {loop: true}).to({scaleY: .8}, 450, sineInOutEase).to({scaleY: 1}, 450, sineInOutEase)
Tween.get(element, {loop: true}).to({skewX: 20}, 900, sineInOutEase).to({skewX: -20}, 900, sineInOutEase)

上面的代碼很精簡。這裡稍微解釋下：

• 元素的初始skewX是-20，為了和scale的步調一致
• 元素的originY是100，為的以企鵝的bottom center為基準點

可以看到，由於css3transform高度抽象，可以和tweenjs輕鬆搭配使用，沒有任何壓力。

原理

css3transform 不僅僅可以mix CSS3 transform 到 DOM 元素，還能 mix 到任意的對象字面量，也可以把 css3transform 當作工具，他提供一些基礎的數學能力。

這裡需要特別注意，以前的姿勢可以繼續使用，這裡另外三種使用姿勢。

語法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掛載和使用第三方對象掛載的區別。第三方掛載有點隔山打牛的感覺。

當然..，還沒有完，不僅僅可以上面那個樣子。那還可以把css3transform完全當作一個計算工具來用。

語法2

Transform.getMatrix3D(option)

姿勢

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

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

你想用這個值來幹什麼就幹什麼吧。看css3transform源碼可以得到 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， css3transform也提供了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);

看css3transform源碼可以得到 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的例子差不多，相信大家能夠很快搞定。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！