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)

→ 演示

支持的属性

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 的两种方式都拥有很高性能，10秒钟内拥有大量的空闲时间，可是 fast 确实更加 fast，scripting 的耗时更短。可是优点不明显是为何？由于 DOM 结构简单，若是 DOM 结构越复杂， fast 直接操做 DOM 的方式会把 slow 的方式甩开一大截！下面进行验证一下:

先发 render 的 DOM 结构修改为复杂的:

打开谷歌浏览器的 Performance 运行 10 秒左右，打开 Summary 对比:

Slow	Fast

能够看到 Scripting Time 已经拉开了差距！

对比先后两次的数据：

DOM 结构	Slow	Fast
简单
复杂

能够看到 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