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的事件回调。
现在鱼和熊掌可以兼得！
举个例子
- 访问DEMO你也可以 点击这里
- 源代码可以 点击这里
这里就是使用CSS版本制作的，而且滚动过程中可以执行chang回调，所以头部的动画都在在change回调里进行处理的。
注意，这里只是个DEMO页面，用来展示头部的动画，底部显示正在加载中是加载不出来数据的，所以不用等待了。
原理分析
- 用户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。
问：那么非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 ，我们会第一时间反馈。
正文到此结束
热门推荐
相关文章
Loading...
![[HBLOG]公众号](http://www.liuhaihua.cn/img/qrcode_gzh.jpg)
