微信小程序文字跑马灯开发

       一.h5实现跑马灯非常简单,

          滚动的文字，配置不同的属性,就能显示各种的效果

       二.小程序中，因为需要跑马灯文字的大小可配置，文字的长度也是动态的，所以文字不同，循环一圈需要的时间也是不同的，使用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)

    },