原标题:【干货】如何实现H5移动端无缝滚动动画
需求分析
哈哈,上动态图真的是一下就明了了。
就是滚动么滚动,那么制作这个有什么方法呢?我们来总结一下:
html骨架
其实很简单,最外面的
- 控制运动,
- 里面是展示动画
基本css样式
先把基本的css样式实现
可以看看大致的样式:
实现思路
一、使用jquery的animate动画 animate()方法
$(selector).animate(styles,speed,easing,callback)
参数:
styles:必需参数,需要产生动画的css样式(使用驼峰式命名)
speed: 规定动画的速度
@number:1000(ms)
@string:"slow","normal","fast"
easing:动画速度(swing,linear)
callback:函数执行完之后的回调函数
看看效果:
二、使用css3的animation动画
通过css3中的关键帧,可以得到跳步的效果。先通过一个短的看一下思路。
初步
如果是写死的获奖,那么需要把前面的那个复制一份到后面去,如果是一个一个滚动那么就复制第一个,如果是两个两个滚动的就复制第一个和第二个。
然后计算需要滚动多少次,一次多少秒,例子是两个两个滚动,需要5s,所以css3的animation的时间是5s。那么@keyframe需要分成几份呢?因为是停顿,每一个滚动都需要两份,最后一个要跳动所以只有一份,所以需要5 * 2 - 1 = 9份,看代码就晓得了:
进阶
如果个数不确定,那么就需要动态的计算,用js动态地添加@keyframes ,到时候只要自己可以计算清楚间隔还有移动的距离就好。
首先获取
- 的长度length
然后计算间隔百分比,因为有停顿所以记得要用秒数×2
然后用字符串拼写@keyframes,0~length,包括length,因为多一个,双数和单数分开。
把
- 中的第一个和第二个克隆到
- 的最后
创建一个
给
- 添加动画属性
话不多说上代码:
三、zepto+transition实现
移动端的zepto没有animate函数,如果不用css3的属性,那如何用js去写?
如果还有别的方法,下次我会不定期更新的。不过移动端的话这几个应该够用了。
作者:顽皮的雪狐七七 著作权归作者所有
链接:https://www.jianshu.com/p/c121d9af043f返回搜狐,查看更多
责任编辑:
- 中的第一个和第二个克隆到