玩转 H5 下拉上滑动效果

在APP中咱们常常会在页面下拉时看到一些动效，例以下拉图片跟随放大、下拉刷新出现loading动画等，这个交互细节在各个主流APP以及手机原生系统中随处可见，能为APP增添个性亮点。

1、背景

在咱们的平常项目中，也会遇到这样的需求，在当前环境下，此类效果大可能是靠原生来实现的，可是用原生实现有很多缺陷，缘由以下：

• 原生实现周期长;
• 跨平台实现成本高;
• 解决方案通用性差;
• 运用到现有项目改形成本高;

那么咱们的H5页面可否实现呢？下面和你们一块儿来探索。

首先，咱们先来实现下拉banner图放大的动效。效果相似于：

动效要求：当处于顶部页面下拉时，banner图跟随放大，下拉结束时，banner图还原回弹。

下拉动效能够分解为两部分：

1. 页面主体内容总体下滑滚动;
2. 顶部元素进行放大动效。

在以往，在H5实现页面滚动效果是通常采用JS插件模拟滚动，例如：iScroll。但在这里存在几个问题：

• 对现有页面的改造很是大，不适宜大范围运用;
• 模拟滚动取代原生滚动会引起未知的bug;
• 在低端手机性能差，体验不佳;

要解决这些问题，能够采用以下方案：

1，保持页面的原生滚动，只有在顶部下拉事件中，才触发动效执行;
2，用JS拷贝DOM结构，使动效结构与页面结构解耦，互不影响;

这样下拉动效会相对更流畅并基本不影响页面正常滚动。

2、技术实现

按照上面的技术方案实施，具体过程为：

禁用页面顶部下拉事件  ------>  将页面的主体内容用一个DIV容器包含起来，同时复制须要放大处理的内容节点至主体内容以外  ------> 绑定页面滑屏事件  ------> 计算滑屏偏移量以及缩放等数值的运算  ------> 根据变化数值主体内容transfrom下滑，同时复制的节点作放大动效处理  ------> 监听滑屏事件结束，执行回弹动效，还原初始状态

代码节选片断：

要点及说明：

一、禁用页面顶部下拉事件：

该技术要点是阻止默认事件的下拉，从而将下拉事件绑定到咱们的动效中。阻止默认事件咱们通常能够这样子处理：

可是此方法有必定缺陷。首先他禁止了页面的正常滑动，给页面的形成了很多的干扰和麻烦；其次是在一些APP中的WebView中并不能根本上的阻止View的下拉，对页面动效形成干扰。

这里最好的一个处理方法是能够在WebView的层面上去禁止页面下拉。

二、需判断滑屏方向，避免横向滑动干扰下拉动效。公式计算：

X = 绝对值（当前坐标X - 初始坐标X）
Y = 绝对值（当前坐标Y - 初始坐标Y）

计算结果X大于Y，则为横向滑动，反之为竖向滑动。

三、滑屏偏移量，缩放动效及下拉动效的数值公式计算

四、动效结束，惯性回弹动效

回弹效果是模拟惯性的曲线运动，由前面代码片断中的 to() 动画函数完成。下面是曲线运动函数：

该方法来源于AlloyTouch组件。

五、存在的待优化问题：

滑屏动效与原生动效在细节上仍是有差异，具体算法有待更进一步的优化。

3、Demo效果演示

至此，顶部的banner图放大的动效已经完成。

除了顶部的banner图能够这样子玩，咱们还尝试了更多花样，例如顶部的slider轮播图也增长下拉放大的动效。因为这里的结构更为复杂，且slider轮播图的内容会改变的，所以放大动效部分的内容也须要保持更换。实现后的效果以下：

注：由于部分安卓性能较差，会影响动画效果，此效果在IOS手机体验效果更佳。

另外，除了在现有元素上作动画，咱们也能够下拉时增长一些有趣的元素，例如彩蛋、品牌元素等，实现方法与上面一致，只是不须要拷贝DOM结构那一步，而是直接写一个须要执行动效的DOM结构。实现后的效果以下：

4、除了下拉动效还能作上滑动效吗？

前面咱们已经实现了下拉动效，那么咱们是否能够继续扩散思路，也能够用在别的场景呢？好比咱们在页面滑到底部时能够拉出一个有趣的动画做为彩蛋。

答案是确定的，Do it！

技术方案与实现

这里下拉动效与上滑动效实现原理基本一致，但不一样的是须要监听页面滚动到底部，而后再触发动效。

部分代码以下：

最后的演示效果演示以下：

5、总结

在体验至上的现今，咱们的产品对体验更是精益求精。面临不一样的产品需求，咱们须要正确选择恰当的技术解决方案，不论是原生开发、H5开发、仍是Hybrid App混合开发，其最终的目的是完美的解决产品需求，没有最好的技术，只有最佳的技术解决方案。