原文链接: 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,也不用用户去手动切换。那么是怎么做到了?往下看。
鱼和熊掌兼得!慢,什么是鱼?什么是熊掌?
鱼,性能。由于RAF+transform3d就是不如transition+transform3d平滑流畅。CSS版本在处理DOM局部滚动的时候明显更加smooth。
熊掌,change回调。以前使用CSS版本是无法监听到dom的translate属性变更change回调,只有transitionend的事件回调。
现在鱼和熊掌可以兼得!
这里就是使用CSS版本制作的,而且滚动过程中可以执行chang回调,所以头部的动画都在在change回调里进行处理的。
注意,这里只是个DEMO页面,用来展示头部的动画,底部显示正在加载中是加载不出来数据的,所以不用等待了。
对,就是这么简单!
... ... _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。
问:那么非CSS版本还有存在的意义吗?
答:有的,因为非CSS不仅仅可以用于DOM,还能用于WebGL、Canvas,并且运动属性无关。CSS版本没有这些功能。
问:AlloyTouch如何做到这么小的尺寸?
答:AlloyTouch专注于数字的加速减速和回弹,抽象级别较高,而且适用场景较广。
问:有没有出React版本的计划?
这个正在计划当中,但是事实上,不是所有页面都适合React,比如无限滚动,不使用React性能会更优。有的时候要在体验最优和工程化最优做一个权衡,如果体验达不到预期,要学会放弃工程化最优的方案。
问:AlloyTouch和transformjs什么关系?
没有关系。AlloyTouch专注于触摸和运动,transformjs提供DOM和任意对象transformation能力以及一些基础工具函数。
但是建议一起使用。这里需要注意的是,CSS版本的AlloyTouch强制必须和transformjs一起使用。
Github: https://github.com/AlloyTeam/AlloyTouch
任何意见和建议欢迎 new issue ,我们会第一时间反馈。