Mini Program to Implement Text Circular Scrolling Animation

<view animation="{{animation}}" class="animation">
  919 test use - small program loop playback~~~
</view>

.animation{
  width: 100%;
  transform: translateX(100%);
  position: fixed;
  top: 45%;
  font-size: 16px;
  font-weight: bold;
}

/**
   * Life cycle function - listen for the completion of the initial rendering of the page*/
  onReady: function () {
    this.bindAnimation();
  },
 
  bindAnimation(){
    var this_ = this;
      var animation = wx.createAnimation({
        duration: 5000,
        timingFunction: 'linear',
        transformOrigin:"100% 0 0"
      })
      animation.translateX('-100%').step();
      this.setData({
        animation:animation.export(),
      })
      //Set up loop animation this.animation = animation;
      setInterval(function(){
        //The second animation text position initialization this.Animation2();
 
        // Delay the scrolling animation (the effect will be better)
        setTimeout(function(){
          this.animation.translateX('-100%').step();
          this.setData({
            animation: animation.export(),
          })
        }.bind(this),200);
 
        
      }.bind(this),5000);
 
  },
 
  /**
   * Initialize the second animation text position*/
  Animation2(){
    var this_ = this;
    var animation2 = wx.createAnimation({
      duration: 0,
      timingFunction: 'linear',
      transformOrigin:"100% 0 0"
    })
    animation2.translateX('100%').step();
    this_.setData({
      animation:animation2.export(),
    })
  },
 
  /**
   * Solve the problem of mini program exit and background animation stopping */
  onHide: function () {
    //Solve the problem of mini program exit and background animation stopping //Re-trigger the animation method this.bindAnimation();
},