Omi 擁抱 60FPS 的 Web 動畫

【當耐特】發表於2018-11-15
Web動畫

寫在前面

Omi 框架 正式釋出了 → omi-transform。

Made css3 transform super easy. Made 60 FPS easy.

Omi 擁抱 60FPS 的 Web 動畫

作為 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)

→ 演示

支援的屬性

Property Describe
translateX translateX
translateY translateY
translateZ translateZ
scaleX scaleX
scaleY scaleY
scaleZ scaleZ
rotateX rotateX
rotateY rotateY
rotateZ rotateZ
skewX skewX
skewY skewY
originX the basic x point of rotation
originY the basic y point of rotation
originZ the basic z point of rotation
perspective Perspective 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 擁抱 60FPS 的 Web 動畫

omi-transform：
Omi 擁抱 60FPS 的 Web 動畫

  • 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 對比:

Slow Fast
Omi Omi

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

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

Omi

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

Slow Fast
Omi Omi

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

對比前後兩次的資料：

DOM 結構 Slow Fast
簡單 Omi Omi
複雜 Omi Omi

可以看到 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進行互動特效程式設計。總結下來有三個缺點：

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

不直觀

看下面這張圖：
Omi 擁抱 60FPS 的 Web 動畫

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

這也直接說明了矩陣不符合交換律。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來設定基準點。
Omi 擁抱 60FPS 的 Web 動畫

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

小結

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

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

實戰

Omi 擁抱 60FPS 的 Web 動畫

你可以配合 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)

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

Omi 擁抱 60FPS 的 Web 動畫

你想用這個值來幹什麼就幹什麼吧。看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);

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

Omi 擁抱 60FPS 的 Web 動畫

  • 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扭曲力度特別大，而且會有無窮大的值導致扭曲橫跨整個螢幕。

Omi 擁抱 60FPS 的 Web 動畫

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

Star & Fork

→ omi-transform

相關文章