animation-text loop playback

1. Declare animation in data: animation. 2. Create an animation instance animation at the right time. 3. Call the method of the instance to describe the animation. For example: 4. After calling the animation operation method, it should be called  to indicate the completion of a group of animations. You can call any number of animation methods in a group of animations. All animations in a group of animations will start at the same time. Step and wx.createAnimation() configuration The parameters are the same; 5. Finally, export the animation data and pass it to the animation of the component through the animation instance method. It is the animation output to make it move Note: the export method will clear the previous animation operation after each calldata:{ animation:{} }
this.animation = wx.createAnimation({})
this.animation.rotate(150).scale(3)
step()
export

<view animation="{
   
   {animation}}" class="animation">
  测试使用——小程序循环播放~~~
</view>

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

/**
   * 生命周期函数--监听页面初次渲染完成
   */
  Page({
  
    /**
     * 页面的初始数据
     */
    data: {
      animation:{}
    },
  
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
  onReady: function() {
    this.animation1();
  },
 
  animation1(){
      var animation1 = wx.createAnimation({
        duration: 5000,
        timingFunction: 'linear',
        transformOrigin:"100% 0 0"
      })
      animation1.translateX('-100%').step();
      this.setData({
        animation:animation1.export(),
      })
      //设置循环动画
      this.animation = animation1;
      setInterval(function(){
        //第二个动画 文字位置初始化
        this.animation2();
        //延迟播放滚动动画（效果会更好点）
        setTimeout(function(){
          this.animation.translateX('-100%').step();
          this.setData({
            animation: animation1.export(),
          })
        }.bind(this),200);
      }.bind(this),5000);
 
  },
 
  /**
   * 第二个动画 文字位置初始化
   */
  animation2(){
    var animation2 = wx.createAnimation({
      duration: 0,
      timingFunction: 'linear',
      transformOrigin:"100% 0 0"
    })
    animation2.translateX('100%').step();
    this.setData({
      animation:animation2.export(),
    })
  },
 
  /**
   * 解决小程序退出、隐藏后台动画停止
   */
  onHide: function () {
    //解决小程序退出、隐藏后台动画停止
    //重新触发动画方法即可
    this.bindAnimation();
}
})