小程序实现循环滚动播放文字

uni-app小程序实现滚动播放文字效果

HTML结构:

<view>
    <view id="box">
        <text id="text" :animation="animation">
            开始testtesttesttesttesttest到底
        </text>
    </view>
</view>

JS:

data() {
            return {
                animationObj: {},
                animation: {}
            }
        },
        methods: {
            loadAnimation() { //初始化动画函数
                let that = this;
                let query = wx.createSelectorQuery();   //创建选择器
                query.select('#box').boundingClientRect(); //获取盒子大小位置等信息的请求（未发送的请求）
                query.select('#text').boundingClientRect(); //同上
                query.exec(function(res){   //发送以上请求，返回的是所有请求的结果数组
                    console.log('请求结果',res);
                    let boxWidth = res[0].width;  //获取外盒子的宽度
                    let textWidth = res[1].width;  //获取文字长度
                    if(boxWidth<textWidth) {  //如果文字超出盒子，就滚动播放
                        that.animationObj = wx.createAnimation(); //创建一个动画实例 animation
                        that.startAnimation(boxWidth,textWidth);
                    }
                })
            },
            startAnimation(boxWidth,textWidth,step) { //执行动画函数
                let that = this;
                console.log('执行动画开始');
                step == undefined && (step = 0); //第一次进入的时候判断step为0,step只有两种状态，播放滚到最左边(step为0或者2的倍数)和滚到最后边
                let speed = 12; //滚动速度
                let duration = (textWidth-boxWidth)*1000/speed; //滚动的持续时间
                this.animationObj.translateX((!step || step%2==0)?(boxWidth-textWidth):0).step({duration}); //.step执行动画,duration参数为持续时间
                this.animation = this.animationObj.export(); //export 方法导出动画数据传递给组件的 animation 属性,执行完export会清除上一次动画
                this.$nextTick(()=>{ //等dom更新完成后再执行，dom渲染的过程是异步的
                    setTimeout(()=>{ //等动画执行完再进行下一次动画
                        that.startAnimation(boxWidth,textWidth,++step);
                    },duration)
                })
            }
        },
        onLoad(params) {
            this.$nextTick(()=>{
                this.loadAnimation()
            })
        }

CSS：

#box {
    font-weight: bold;
    font-size: 40upx;
    white-space: nowrap;
    width:200upx;
    height:80upx;
    position: relative;   //设置定位才能生效,父元素相对定位
    overflow: hidden;
    background-color: aquamarine;
}
#text {
    color: #000;
    height:80upx;
    display: flex;
    align-items: center;
    position: absolute;  //设置定位才能生效,子元素绝对定位
    line-height: 1em;
}

效果图: