写在前面
正式发布了 。
Made css3 transform super easy. Made 60 FPS easy.

       
Figure 1     
   

作为 Omi 组件化开发特效运动解决方案，让你轻松在Omi项目里快速简便支持CSS3 Transform设置。css3transform 是经受过海量项目洗礼的，作为移动 Web 特效解决方案，在、手Q兴趣部落、日迹、QQ、QQ附近等项目中广泛使用，以激进的修改DOM属性为代价，带来极为便利的可编程性。
你可以通过快速了解它。
上面的例子都是原生 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", cl
ass extends WeElement {  static observe = true    install() {    ateZ = 30    this.linkRef = (e) => {      this.animDiv = e    }  }    installed() {    setInterval(() => {      //slow      //ateZ += 2        //fast      ateZ += 2      //sync for update call of any scenario      ateZ = ateZ    }, 16)  }    render(props, data) {    return (      <css3-transform rotateZ={ateZ} 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
∙ 在组件函数里便可以使用 fs.animDiv 来读取或者设置 css transform属性
∙ 支持 "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 怎么解决这个问题？上面的代码已经给出了答案：
使用 ateZ 来同步运动 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：
    [MISSING IMAGE: ,  ]   
Figure 2     
   

omi-transform：
    [MISSING IMAGE: ,  ]   
Figure 3     
   

∙ react 在8739秒内CPU耗时花费了近似1686ms
∙ Omi 方式在9254ms秒内CPU耗时花费近似700ms
在不进行 profiles 就能想象到 react 是一定会更慢一些，因为 state 的改变要走把 react 生命周期走一遍，但是可以看到 react 的耗时还是在可以接受的范围，没有慢到难以接受。
而 Omi 的方式则和传统的原生 js 的耗时一模一样。因为运动过程不进行DOM Diff，直接操作 DOM!!
Omi 自身对比
//ateZ += 2复制代码
//ateZ += ateZ = ateZ复制代码
主要对比上面两个代码块的执行效率，打开谷歌浏览器的 Performance 运行 10 秒左右，打开 Summary 对比:
Slow
Fast
        [MISSING IMAGE: Omi, Omi ]       
Figure 4         
       
        [MISSING IMAGE: Omi, Omi ]       
Figure 5         
       
可以看到 omi 的两种方式都拥有很高性能，10秒钟内拥有大量的空闲时间，但是 fast 确实更加 fast，scripting 的耗时更短。但是优势不明显是为什么？因为 DOM 结构简单，如果 DOM 结构越复杂， fast 直接操作 DOM 的方式会把 slow 的方式甩开一大截！下面进行验证一下:
先发 render 的 DOM 结构修改成复杂的:

    [MISSING IMAGE: Omi, Omi ]   
Figure 6     
   

打开谷歌浏览器的 Performance 运行 10 秒左右，打开 Summary 对比:
Slow
Fast
        [MISSING IMAGE: Omi, Omi ]       
Figure 7         
       
        [MISSING IMAGE: Omi, Omi ]       
Figure 8         
       
可以看到 Scripting Time 已经拉开了差距！
对比前后两次的数据：
DOM 结构
Slow
Fast
简单
        [MISSING IMAGE: Omi, Omi ]       
Figure 9         
       
        [MISSING IMAGE: Omi, Omi ]       
Figure 10         
       
复杂
        [MISSING IMAGE: Omi, Omi ]       
Figure 11         
       
        [MISSING IMAGE: Omi, Omi ]       
Figure 12         
       
可以看到 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  anslateX = 100 domElement.scaleX = 0.iginX = 50//get console.anslateX)复制代码
传统的CSS3编程的问题
以前，我们一般使用animate.css、zepto/jQuery的animate方法或者tween.js+css3进行交互特效编程。总结下来有三个缺点：
∙ 不直观
∙ 不直接
∙ 不方便
不直观
看下面这张图：
    [MISSING IMAGE: ,  ]   
Figure 13     
   

顺序影响结果，不直观。那么为什么会是这个结果？可以通过new WebKitCSSMatrix(transform_str)对比最终的matrix。
    [MISSING IMAGE: ,  ]   
Figure 14     
   

这也直接说明了矩阵不符合交换律。A*B != B*Ajs控制css3动画触发
不直接
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元素。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。