【小程序可用】CSS3 animation 實現的跑馬燈

最近有個項目裏面用到跑馬燈，網上搜了下，雖然有人貼出來過一些實現，可是實際上都存在一些個問題。

哎，再造個輪子吧。

先放個效果：

p.s. 若是能訪問jsfiddle最好：https://jsfiddle.net/650spwen/

主要原理

微信小程序如今實際上仍是用的webview，裏面搞動畫效率最高的莫過於使用CSS3的animation了。

跑馬燈無非就是一直滾動，這很容易想到使用無限循環的animation.

而一直往左滾動的效果，經過css有不少種方式，好比經過改變left, margin-left, tranform: translateX()均可以實現。可是 left 和 margin-left 通常會致使佈局的從新計算。使用transform: translateX()性能會更好一些。

主要實現代碼

首先，視圖模板wxml中：

<view>css3 + animation跑馬燈</view>

<view class="marquee">
    <view class="content">
        <text>{{text}}</text> <text style="display: inline-block; width: 5em;"></text>
        <text>{{text}}</text> <text style="display: inline-block; width: 5em;"></text>
        <text>{{text}}</text> <text style="display: inline-block; width: 5em;"></text>
    </view>
</view>

這裏爲了連續無限滾動，特地複製了2份跑馬燈的內容（.content)。

而後，樣式wxss中：

@keyframes kf-marque-animation{ 0% { transform: translateX(0); } 100% { transform: translateX(-33.3%); } }
.marquee{
    width: 100%;
    height: 44px;
    line-height: 44px;
    background: #fff;
    border: none;
    display: block;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
    position: relative;
    font-size: 28rpx;
}
.marquee .content{
    display: inline-block;
    position: relative;
    padding-right: 0px;
    animation: kf-marque-animation 11.3s linear infinite;
    white-space: nowrap;
}

最後，js裏面隨便給 page.data.text 賦值一段文本便可。具體js略。

若是要調整滾動速度，能夠設置 .content 的元素的動畫時間（ animation-duration 樣式）。因爲微信小程序中沒法獲取到對應元素的寬度，這個時間只能寫死或者根據text的長度估算出一個值。

完整的示例在jsfiddle上有個html版本的：https://jsfiddle.net/650spwen/