文 | Javin

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

一、背景

在我们的日常项目中，也会遇到这样的需求，在当前环境下，此类效果大多是靠原生来实现的，但是用原生实现有不少缺陷，原因如下：

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

那么我们的H5页面能否实现呢？下面和大家一起来探索。

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

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

下拉动效可以分解为两部分：

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

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

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

要解决这些问题，可以采用如下方案：

1，保持页面的原生滚动，只有在顶部下拉事件中，才触发动效执行;

2，用JS拷贝DOM结构，使动效结构与页面结构解耦，互不影响;

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

二、技术实现

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

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

代码节选片段：

要点及说明：

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

该技术要点是阻止默认事件的下拉，从而将下拉事件绑定到我们的动效中。阻止默认事件我们一般可以这样子处理：