輪播動畫簡單實現

輪播動畫簡單實現

現在的前端，越來越注重用戶交互和體驗，有很多動畫和效果是很常見的，如本篇要講的主題：輪播動畫。這和以前經常聽到的一個名詞–”跑馬燈“效果一樣。在CSS3出來之前，都是通過JavaScript實現的動畫，現在我們完全可以使用CSS3，性能有很大的提升，兼容性也已經很不錯，尤其是移動端。

JavaScript與輪播

首先看看Js實現：

html結構如下：

    <h2>Js實現</h2>
    <div class="wrapper-js">
        <div class="container-js marquee">
            <p>今天</p>
            <p>明天</p>
            <p>后天</p>
            <p>今天</p><!-- 輔助元素，為實現循環輪播 -->
        </div>
    </div>

Js代碼：

    <script type="text/javascript">
        /**


     * [marquee 輪播效果]
     * @param  {[type]} ele      [輪播元素容器]
     * @param  {[type]} delay    [輪播間隔時間]
     * @param  {[type]} duration [輪播動畫時間]
     * @return {[type]}          [description]
     */
    function marquee(ele, delay, duration) {
        if (!ele) {
            return false;
        }

        delay = delay || 2000;
        duration = duration || 500;
        var height = ele.clientHeight;
        var active = true;
        var len = ele.querySelectorAll('p').length - 1;

        setTimeout(function() {
                active = true;
            ele.scrollTop = 1;// 開始動畫
            setInterval(function() {// 一個一個元素輪播
                if (!active) return;

                if (ele.scrollTop % height === 0) {
                // 當有某一元素輪播完成時，重置active，并開始下一元素的輪播
                    active = false;
                    setTimeout(function() {
                        active = true;
                        ele.scrollTop += 1;
                    }, delay);
                    if (ele.scrollTop == len * height) {
                        ele.scrollTop = 0;
                    }
                } else {
                    // 通過scrollTop值實現輪播滾動效果
                    ele.scrollTop += 1;
                }
            }, duration / height);
        }, delay);
    }

    marquee(document.querySelector('.marquee'));
</script></code></pre> 

通過以上代碼可以看出，其主要使用元素的scrollTop值不斷改變實現輪播滾動效果，同時為了達到循環輪播效果，必須在最后添加一個重復輔助元素。
 
  
CSS3實現
 
  
CSS3實現動畫性能會有極大提升，特別是當頁面動畫較多或定時器較多時。
 
  
html結構：
 
  
    <h2>CSS實現</h2>
    <div class="wrapper-css">
        <div class="container-css marquee">
            <p>今天</p>
            <p>明天</p>
            <p>后天</p>
            <p>今天</p><!-- 輔助元素，為實現循環輪播 -->
        </div>
    </div>
 
  
可以看到，依然需要在后面添加一個重復輔助元素，實現循環輪播效果。
 
  
CSS代碼：
 
  
    // 輪播動畫
        @-webkit-keyframes marquee {
            0% {
                -webkit-transform: translate3d(0, 0, 0);
            }
            27% {
                -webkit-transform: translate3d(0, 0, 0);
            }
            33% {
                -webkit-transform: translate3d(0, -100%, 0);
            }
            60% {
                -webkit-transform: translate3d(0, -100%, 0);
            }
            67% {
                -webkit-transform: translate3d(0, -200%, 0);
            }
            94% {
                -webkit-transform: translate3d(0, -200%, 0);
            }
            100% {
                -webkit-transform: translate3d(0, -300%, 0);
            }
        }
        @keyframes marquee {
            0% {
                transform: translate3d(0, 0, 0);
            }
            /* 100/3 * (2s/2.5s) => 26.7% => 27% */
            27% {
                transform: translate3d(0, 0, 0);
            }
            /* 100/3 =>33.3 => 33% */
            33% {
                transform: translate3d(0, -100%, 0);
            }
            60% {
                transform: translate3d(0, -100%, 0);
            }
            67% {
                transform: translate3d(0, -200%, 0);
            }
            94% {
               transform: translate3d(0, -200%, 0);
            }
            100% {
                transform: translate3d(0, -300%, 0);
            }
        }
        .wrapper-css {
            width: 200px;
            height: 30px;
            margin: 10px;
            overflow: hidden;
        }

        .container-css {
            height: 30px;
            -webkit-animation: marquee 7.5s linear infinite;/* 2.5s(2s + 0.5s) * 3 => 7.5s */
            animation: marquee 7.5s linear infinite;
        }
        .container-css p {
            width: 100%;
            height: 30px;
            margin: 0;
            line-height: 30px;
            font-size: 18px;
        }
 
  
如上，我們使用CSS3定義動畫關鍵幀，并結合transform位移實現無縫輪播動畫，通過移動容器實現輪播效果，主要需要根據輪播元素計算動畫關鍵幀點。
 
  
 
 
  
來自：http://blog.codingplayboy.com/2017/03/14/marquee/