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教程