第一次分享 给我一个赞吧

人帅话不多 直接上代码

html

<view class='announcement-text' id="announcement-text" bindtransitionend='animationend' style="padding-left: {{ScreenWidth}}px;" animation="{{animationData}}"> {{notice_content}}</view>

绑定动画结束事件
bindtransitionend='animationend’

js

创建动画

initNoticeAnimation() {
            let that = this;
            this.createSelectorQuery().select('#announcement-text').boundingClientRect(function (rect) {
                let width = rect.width;  //获取公告view容器的宽度
                let hasStrLen = Math.ceil(width); 
                //动画时长， 为啥是10，这个凭感觉，越大越慢，自己调试取合适的倍数
                let timeT = hasStrLen * 10; 
                //创建动画实例
                var animation = wx.createAnimation({
                    //此处以公告内容来设置动画持续时间（duration：决定整个动画播放的速度）
                    duration: timeT,
                    timingFunction: 'linear'
                });
                animation.translate(-Number(hasStrLen), 0).step();
                that.setData({
                    hasStrLen: hasStrLen,
                    timeT: timeT,
                    animationData: animation.export(),
                    animation: animation
                });
            }).exec();
            
        },

循环动画（关键）

animationend() {
            let that = this;
            //复位容器的位置，准备开始下一次动画
            that.data.animation.translate(0, 0).step({duration: 0}); 
            that.setData({
                animationData: that.data.animation.export()
            }, ()=>{
            	//开始新一轮动画
                let animation = wx.createAnimation({
                    //此处以公告最长内容来设置动画持续时间（duration：决定整个动画播放的速度）
                    duration: that.data.timeT,
                    timingFunction: 'linear'
                });
                animation.translate(-Number(that.data.hasStrLen), 0).step();
                that.setData({
                    animationData: animation.export()
                });
            });
            
        },