原文链接: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定时器

对,就是这么简单!

代码分析

  1. ...
  2. ...
  3. _start: function (evt) {
  4. cancelAnimationFrame(this.tickID);
  5. this._tick();
  6. ...
  7. ...
  8. _tick: function () {
  9. this.change.call(this, this.getComputedPosition());
  10. this.tickID = requestAnimationFrame(this._tick.bind(this));
  11. },
  12. ...

touchstart的时候会去触发_start事件,先去cancelAnimationFrame取消掉当前的循环,再重新开启一个,滚动点停。还可以看到,在不断tick的过程中,change函数是一直会被执行,而且计算出的translate会传给change回调。再看getComputedPosition:

  1. getComputedPosition: function () {
  2. var matrix = window.getComputedStyle(this.scroller, null);
  3. matrix = matrix[transform].split(')')[0].split(', ');
  4. return this.vertical ? (+(matrix[13] || matrix[5])) : (+(matrix[12] || matrix[4]));
  5. },

这里会通过getComputedStyle去计算出滚动DOM的matrix,然后提取出translate出来。

读取

  1. ...
  2. ...
  3. if (this.step) {
  4. this.correction();
  5. if (this._endCallbackTag) {
  6. this._endTimeout = setTimeout(function () {
  7. this.animationEnd.call(this, current);
  8. cancelAnimationFrame(this.tickID);
  9. }.bind(this), 400);
  10. this._endCallbackTag = false;
  11. }
  12. } else {
  13. this.animationEnd.call(this, current);
  14. cancelAnimationFrame(this.tickID);
  15. }
  16. ...

当触发了_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发布--鱼和熊掌兼得的更多相关文章

  1. SaaS服务和个性化需求,就不能鱼和熊掌兼得吗?

    随时随地.轻松高效,移动工作让人类的自由度最大化.但企业的移动化过程却不轻松:要综合考虑销售.产品.客服.市场销售.人力资源等错综复杂的流程和需求,以及原有IT系统.数据信息的对接. 千企千面,很难有 ...

  2. Redis 3.0正式版发布,正式支持Redis集群

    Redis是一个开源.基于C语言.基于内存亦可持久化的高性能NoSQL数据库,同时,它还提供了多种语言的API.近日,Redis 3.0在经过6个RC版本后,其正式版终于发布了.Redis 3.0的最 ...

  3. RDIFramework.NET平台代码生成器V3.0版本全新发布-更新于20160518(提供下载)

    最新版本请转到:RDIFramework.NET平台代码生成器V3.1版本全新发布-更新于2016-10-08(提供下载) RDIFramework.NET代码生成器V3.0版本修改了针对3.0版本的 ...

  4. Bootstrap v4.0.0-alpha.5 发布,大量更新

    Bootstrap v4.0.0-alpha.5 发布了,Bootstrap是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的 ...

  5. (转载)一个用于Gnome桌面的下拉式终端: Guake 0.7.0 发布

    转自:https://linux.cn/article-5507-1.html Linux的命令行是最好.最强大的东西,它使新手着迷,并为老手和极客的提供极其强大的功能.那些在服务器和生产环境下工作的 ...

  6. Ionic 2.0.0-rc.1 发布,HTML5 移动应用框架

    Ionic 2.0.0-rc.1 发布了,Ionic Framework 是个高级的 HTML5 移动端应用框架,是个很漂亮的使用 HTML5 开发混合移动应用前端框架.本次更新内容如下: Bug 修 ...

  7. MVC4.0中项目发布遇到IE11时session存入URL中,导致记不住密码的问题

    ///MVC4.0中项目发布遇到IE11时session存入URL中,导致记不住密码的问题,在webconfig中配置<system.web><authentication mode ...

  8. log-malloc2 0.2.4 发布

    log-malloc2 0.2.4 发布了,该版本修复了日志格式输出的 bug. og-malloc2 是一个 malloc 日志预加载库,用于检测内存泄漏问题.

  9. TypeScript 0.9.1 发布,新增 typeof 关键字

    TypeScript 0.9.1 发布了,该版本提升了编译器和语言的性能,增加新的语言特性 typeof ,更好的 this 处理等.详细介绍请看发行说明. TypeScript 是微软新推出的一种语 ...

随机推荐

  1. EQueue 2.0 性能测试报告

    前言 最近用了几个月的时间,一直在对EQueue做性能优化.到现在总算告一段落了,现在把一些优化的结果分享给大家.EQueue是一个分布式的消息队列,设计思路基本和阿里的RocketMQ一致,只是是用 ...

  2. 分享阿里云推荐码 IC1L2A,购买服务器可以直接打9折,另附阿里云服务器部署ASP.NET MVC5关键教程

    阿里云推荐码为:IC1L2A 阿里云还是不错滴. 以windows server 2008 R2为例,介绍如何从全新的服务器部署MVC5 站点. 新购买的阿里云服务器是没有IIS的,要安装IIS: 控 ...

  3. ABP源码分析三十四:ABP.Web.Mvc

    ABP.Web.Mvc模块主要完成两个任务: 第一,通过自定义的AbpController抽象基类封装ABP核心模块中的功能,以便利的方式提供给我们创建controller使用. 第二,一些常见的基础 ...

  4. Android开发学习之路-DiffUtil使用教程

    谷歌最近更新了Support Library 24.2.0,而DiffUtil就是在这个版本添加的一个工具类. DiffUtil是一个查找集合变化的工具类,是搭配RecyclerView一起使用的,如 ...

  5. es6 新特性2

    es6其他几个非常有用的新特性. import export 这两个家伙对应的就是es6自己的module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成 ...

  6. 无需编译、快速生成 Vue 风格的文档网站

    无需编译.快速生成 Vue 风格的文档网站 https://docsify.js.org/#/#coverpage https://github.com/QingWei-Li/docsify/

  7. ★Kali信息收集~★7.FPing :ip段扫描

    参数: 使用方法: fping [选项] [目标...] -a显示是活着的目标 -A 显示目标地址 -b n 大量 ping 数据要发送,以字节为单位 (默认 56) -B f 将指数退避算法因子设置 ...

  8. ROC曲线、PR曲线

    在论文的结果分析中,ROC和PR曲线是经常用到的两个有力的展示图. 1.ROC曲线 ROC曲线(receiver operating characteristic)是一种对于灵敏度进行描述的功能图像. ...

  9. HTML5 之拖放(drag与drop)

    拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. HTML5 拖放实例 ...

  10. 前端学HTTP之网络基础

    × 目录 [1]网络 [2]OSI [3]TCP/IP 前面的话 HTTP协议对于前端工程师是非常重要的.我们在浏览网站时,访问的每一个WEB页面都需要使用HTTP协议实现.如果不了解HTTP协议,就 ...