H5移動端獲獎無縫滾動動畫實現

需求分析

哈哈，上動態圖真的是一下就明瞭了。 css

就是滾動麼滾動，那麼製做這個有什麼方法呢？咱們來總結一下:html

html骨架

其實很簡單，最外面的<div>是作固定的窗口，裏面的<ul>控制運動，<li>裏面是展現動畫jquery

<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樣式實現css3

*{
    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;
}
複製代碼

能夠看看大體的樣式: web

實現思路

1、使用jquery的animate動畫

animate()方法

$(selector).animate(styles,speed,easing,callback)數組

參數： styles:必需參數，須要產生動畫的css樣式(使用駝峯式命名)
speed: 規定動畫的速度
@number:1000(ms)
@string:"slow","normal","fast"
easing:動畫速度（swing,linear）
callback:函數執行完以後的回調函數
markdown

$(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動畫

2、使用css3的animation動畫

經過css3中的關鍵幀，能夠獲得跳步的效果。先經過一個短的看一下思路。app

初步

若是是寫死的獲獎，那麼須要把前面的那個複製一份到後面去，若是是一個一個滾動那麼就複製第一個，若是是兩個兩個滾動的就複製第一個和第二個。

<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>
複製代碼

而後計算須要滾動多少次，一次多少秒,例子是兩個兩個滾動，須要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 ，到時候只要本身能夠計算清楚間隔還有移動的距離就好。函數

首先獲取<li>的長度length

而後計算間隔百分比，由於有停頓因此記得要用秒數×2

而後用字符串拼寫@keyframes，0~length，包括length，由於多一個，雙數和單數分開。

把<ul>中的第一個和第二個克隆到<ul>的最後

建立一個<style>標籤加入到<head>中

給<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();
複製代碼

3、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();
複製代碼

若是還有別的方法，下次我會不按期更新的。不過移動端的話這幾個應該夠用了。