雪狐html5,【干货】如何实现H5移动端无缝滚动动画

原标题：【干货】如何实现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返回搜狐，查看更多

  责任编辑：