微信小程序使用animation动画实现消息从左向右滚动

<view id="notice" style="overflow:hidden;position: relative;height:50rpx;margin:0 50rpx;">
  <view id="notice-txt" style="white-space: nowrap;position: absolute;" animation="{{animationData}}">足协杯战线连续第2年上演广州德比战足协杯战线连续第2年上演广州德比战足协杯战线连续第2年上演广州德比战</view>
</view>
<view bindtap="startAnimation">移动</view>

  initAnimation(){
    wx.nextTick(() => {
      //获取外部容器和滚动内容的宽度
      const query = wx.createSelectorQuery();
      query.select('#notice').boundingClientRect(rect=>{
        this.data.wrapWidth = parseInt(rect.width);
      }).exec();
      query.select('#notice-txt').boundingClientRect(rect=>{
        this.data.contentWidth = parseInt(rect.width);
      }).exec();
    })
  },
  startAnimation(){
    const {wrapWidth,contentWidth} = this.data;
    let duration = contentWidth / 20 * 200; //每次滚动的时间

    let timer = null;
    timer&&clearTimeout(timer);
    //设置滚动内容在右侧的初始位置
    this.setData({
      animationData:wx.createAnimation({duration: 0}).translateX(wrapWidth).step().export()
    });
    //设置滚动内容最终的位置
    setTimeout(()=>{
      this.setData({
        animationData:wx.createAnimation({duration: duration}).translateX(-contentWidth).step().export()
      });
    },20)
    //滚动一次完成后开始下一次的滚动
    timer = setTimeout(()=>{
      this.startAnimation();
    },duration+1000)
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.initAnimation();
  },