x 和 s
s 之间的关系如下图：
文章插图
x
x 和 s
s 的关系图（横轴为 x
x，纵轴为 s
s）
在这里，不得不再提起两种动画方案： js 动画和 css 动画 。
js 动画方案的一个优点是，可以精确控制动画的进程，而 css 无法做到 。比如用户在 x = 0.8 的时候手指离开屏幕，因为采用的同一个 render，js 可以知道手指离开屏幕的瞬间 x 处于 0.8 的位置，接下来的动画由 requestAnimationFrame 完成，整个过程流畅且完整 。
而 css 动画则不同，css 动画只有在动画开始之前设定 animation-timing-function，当用户在 x = 0.8 手指离开屏幕时，原本的 js 控制滑动过程中断，由 css 来完成剩余的动画，css 无法根据手指离开屏幕的瞬间动态计算 animation-timing-function ，所以在衔接的那个点，两者速度不匹配，会影响整体动画效果 。
但遗憾的是，js 的动画方案有性能问题，我们在用户手指离开屏幕后的那一部分只能采取 css 动画方案 。这个「更令人愉悦的动画」也只能用在手指滑动期间 。
总结和展望本文讲述了一个「丝般顺滑」的 H5 翻页库的开发过程中遇到的一些问题和对应的解决方法 。基本的滑动翻页模型建立之后，重点关注了性能的问题，分为手指离开屏幕前和手指离开屏幕后两个阶段 。前一阶段主要聚焦于减少 DOM 操作 。后一阶段聚焦于动画的性能，并且对比了 js 动画和 css 动画的性能数据，最后得出了在手指离开屏幕后使用 css 动画的结论 。此外，我们还基于「数据驱动」的思想，在翻页效果和动画函数两部分进行了扩展，增强了翻页库的功能，也丰富了 H5 的展现效果 。
本文中尝试用「数据驱动」的思想去解释整个过程，但是因为性能问题只能暂时放弃，希望在未来能找到更好的方案 。由于水平所限，文中难免会出现纰漏，欢迎大家批评指正，共同学习进步 。感谢 Swiper 和 islider 翻页库的启发，特别感谢和 @Ronny 的热烈讨论 。
本文所述的 swiper 库地址：https://github.com/fex-team/swiper 。master 分支所用的代码是目前百度 H5 线上使用的 。raf 分支是文中提到的使用 js 动画方案 。
希望本文能帮助到您！点赞+转发，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓-_-）
关注 ｛我｝，享受文章首发体验！
每周重点攻克一个前端技术难点 。更多精彩前端内容私信 我 回复“教程”
原文链接：http://fex.baidu.com/blog/2017/10/build-a-silky-smooth-slide-library/
作者：zhangbobell
【打造丝般顺滑的 H5 翻页库】
推荐阅读
- 洗发水和护发素先用哪一个？顺序别搞错，不然头发越洗越油
- 十大口感顺滑威士忌 威士忌排名
- 你们知道散步有助于顺产吗？
- 三杯香产地介绍
- 泰顺三杯香茶产地环境
- 网线水晶头接法顺序
- 打造v形脸 方法原来是这6种
- 伊隆·马斯克|终身成长：那些追求进步和成长的职场人，都在潜心打造的7大核心竞争力
- 知道饭店的鸡蛋汤为什么滑嫩好喝么？做法顺序很关键，学会你也行
- 梦见订婚是什么意思有什么预兆 梦见订婚不顺利什么寓意