写在前面

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 的状态的保留显得尤其重要，不然的话就会有闪烁、跳跃的效果或者其他显示逻辑错误。