Html5行動端獲獎無縫滾動動畫實現

這篇文章主要介紹了Html5行動裝置獲獎無縫滾動動畫實現範例，內容挺不錯的，現在分享給大家，也給大家做個參考。

本文介紹了Html5行動裝置獲獎無縫滾動動畫實現範例，分享給大家，具體如下：

需求分析

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

就是滾動麼滾動，那麼製作這個有什麼方法呢？讓我們來總結一下:

html骨架

其實很簡單，最外面的e388a4556c0f65e1904146cc1a846bee是做固定的窗口，裡面的ff6d136ddc5fdfeffaf53ff6ee95f185控制運動，25edfb22a4f469ecb59f1190150159c6裡面是展示動畫

<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;
}

可以看看大致的樣式:

#實現想法

##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.首先取得25edfb22a4f469ecb59f1190150159c6的長度length2.然後計算間隔百分比，因為有停頓所以記得要用秒數×2

3.然後用字串拼字@keyframes ，0~length，包括length，因為多一個，雙數和單數分開。 ###4.把ff6d136ddc5fdfeffaf53ff6ee95f185中的第一個和第二個克隆到ff6d136ddc5fdfeffaf53ff6ee95f185的最後###5.創建一個c9ccee2e6ea535a969eb3f532ad9fe89標籤加入到93f0f5c25f18dab9d176bd4f6de5d30e中###6 .給ff6d136ddc5fdfeffaf53ff6ee95f185加上動畫屬性######話不多說上程式碼：###

   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+=&#39;}&#39;;
       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();

###如果還有別的方法，下次我會不定期更新的。不過移動端的話這幾個應該夠用了。 ######以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！ ######相關推薦：#########利用HTML5 Canvas實作打飛機遊戲###############HTML5 Canvas實作繪製一個像素寬的細線###############如何使用canvas實作圖片馬賽克#####################

以上是Html5行動端獲獎無縫滾動動畫實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！