uni-app小程序实现滚动播放文字效果
HTML结构:
开始testtesttesttesttesttest到底
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
that.animationObj = wx.createAnimation(); //创建一个动画实例 animation
that.startAnimation(boxWidth,textWidth);
}
})
},
startAnimation(boxWidth,textWidth,step) { /