Omi官方插件系列 - omi-transform介绍
原文链接 - https://github.com/AlloyTeam/omi/tree/master/tutorial
写在前面
Omi框架正式发布了omi-transform作为Omi组件化开发特效运动解决方案,让你轻松在Omi项目里快速简便支持CSS3 Transform设置。先说说 transform.js (npm上的名字是 css3transform)。transform.js作为移动Web特效解决方案,在手Q兴趣部落、日迹、QQ群、QQ附近等项目中广泛使用,以激进的修改DOM属性为代价,带来极为便利的可编程性。
你可以通过http://alloyteam.github.io/AlloyTouch/transformjs/快速了解它。
上面官网的例子都是原声js的,transformjs也拥有react版本,你也可以在react中以声明式的方式使用transformjs:
render() {return (<TransformtranslateX={100}scaleX={0.5}originX={0.5}><div>sth</div></Transform>);
}
3分钟掌握omi-transform
演示
http://alloyteam.github.io/omi/plugins/omi-transform/example/simple/
通过npm安装
npm install omi-transform
使用
import Omi from 'omi';
import OmiTransform from '../../omi-transform.js';OmiTransform.init();class App extends Omi.Component {constructor(data) {super(data);}installed(){setInterval(function(){this.refs.test.rotateZ = 0.1;}.bind(this));}render() {return `<div omi-transform class="test" ref="test" rotateZ="45" translateX="100" perspective="400">omi-transform</div>`;}
}Omi.render(new App(),"#container");
- 在需要使用transformjs的DOM上标记 omi-transform 和 ref="xxx"
- 在组件函数里便可以使用 this.refs.xxx 来读取或者设置 css transform属性
- this.refs.xxx 支持 "translateX", "translateY", "translateZ", "scaleX", "scaleY", "scaleZ", "rotateX", "rotateY", "rotateZ", "skewX", "skewY", "originX", "originY", "originZ", "perspective"这些属性设置和读取
- 没有标记perspective的话代码没有透视投影
性能对比
因为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的耗时一模一样。以为运动过程不进行DOMI Diff!!
慢着?不进行Diff?意思就是组件不进行update?
意思就是万一组件update,所有运动的状态都会丢失?Omi怎么解决这个问题?
状态保存
组件里的某个DOM在运动过程中,可能会由于其他逻辑,进行update。有可能是用户交互,有可能是数据返回的回调。所以,update前后,DOM的状态的保留显得尤其重要,不然的话就会有闪烁、跳跃的效果或者其他显示逻辑错误。
...constructor(data) {super(data);//初始状态this.rotateZ = 45;}installed(){setInterval(() =>{//sync for update 记录同步到this.rotateZthis.rotateZ = this.refs.test.rotateZ = 0.1;});}render() {//通过 ${this.rotateZ} 设置rotateZreturn `<div omi-transform class="test" ref="test" rotateZ="${this.rotateZ}" translateX="100" perspective="400" >omi-transform</div>`;}...
上面的所有例子和代码可以在这里找到。
Omi相关
- Omi官网omijs.org
- Omi的Github地址https://github.com/AlloyTeam/omi
- 如果想体验一下Omi框架,可以访问 Omi Playground
- 如果想使用Omi框架或者开发完善Omi框架,可以访问 Omi使用文档
- 如果你想获得更佳的阅读体验,可以访问 Docs Website
- 如果你懒得搭建项目脚手架,可以试试 omi-cli
- 如果你有Omi相关的问题可以 New issue
- 如果想更加方便的交流关于Omi的一切可以加入QQ的Omi交流群(256426170)
Omi官方插件系列 - omi-transform介绍相关推荐
- 360安装 css3插件,Omi官方插件系列 。。支持CSS3 Transform设置
写在前面 Omi框架正式发布了omi-transform作为Omi组件化开发特效运动解决方案,让你轻松在Omi项目里快速简便支持CSS3 Transform设置.先说说 transform.js (n ...
- Omi 官方插件系列 - omi-transform 介绍
原文链接 - https://github.com/AlloyTeam/omi/tree/master/tutorial 写在前面 Omi框架正式发布了omi-transform作为Omi组件化开发特 ...
- Omi教程-插件体系
插件体系 Omi是Web组件化框架,怎么又来了个插件的概念? 可以这么理解: Omi插件体系可以赋予dom元素一些能力,并且可以和组件的实例产生关联. omi-drag 且看这个例子: 点击这里→在线 ...
- Jquery提交表单 Form.js官方插件介绍
來源:http://hi.baidu.com/dereky/blog/item/f9e8ab64c52f4ff3f736540c.html [JQuery框架应用]:form.js官方插件介绍 For ...
- form.js官方插件介绍
转载自:http://www.cnblogs.com/fredlau/archive/2008/08/06/1262009.html 1.最新JQuery框架软件包下载 jquery.js压缩包 jq ...
- SpringBoot 2.0 系列001 -- 入门介绍以及相关概念
为什么80%的码农都做不了架构师?>>> SpringBoot 2.0 系列001 -- 入门介绍以及相关概念 什么是SpringBoot? 项目地址:http://proje ...
- 【开发者portal在线开发插件系列五】命令的响应,即命令结果的上报(mid的使用)
基础篇 [开发者portal在线开发插件系列一]profile和基本上下行消息 [开发者portal在线开发插件系列二]多条上下行消息(messageId的使用) 基础场景见上面两个帖子,这里单独介绍 ...
- asp.net core 系列 19 EFCore介绍
asp.net core 系列 19 EFCore介绍 原文:asp.net core 系列 19 EFCore介绍 一.概述 目前最新的EF Core版本是3.0,最稳定的EF Core版本是2.2 ...
- 大华监控前端实时预览(DHplayer)官方插件
介绍:采用vue2+大华官方插件DHplaye+rtsp拉流实现前端预览 1.根据官方文档安装引入插件 2.再vue项目中引入插件 import DHPlayer from '@/components ...
最新文章
- 微软sccm服务器,System Center 2012R2系列之SCCM部署
- 框架中的左侧菜单关联右侧页面是如何实现的_前端基础学习:Vue2.0实现移动端外卖平台项目,参考旧版饿了么!...
- 别让Vue3.0的谣言害了你!
- mysql用户变量递归_MYSQL递归树查询的实现
- html5中的h1,HTML5语义 - 产品列表中的h1用法
- 洛谷1966 火柴排队
- FISCO BCOS 《新摩登时代》:卓别林演绎共识与同步流程优化
- Docker 基础 ( 二十 ) 部署Redis集群,问题记录
- JavaWeb:(练习)十四、基于mybatis框架的简单的学生管理系统
- 64位plsql连接oracle,PLSQL Developer连接Oracle11g 64位数据库配置详解(转)
- 基于SSM学生学籍管理系统
- matlab 怎么求直线斜率,matlab中如何求近似(不平滑)直线的斜率
- 2020年即将推出的智能手环APP定制开发
- Markdown任务列表(实现列表勾选/非勾选操作)
- 2002 计算球体体积
- 华为机试字符串分割c语言,2014年华为上机机试c语言标题和答案
- 15个在线检测网站工具十分好用
- matlab模拟神经模糊自适应控制器
- 本科计算机仿真试题,试题模板2005-计算机仿真
- SAS盘和SATA盘_wentfar·tsao