微信小程序循环播放公告

wxml:

<view class='v1' >
<view class='t' animation="{{animationData}}">
 {{text}}
</view></view>

wxss:

.v1{
  width: 350px;
  margin: 0 auto;
  line-height: 50rpx;
  background-color: pink;
  overflow: hidden;
  white-space: nowrap;
  
}
.t{
  width: 100%;
  font-size: 28rpx;
  white-space: nowrap;
}

js:

	var _this=this;
    var animation = wx.createAnimation({
      duration: 18000,
      delay:0
    })
    animation.translateX(350).step()
    this.setData({
      animationData: animation.export()
    })
    setInterval(function () {
      animation.translateX(-this.data.text.length*12).step()   //12与字体大小有关
      animation.translateX(350).step({duration:0})   //瞬间复位
      this.setData({
        animationData: animation.export()
      })
    }.bind(this), 100) // 循环时间短是为了减少延迟，按理会使公告移动速度会变低，实际并没有,很不理解。