Html5移动端获奖无缝滚动动画实现
本文介绍了Html5移动端获奖无缝滚动动画实现示例,分享给大家,具体如下:
需求分析
哈哈,上动态图真的是一下就明了了。
就是滚动么滚动,那么制作这个有什么方法呢?我们来总结一下:
html骨架
其实很简单,最外面的p> 是做固定的窗口,里面的ul> 控制运动,li> 里面是展示动画
p class="roll" id="roll"> ul> li> 第一个结构/li> li> 第二个结构/li> li> 第三个结构/li> li> 第四个结构/li> li> 第五个结构/li> li> 第六个结构/li> li> 第七个结构/li> li> 第八个结构/li> /ul> /p>
基本css样式
先把基本的css样式实现
*{ margin:0; padding:0; } .roll{ margin: 100px auto; width: 200px; height: 40px; overflow:hidden; border: 1px solid aquamarine; } .roll ul{ list-style: none; } .roll li{ line-height:20px; font-Size:14px; text-align:center; }
可以看看大致的样式:
实现思路
一、使用jquery的aniMATE动画
animate()方法
$(selector).animate(styles,sPEed,easing,callback)
参数:
styles:必需参数,需要产生动画的css样式(使用驼峰式命名)
speed: 规定动画的速度
@number:1000(ms)
@string:"slow","normal","fast"
easing:动画速度(swing,linear)
callback:函数执行完之后的回调函数
$(document).ready(function(){ setInterval(function(){ // 添加定时器,每1.5s进行转换 $("#roll").find("ul:First").animate({ marginTop:"-40px" //每次移动的距离 } ,500,function(){ // 动画运动的时间 //$(this)指的是ul对象, //ul复位之后把第一个元素和第二个元素插入 //到ul的最后一个元素的位置 $(this).css({ marginTop:"0px"} ).find("li:first").appendTo(this); $(this).find("li:first").appendTo(this); } ); } ,1500) } );
看看效果:
二、使用css3的animation动画
通过css3中的关键帧,可以得到跳步的效果。先通过一个短的看一下思路。
初步
1.如果是写死的获奖,那么需要把前面的那个复制一份到后面去,如果是一个一个滚动那么就复制第一个,如果是两个两个滚动的就复制第一个和第二个。
p class="roll" id="roll"> ul> li> 第一个结构/li> li> 第二个结构/li> li> 第三个结构/li> li> 第四个结构/li> li> 第五个结构/li> li> 第六个结构/li> li> 第七个结构/li> li> 第八个结构/li> li> 第一个结构/li> li> 第二个结构/li> /ul> /p>
2.然后计算需要滚动多少次,一次多少秒,例子是两个两个滚动,需要5s,所以css3的animation的时间是5s。那么@keyframe需要分成几份呢?因为是停顿,每一个滚动都需要两份,最后一个要跳动所以只有一份,所以需要5 * 2 - 1 = 9份,看代码就晓得了:
/*这里不做兼容性处理*/.roll ul{ list-style: none; animation: ani 5s linear infinITe; /*动画ani,5s,循环匀速播放*/} @keyframes ani{ 0%{ margin-top: 0; } 12.5%{ margin-top: 0; } 25%{ margin-top: -40px; } 37.5%{ margin-top: -40px; } 50%{ margin-top: -80px; } 62.5%{ margin-top: -80px; } 75%{ margin-top: -120px; } 87.5%{ margin-top: -120px; } 100%{ margin-top: -160px; /*最后是一个,这样可以打断动画*/ } }
进阶
如果个数不确定,那么就需要动态的计算,用js动态地添加@keyframes ,到时候只要自己可以计算清楚间隔还有移动的距离就好。
1.首先获取li>
的长度length
2.然后计算间隔百分比,因为有停顿所以记得要用秒数×2
3.然后用字符串拼写@keyframes,0~length,包括length,因为多一个,双数和单数分开。
4.把ul>
中的第一个和第二个克隆到ul>
的最后
5.创建一个style>
标签加入到head>
中
6.给ul>
添加动画属性
话不多说上代码:
function addKeyFrame(){ VAR ulObj = $("#roll ul"), //获取ul对象 length = $("#roll li").length, //获取li数组长度 per = 100 / (length / 2 * 2 ); //计算中间间隔百分比 // 拼接字符串 var keyframes = `\ @keyframes ani{ `; for(var i = 0 ; i=length ; i++ ){ keyframes+=`${ i * per} %{ margin-top: ${ i % 2 == 0 ? -i * 20 : -(i - 1) * 20} px; } `; } keyframes+='} '; var liFirst = $("#roll li:first"), //@R_438_777@ liSec = liFirst.next(); //获取第二个元素 ulObj.append(liFirst.clone()).append(liSec.clone()); //将两个元素插入到ul里面 $("style> ").attr("type","text/css").html(keyframes).appendTo($("head")); //创建style标签把关键帧插入到头部 ulObj.css("animation","ani 5s linear infinite"); //给ul添加css3动画 } addKeyFrame();
三、zepto+transition实现
移动端的zepto没有animate函数,如果不用css3的属性,那如何用js去写?
var timer,top; function roll(){ var ulObj = $("#roll").find("ul"), length = $("#roll li").length, liFirst = $("#roll").find("li:first"); liSec = liFirst.next(); ulObj.append(liFirst.clone()).append(liSec.clone()); //把第一个第二个都添加到ul> 标签中 clearInterval(timer); timer = setInterval(function(){ //设置定时器 var top = ulObj.css("margin-top"); top = +top.slice(0,-2); if(top != -(20 * length)){ //获取现在的高度如果没有到最后就上移 top -= 40; ulObj.css({ "-webkit-transition":"all 1s","transition":"all 1s","margin-top":top} ); } else{ //如果到了最后就迅速到零 top = 0; ulObj.css({ "-webkit-transition":"none","transition":"none","margin-top":top} ); setTimeout(function(){ //这里加一个延时器,也是要放在队列最后去执行,为了避免两个动画合并 top -= 40; ulObj.css({ "-webkit-transition":"all 1s","transition":"all 1s","margin-top":top} ); } ,0) } } ,2000); } roll();
如果还有别的方法,下次我会不定期更新的。不过移动端的话这几个应该够用了。
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
利用HTML5 canvas实现打飞机游戏
HTML5 Canvas实现绘制一个像素宽的细线
如何使用canvas实现图片马赛克
以上就是Html5移动端获奖无缝滚动动画实现的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: Html5移动端获奖无缝滚动动画实现
本文地址: https://pptw.com/jishu/584264.html