AlloyTouch 0.2.0发布--鱼和熊掌兼得
原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-0.2.0
背景
公司师姐昨日在KM发了篇长文,主要结论RAF+transform3d就是不如transition+transform3d平滑流畅,但是transition+transform3d没有translate属性变更change回调,只有transitionend的事件回调。最后得出的解决方案:
支持动态切换 raf 和 transition~~
AlloyTouch在这个基础上更加激进,直接支持change事件,不用用户去关心RAF还是transition,也不用用户去手动切换。那么是怎么做到了?往下看。
主要更新
AlloyTouch CSS版本已经支持change事件回调了
鱼和熊掌兼得!慢,什么是鱼?什么是熊掌?
鱼,性能。由于RAF+transform3d就是不如transition+transform3d平滑流畅。CSS版本在处理DOM局部滚动的时候明显更加smooth。
熊掌,change回调。以前使用CSS版本是无法监听到dom的translate属性变更change回调,只有transitionend的事件回调。
现在鱼和熊掌可以兼得!
举个例子
这里就是使用CSS版本制作的,而且滚动过程中可以执行change回调,所以头部的动画都在在change回调里进行处理的。
原理分析
- 用户touchstart的时候开启RAF定时器
- 定时器一直计算读取滚动元素的translate属性,并抛给用户传入的change事件
- transitionend的时候关闭RAF定时器
对,就是这么简单!
代码分析
...
...
_start: function (evt) {
cancelAnimationFrame(this.tickID);
this._tick();
...
...
_tick: function () {
this.change.call(this, this.getComputedPosition());
this.tickID = requestAnimationFrame(this._tick.bind(this));
},
...
touchstart的时候会去触发_start事件,先去cancelAnimationFrame取消掉当前的循环,再重新开启一个,滚动点停。还可以看到,在不断tick的过程中,change函数是一直会被执行,而且计算出的translate会传给change回调。再看getComputedPosition:
getComputedPosition: function () {
var matrix = window.getComputedStyle(this.scroller, null);
matrix = matrix[transform].split(')')[0].split(', ');
return this.vertical ? (+(matrix[13] || matrix[5])) : (+(matrix[12] || matrix[4]));
},
这里会通过getComputedStyle去计算出滚动DOM的matrix,然后提取出translate出来。
读取
...
...
if (this.step) {
this.correction();
if (this._endCallbackTag) {
this._endTimeout = setTimeout(function () {
this.animationEnd.call(this, current);
cancelAnimationFrame(this.tickID);
}.bind(this), 400);
this._endCallbackTag = false;
}
} else {
this.animationEnd.call(this, current);
cancelAnimationFrame(this.tickID);
}
...
当触发了_transitionEnd之后,会去清除定时器。这里需要注意,当用户传了step配置,会延迟400ms清除定时器,因为校正step的过程需要400ms。
Q&A
问:那么非CSS版本还有存在的意义吗?
答:有的,因为非CSS不仅仅可以用于DOM,还能用于WebGL、Canvas,并且运动属性无关。CSS版本没有这些功能。
问:AlloyTouch如何做到这么小的尺寸?
答:AlloyTouch专注于数字的加速减速和回弹,抽象级别较高,而且适用场景较广。
问:有没有出React版本的计划?
这个正在计划当中,但是事实上,不是所有页面都适合React,比如无限滚动,不使用React性能会更优。有的时候要在体验最优和工程化最优做一个权衡,如果体验达不到预期,要学会放弃工程化最优的方案。
问:AlloyTouch和transformjs什么关系?
没有关系。AlloyTouch专注于触摸和运动,transformjs提供DOM和任意对象transformation能力以及一些基础工具函数。
但是建议一起使用。这里需要注意的是,CSS版本的AlloyTouch强制必须和transformjs一起使用。
开始AlloyTouch
Github:https://github.com/AlloyTeam/AlloyTouch
任何意见和建议欢迎new issue,我们会第一时间反馈。
AlloyTouch 0.2.0发布--鱼和熊掌兼得的更多相关文章
- SaaS服务和个性化需求,就不能鱼和熊掌兼得吗?
随时随地.轻松高效,移动工作让人类的自由度最大化.但企业的移动化过程却不轻松:要综合考虑销售.产品.客服.市场销售.人力资源等错综复杂的流程和需求,以及原有IT系统.数据信息的对接. 千企千面,很难有 ...
- Redis 3.0正式版发布,正式支持Redis集群
Redis是一个开源.基于C语言.基于内存亦可持久化的高性能NoSQL数据库,同时,它还提供了多种语言的API.近日,Redis 3.0在经过6个RC版本后,其正式版终于发布了.Redis 3.0的最 ...
- RDIFramework.NET平台代码生成器V3.0版本全新发布-更新于20160518(提供下载)
最新版本请转到:RDIFramework.NET平台代码生成器V3.1版本全新发布-更新于2016-10-08(提供下载) RDIFramework.NET代码生成器V3.0版本修改了针对3.0版本的 ...
- Bootstrap v4.0.0-alpha.5 发布,大量更新
Bootstrap v4.0.0-alpha.5 发布了,Bootstrap是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的 ...
- (转载)一个用于Gnome桌面的下拉式终端: Guake 0.7.0 发布
转自:https://linux.cn/article-5507-1.html Linux的命令行是最好.最强大的东西,它使新手着迷,并为老手和极客的提供极其强大的功能.那些在服务器和生产环境下工作的 ...
- Ionic 2.0.0-rc.1 发布,HTML5 移动应用框架
Ionic 2.0.0-rc.1 发布了,Ionic Framework 是个高级的 HTML5 移动端应用框架,是个很漂亮的使用 HTML5 开发混合移动应用前端框架.本次更新内容如下: Bug 修 ...
- MVC4.0中项目发布遇到IE11时session存入URL中,导致记不住密码的问题
///MVC4.0中项目发布遇到IE11时session存入URL中,导致记不住密码的问题,在webconfig中配置<system.web><authentication mode ...
- log-malloc2 0.2.4 发布
log-malloc2 0.2.4 发布了,该版本修复了日志格式输出的 bug. og-malloc2 是一个 malloc 日志预加载库,用于检测内存泄漏问题.
- TypeScript 0.9.1 发布,新增 typeof 关键字
TypeScript 0.9.1 发布了,该版本提升了编译器和语言的性能,增加新的语言特性 typeof ,更好的 this 处理等.详细介绍请看发行说明. TypeScript 是微软新推出的一种语 ...
随机推荐
- EQueue 2.0 性能测试报告
前言 最近用了几个月的时间,一直在对EQueue做性能优化.到现在总算告一段落了,现在把一些优化的结果分享给大家.EQueue是一个分布式的消息队列,设计思路基本和阿里的RocketMQ一致,只是是用 ...
- 分享阿里云推荐码 IC1L2A,购买服务器可以直接打9折,另附阿里云服务器部署ASP.NET MVC5关键教程
阿里云推荐码为:IC1L2A 阿里云还是不错滴. 以windows server 2008 R2为例,介绍如何从全新的服务器部署MVC5 站点. 新购买的阿里云服务器是没有IIS的,要安装IIS: 控 ...
- ABP源码分析三十四:ABP.Web.Mvc
ABP.Web.Mvc模块主要完成两个任务: 第一,通过自定义的AbpController抽象基类封装ABP核心模块中的功能,以便利的方式提供给我们创建controller使用. 第二,一些常见的基础 ...
- Android开发学习之路-DiffUtil使用教程
谷歌最近更新了Support Library 24.2.0,而DiffUtil就是在这个版本添加的一个工具类. DiffUtil是一个查找集合变化的工具类,是搭配RecyclerView一起使用的,如 ...
- es6 新特性2
es6其他几个非常有用的新特性. import export 这两个家伙对应的就是es6自己的module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成 ...
- 无需编译、快速生成 Vue 风格的文档网站
无需编译.快速生成 Vue 风格的文档网站 https://docsify.js.org/#/#coverpage https://github.com/QingWei-Li/docsify/
- ★Kali信息收集~★7.FPing :ip段扫描
参数: 使用方法: fping [选项] [目标...] -a显示是活着的目标 -A 显示目标地址 -b n 大量 ping 数据要发送,以字节为单位 (默认 56) -B f 将指数退避算法因子设置 ...
- ROC曲线、PR曲线
在论文的结果分析中,ROC和PR曲线是经常用到的两个有力的展示图. 1.ROC曲线 ROC曲线(receiver operating characteristic)是一种对于灵敏度进行描述的功能图像. ...
- HTML5 之拖放(drag与drop)
拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. HTML5 拖放实例 ...
- 前端学HTTP之网络基础
× 目录 [1]网络 [2]OSI [3]TCP/IP 前面的话 HTTP协议对于前端工程师是非常重要的.我们在浏览网站时,访问的每一个WEB页面都需要使用HTTP协议实现.如果不了解HTTP协议,就 ...