omi-transform
如果你使用过 css3transform, 就知道制作页面动效是多么地惬意。现在,你再 Omi 项目里也可以使用上 css3transform 的优秀的特性并且拥有同样高效的性能:
import { render, WeElement, tag, observe } from "omi";
import "omi-transform";
@observe
@tag("my-app")
class MyApp extends WeElement {
install() {
this.data.rotateZ = 30
this.linkRef = (e) => {
this.animDiv = e
}
}
installed() {
setInterval(() => {
// 慢,因为直接改变 data 会触发 update -> render -> diff -> apply diff
// this.data.rotateZ += 2
//快,因为直接操作 dom
this.animDiv.rotateZ += 2
//同步 transform 给 data 防止任何 update
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 获取高效的运动性能并且也能应对任何形式的组件更新而不丢失状态。