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

csRyan 发布于2019-08-21 11:24 / 3491人阅读

摘要：主要更新版本已经支持事件回调了鱼和熊掌兼得慢，什么是鱼什么是熊掌鱼，性能。读取当触发了之后，会去清除定时器。这里需要注意，当用户传了配置，会延迟清除定时器，因为校正的过程需要。

原文链接：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版本制作的，而且滚动过程中可以执行change回调，所以头部的动画都在在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。

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，我们会第一时间反馈。

云服务器 GPU云服务器 AlloyTouch 熊掌蓝绿发布 vs 灰度发布灰度发布和不停机发布

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86668.html

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

摘要：主要更新版本已经支持事件回调了鱼和熊掌兼得慢，什么是鱼什么是熊掌鱼，性能。读取当触发了之后，会去清除定时器。这里需要注意，当用户传了配置，会延迟清除定时器，因为校正的过程需要。原文链接：https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-0.2.0 背景公司师姐昨日在KM发了篇长文，主要结论RAF+transform3d就...

shevy 2019-08-30 13:17 评论0 收藏0
最近使用handsontable遇到的问题

摘要：关于隐藏列的问题刚开始使用的百度当不需要显示某一列的时候可用如下格式设置这里就不显示第二列数据，只有第列数据，虽然隐藏了但是数据渲染不出来，还思索了个笨方法把最后一行隐藏但是确实挺蠢的，因为样式空了一片表格不居中继而去官网查看了找到了不支持关于隐藏列的问题：刚开始使用的1.百度：当不需要显示某一列的时候可用如下格式设置： columns：[ {data:0}, {data:...

浠ラ箍 2019-08-23 17:20 评论0 收藏0
前端开发篇——浏览器默认样式及css初始化

摘要：为什么要初始化建站老手都知道，这是为了考虑到浏览器的兼容问题，其实不同浏览器对有些标签的默认值是不同的，如果没对初始化往往会出现浏览器之间的页面差异。当然，初始化样式会对有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。为什么要初始化css? 建站老手都知道，这是为了考虑到浏览器的兼容问题，其实不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器...

luoyibu 2019-08-30 13:21 评论0 收藏0
前端开发篇——浏览器默认样式及css初始化

摘要：为什么要初始化建站老手都知道，这是为了考虑到浏览器的兼容问题，其实不同浏览器对有些标签的默认值是不同的，如果没对初始化往往会出现浏览器之间的页面差异。当然，初始化样式会对有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。为什么要初始化css? 建站老手都知道，这是为了考虑到浏览器的兼容问题，其实不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器...

dunizb 2019-08-01 16:10 评论0 收藏0
从根本出发，探索区块链共识的四个阶段

摘要：状态机模型区块链用许多的节点共同模拟了一台多复本的状态机。区块链共识的四个阶段第一阶段是加入共识加入共识阶段决定了什么样的节点可以参与共识协议。第四阶段是退出共识这是常常被忽略的部分。在接下来的秘猿科技小课堂里，我们会从技术角度、经济模型设计角度、以及共识角度来拆解 Nervos 加密经济网络中，底层公链 CKB 的设计理念。而本文将会作为技术角度核心设计 Cell 模型的预备文章，...

pekonchan 2019-06-27 19:20 评论0 收藏0