本文介紹了Html5行動裝置獲獎無縫滾動動畫實現範例,分享給大家,具體如下:
需求分析
哈哈,上動態圖真的是一下就明了。
就是滾動麼滾動,那麼製作這個有什麼方法呢?我們來總結一下:
html骨架其實很簡單,最外面的<div>是做固定的窗口,裡面的<ul>控制運動,<li>裡面是展示動畫
<div class=roll id=roll> <ul> <li>第一個結構</li> <li>第二個結構</li> <li>第三個結構</li> <li>第四個結構</li> <li>第五個結構</li> <li>第六個結構</li> <li>第七個結構</li> <li>第八個結構</li> </ul></div>基本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.如果是寫死的獲獎,那麼需要把前面的那個複製一份到後面去,如果是一個一個滾動那麼就複製第一個,如果是兩個兩個滾動的就複製第一個和第二個。
<div 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></div>
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), //取得第一個元素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();如果還有別的方法,下次我會不定期更新的。不過移動端的話這幾個應該夠用了。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VeVb武林網。