一.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)
},
