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

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;
}

效果图: