Omi 擁抱 60FPS 的 Web 動畫

時間  2019-11-17
標籤 omi 擁抱 60fps fps web 動畫 欄目 HTML 简体版
原文   原文鏈接

寫在前面

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

Made css3 transform super easy. Made 60 FPS easy.react

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

你能夠經過css3transform 官方首頁快速瞭解它。git

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

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

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

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 的狀態的保留顯得尤爲重要，否則的話就會有閃爍、跳躍的效果或者其餘顯示邏輯錯誤。chrome

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

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

→ 演示canvas

支持的屬性

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

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進行交互特效編程。總結下來有三個缺點：

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

不直觀

看下面這張圖：

順序影響結果，不直觀。那麼爲何會是這個結果？能夠經過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的例子差很少，相信你們可以很快搞定。

Star & Fork

→ omi-transform

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程