玩转 H5 下拉上滑动效

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

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

代码节选片段:

要点及说明:

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

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

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

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

2、需判断滑屏方向,避免横向滑动干扰下拉动效。公式计算:

X = 绝对值(当前坐标X - 初始坐标X)
Y = 绝对值(当前坐标Y - 初始坐标Y)

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

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

4、动效结束,惯性回弹动效

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

该方法来源于AlloyTouch组件。

5、存在的待优化问题:

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

三、Demo效果演示

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

除了顶部的banner图可以这样子玩,我们还尝试了更多花样,例如顶部的slider轮播图也增加下拉放大的动效。由于这里的结构更为复杂,且slider轮播图的内容会改变的,因此放大动效部分的内容也需要保持更换。实现后的效果如下:

注:因为部分安卓性能较差,会影响动画效果,此效果在IOS手机体验效果更佳。

另外,除了在现有元素上做动画,我们也可以下拉时增加一些有趣的元素,例如彩蛋、品牌元素等,实现方法与上面一致,只是不需要拷贝DOM结构那一步,而是直接写一个需要执行动效的DOM结构。实现后的效果如下:

四、除了下拉动效还能做上滑动效吗?

前面我们已经实现了下拉动效,那么我们是否可以继续扩散思路,也可以用在别的场景呢?比如我们在页面滑到底部时可以拉出一个有趣的动画作为彩蛋。

答案是肯定的,Do it!

技术方案与实现

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

部分代码如下:

最后的演示效果演示如下:

五、总结

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

时间: 2024-12-19 07:04:13

玩转 H5 下拉上滑动效的相关文章

完美解决微信下拉上拉

转http://note.youdao.com/share/?id=f13df2c846cac5d4f0e24a715d8372a6&type=note#/ 完美解决微信下拉上拉回弹 1.使用jroll.js完美解决,下载jroll.js. 2.DOM结构为: class container 为滑动页面 3.添加css #wrapper { position: absolute; top: 44px; bottom: 0; width: 100%; } 4.编写js <script src=

微信小程序-ios系统-下拉上拉出现白色,如何处理呢?

这几天做小程序,有些页面都是全屏的背景,在安卓上背景是固定的,而在ios上上拉下拉出现白色,测试说体验不太好,一开始我以为是下拉上拉刷新造成的,关闭了依然是这样.为了体验好点,可以按一下解决: 方式一: 可以在page.json文件内配置 :"backgroundColor": "#ccc" 属性,这个方法比较便捷.但是对于一些全屏背景的页面体验还不是很好 方式二: 对于一些全屏背景页面,我们可以让背景固定这样体验会好点,可以按以下进行操作: 1>page.j

移动web js触屏事件 按下 松开 滑动

移动web js触屏事件 按下 松开 滑动讲解 一.触摸事件 ontouchstart ontouchmove ontouchend ontouchcancel 前移动端浏览器均支持这4个触摸事件,包括IE.由于触屏也支持MouseEvent,因此他们的顺序是需要注意的: touchstart → mouseover → mousemove → mousedown → mouseup → click1 /*** onTouchEvent*/ 1 2 3 4 5 6 7 8 9 10 11 12

阻止微信浏览器下拉滑动效果(ios11.3 橡皮筋效果)

在升级到 ios11.3 系统后,发现之前阻止页面滚动的代码e.preventDefault代码失效了.于是自己折腾了一番,找到了解决办法,分享给大家. 一.前言 浏览器在移动端有一个默认触摸滚动的效果,让我们感触最深的莫过于微信浏览器里面,下拉时自带橡皮筋的效果. 然而在开发的时候我们经常需要阻止此效果. 在此先直接给一个方案,直接加上下面的代码即可: document.body.addEventListener('touchmove', function (e) { e.preventDef

手机H5页面,滑动到底部自动加载下一页内容

做公众号项目中有如下场景,一个H5页面有列表数据,不考虑一次加载所有数据,故需要分页操作,解决方案为滑动到底部自动加载下一页内容.直接在H5的js当中实现. 主要使用jquery的scroll()方法: 当用户滚动指定的元素时,会发生 scroll 事件. scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口). scroll() 方法触发 scroll 事件,或规定当发生 scroll 事件时运行的函数. 代码如下: $(window).scroll(function()

玩转HTML5移动页面(动效篇)(转载)

作为一名前端,在拿到设计稿时你有两种选择: 1.快速输出静态页面 2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来 作为一个有志向的前端,当然是选2啦!可是需求时间又很短很短,怎么办呢? 这次就来谈谈一些动画设计的小技巧,能在你时间不多又没有动画想法的时候瞬间让页面增色不少. 同时也会谈及移动端H5页面的优化细节与关键点,因此本文章将分为动效篇和优化篇. ====前方高能==== (1)  CSS3时序错开渐显动画 这是一种比较常用的动画,它的优点是节奏感强,做法就是先让每个元素隐藏,然后

转:玩转HTML5移动页面(动效篇)

作为一名前端,在拿到设计稿时你有两种选择: 1.快速输出静态页面 2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来 作为一个有志向的前端,当然是选2啦!可是需求时间又很短很短,怎么办呢? 这次就来谈谈一些动画设计的小技巧,能在你时间不多又没有动画想法的时候瞬间让页面增色不少. 同时也会谈及移动端H5页面的优化细节与关键点,因此本文章将分为动效篇和优化篇. ====前方高能==== (1)  CSS3时序错开渐显动画 这是一种比较常用的动画,它的优点是节奏感强,做法就是先让每个元素隐藏,然后

H5下拉刷新特效demo,动画流畅

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-wi

H5下拉刷新和上拉加载实现原理浅析

前言 在移动端H5网页中,下拉刷新和上拉加载更多数据的交互方式出现频率很高,开源社区也有很多类似的解决方案,如iscroll,pulltorefresh.js库等.下面是对这两种常见交互基本实现原理的阐述. 实现原理 下拉刷新 实现下拉刷新主要分为三步: 监听原生touchstart事件,记录其初始位置的值,e.touches[0].pageY: 监听原生touchmove事件,记录并计算当前滑动的位置值与初始位置值的差值,大于0表示向下拉动,并借助CSS3的translateY属性使元素跟随手