一.h5实现跑马灯非常简单,
<marquee>滚动的文字</marquee>,配置不同的属性,就能显示各种的效果
二.小程序中,因为需要跑马灯文字的大小可配置,文字的长度也是动态的,所以文字不同,循环一圈需要的时间也是不同的,使用css3中的动画功能的话,animation: 动画name 4s linear infinite;其中的动画时间不能控制。
三.使用小程序的动画能力,var animation1 = wx.createAnimation(options),创建一个动画对象,但是小程序默认是不能循环动画的,然后使用let interval = setInterval(),根据动画状态进行判断,设置循环,但是小程序第一次执行动画时,却需要等一小段间隔时间。
最终解决方案:
使用css属性中的left,结合定时器和递归,以及设置文字不换行,并计算文字的length*size.注意事项:页面的加载与销毁过程中,注意清除定时器
//创建祝福语动画
createBlessActive() {
this.length = this.blessWord.length * this.size //文字长度
this.windowWidth = wx.getSystemInfoSync().windowWidth // 屏幕宽度
var that = this
that.marqueeDistance = 750
this.intervalBless = setInterval(function() {
//文字一直移动到末端
if (-that.marqueeDistance < that.length * 2) {
//文字移动距离小于文字长度
that.marqueeDistance = that.marqueeDistance - that.marqueePace * 2
console.log('文字移动距离:' + that.marqueeDistance)
that.bStyle = that.orientation + ':' + that.marqueeDistance + 'rpx'
console.log('bStyle', that.bStyle)
} else {
clearInterval(that.intervalBless)
that.marqueeDistance = 750
console.log('bStyle', that.bStyle)
that.createBlessActive()
}
}, 20)
},