• js 翻页动画筹划，Profile 结不雅

• css 翻页动画筹划，Profile 结不雅

经由过程实验我们可以看到，js 的动画过程中，帧率大年夜多保持在 30 fps 高低。而 css 动画，根本都在 60 fps 高低。并且在动画过程中，明显感到 js 动画有卡顿。这种情况在一些 CPU 和显卡设备相对低的 Android 机型上尤为明显。对于这个问题有兴趣的同窗，可以看一下 swiper 库的 raf 分支，这是本次比较测试所用到的 js 。

所以，尽管 js 的动画筹划看起来比较「优雅」，能用「数据驱动」的理念，同一解决滑动过程和动画过程的问题。实际上机能有瓶颈，我们只能在手指分开屏幕后，采取 css 的动画筹划以包管机能。正应了一句话「能用 css 做的，绝对不要用 js 解决」。

实施筹划

下图形象地展示了我们实施的根本思路，只有两页：

• currentPage ：当前页面
• activePage ：即将要翻到的下一页

其余的页面都是初始化的时刻加载进 DOM 构造，然则 display 为 none 并且 z-index 都是 0 。这里展示「层叠」的状况是为了更形象的┞饭示。

swiper 道理图

为了便利获取页面，我们采取双向链表保存页面构造。每个 page 具有 prev 和 next 分别指向上一个和下一? page 。

我们重点要存眷的是，怎么样肯定 activePage ?即下一?要去到的页面。谜底很简单，其实，当用户开端触碰屏幕，并且滑动的时刻，就能肯定了：

1. 滑动距离 x < 0，表示页面向上滑动，此时 activepage = currentPage.next
2. 滑动距离 x > 0，表示页面向下滑动，此时 activepage = currentPage.prev

扩大

翻页效不雅

我们举的例子中的翻页效不蚜?鲱通俗的滑动效不雅。怎么样扩大支撑立方体、翻转等效不雅呢?可以回头看看「手指分开屏幕前」部分，我们提出了

s=f(x) ， x 是用户滑动距离， s 是页面滑动距离。我们把 s

扩大一下，变成「页面翻转角度」或「页面缩放比率」，就可以支撑其他的效不雅了。

事实上，我们在滑动的时刻，本身就是应用 css3 的 transform 属性，将个中的 translate , rotate , scale 恰当的组合就能做出千变万化的翻页效不雅了。

更令人愉悦的动画

这里指的是 animation-timing-function，拿最简单的滑动效不雅举例。如不雅是线性的函数，用户滑动的速度始终等于页面滑动速度。而「感到上」更流畅、更灵敏的应当是：刚开端页面滑动速度大年夜于用户滑动速度，跟着翻页的进行，两者趋于雷同，过了某个点后，单位时光内，页面滑动速度开端逐渐小于用户滑动速度，将速度表示为距离，就可以获得

x 和 s

之间的关系如下图：

跟着近几年移动营销页的火爆，催生了一个中国式的名词「H5」。而 H5 最常见的形态就是类似幻灯片翻页效不雅。

x 和 s 的关系图(横轴为 x ，纵轴为 s

)

在这里，不得不再提起两种动画筹划： js 动画和 css 动画。

js 动画筹划的一个长处是，可以精确控制动画的过程，而 css 无法做到。比如用户在 x = 0.8 的时刻手指分开屏幕，因为采取的同一个 render，js 可以知道手指分开屏幕的刹时 x 处于 0.8 的地位，接下来的动画由 requestAnimationFrame 完成，全部过程流畅且完全。

为了优化机能，我们很天然的想到一个策略： 削减 DOM 操作 。

而 css 动画则不合，css 动画只有在动画开端之前设定 animation-timing-function ，当用户在 x = 0.8 手指分开屏幕时，本来的 js 控制滑动过程中断，由 css 来完成残剩的动画，css 无法根据手指分开屏幕的刹时动态计算 animation-timing-function ，所以在连接的那个点，两者速度不匹配，会影响整体动画效不雅。

但遗憾的是，js 的动画筹划有机能问题，我们在用户手指分开屏幕后的那一部分只能采取 css 动画筹划。这个「更令人愉悦的动画」也只能用在手指滑动时代。

总结和瞻望

本文静述了一个「丝般顺滑」的 H5 翻页库的开辟过程中碰到的一些问题和对应的解决办法。根本的滑动翻页模型建立之后，重点存眷了机能的问题，分为 手指分开屏幕前 和 手指分开屏幕后 两个阶段。前一阶段重要聚焦于削减 DOM 操作。后一阶段聚焦于动画的机能，并且比较了 js 动画和 css 动画的机能数据，最后得出了在手指分开屏幕后应用 css 动画的结论。此外，我们还基于「数据驱动」的思惟，在 翻页效不雅 和 动画函数 两部分进行潦攀扩大，加强了翻页库的功能，也丰富了 H5 的┞饭现效不雅。

我们须要制造 H5 的时刻，最快的办法就是应用一些滑动插件库，如 iDangero.us 出品的 Swiper ，百度 BE-FE 出品的 iSlider 。经由过程这些翻页库供给的强大年夜的设备功能，我们就能实现很酷炫的翻页效不雅。当然，这些库还支撑主动播放，点击切换和当前页面指导等设备，所以还能用在网页上，实现一些 web carousel 的效不雅。

　　推荐阅读

　　云计算加速企业指数级升级 双11阿里云北京站邀你来坐坐

2017年架构师最重要的48个小时 | 8折倒计时双十一购物狂欢季只偏爱大年夜众花费者吗?非也非也，阿里云也为企业用户精心预备了线上线下双重专享礼遇!如不雅你对于企业营业上云另有困惑，如不亚妹欲望懂得>>>详细阅读

本文标题：打造丝般顺滑的H5翻页库

地址：http://www.17bianji.com/lsqh/38316.html

 1/2    1