AlloyTouch 0.2.0发布--鱼和熊掌兼得

原文连接：github.com/AlloyTeam/A…

背景

公司师姐昨日在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回调里进行处理的。

原理分析

• 用户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：github.com/AlloyTeam/A…

任何意见和建议欢迎new issue，咱们会第一时间反馈。