一、需求

• 公告文字僅限200字
• 公告內容僅限一行文字顯示
• 公告內容持續滾動

二、解決思路

• 使用動畫API（Animation.translate），完成移動動畫
• 使用定時器API（setInterval）,完成迴圈播放動畫

注意：

1. 微信小程式的動畫APItranslate,只有動畫效果還原後，才能進行第二次動畫
2. 根據第一條，需要兩個定時器：
   第一個定時器：用於迴圈復原動畫效果
   第二個定時器：用於迴圈播放動畫效果
3. 兩個定時器的執行回撥函式之間的時間間隔不能相同，否則會導致動畫無法正常播放
4. 因為動畫的偏移距離由公告內容長度決定，造成了動畫播放速度與公告內容相關。
   （動畫的duration: 1000
   ：表示在該時間段內播放完整組動畫）

三、實現效果

1.字幕第一次開始公告旁邊（從右向左）滾動

2.字幕第二次從螢幕左邊從右向左）滾動

三、實現程式碼

1.wxml

    <view class='width border-box f-pl30 f-pr30 f-mt30 f-mb30'>
        <form report-submit="true" bindsubmit="bindOpenAnnouncement">
            <button class='btn-reset flex announcement order-box f-pl25 f-pr25' form-type="submit">
                <view class='f-pl25 f-font24 f-pr25'>公告</view>
                <view class='f-font24 s-32 announcement-context'>
                    <view animation="{{animationData}}" class="f-font24 s-32 announcement-text f-text-left">{{announcementText}}</view>
                </view>
            </button>
        </form>
    </view>
 

2.wxss（此處只展示關鍵樣式，其餘為基本樣式不做展示）

.announcement {
    color: #a0a0a0;
    background: #fff0e3;
    border-radius: 6rpx;
    line-height: 66rpx;
    height: 66rpx;
}
.announcement-context {
    width: 580rpx;
    /* 偏移出文字框的內容隱藏掉 */
    overflow: hidden;
}
.announcement-text {
    width: 570rpx;
    /* 文字內容只做一行顯示 */
    white-space: nowrap;
}
 

3.js

   data: {
        animationData: {}, //公告動畫
        announcementText: "營業時間從早上10點到晚上8點，支援預先下單，祝用餐愉快",//公告內容
    },

    onLoad: function(options) {
        var that = this;
        //建立動畫例項
        var animation = wx.createAnimation({
            //此處以公告最長內容來設定動畫持續時間（duration：決定整個動畫播放的速度）
            duration: 90000,
            timingFunction: 'linear'
        });
        //偏移距離為公告內容的長度*字型大小（若字型大小使用rpx需要換算成px）
        animation.translate(-Number(this.data.announcementText.length * 12),0).step();
        this.setData({
            animationData: animation.export()
        });
        // 迴圈播放動畫關鍵步驟（使用兩個定時器）
        // 第一個定時器：將字幕恢復到字幕開始點（為螢幕左邊）
        this.recoveraAnimation = setInterval(function() {
            animation.translate(255,0).step({duration:0});
            this.setData({
                animationData: animation.export()
            });
        }.bind(this), 90000);
        // 第二個定時器：重新開始移動動畫
        this.restartAnimation = setInterval(function() {
            animation.translate(-Number(this.data.announcementText.length * 12),0).step();
            this.setData({
                animationData: animation.export()
            });
        }.bind(this), 90001);
    },
    onUnload: function(){
        //清除定時器
        clearInterval(this.recoveraAnimation);
        clearInterval(this.restartAnimation);
    },