テキストの円形スクロールアニメーションを実装するミニプログラム

<view animation="{{animation}}" class="animation">
  919 テスト使用 - 小さなプログラムのループ再生~~~
</ビュー>

。アニメーション{
  幅: 100%;
  変換: translateX(100%);
  位置: 固定;
  上位: 45%
  フォントサイズ: 16px;
  フォントの太さ: 太字;
}

/**
   * ライフサイクル関数 - ページの初期レンダリングの完了を待機します*/
  onReady: 関数 () {
    this.bindAnimation();
  },
 
  バインドアニメーション(){
    var this_ = これ;
      var アニメーション = wx.createAnimation({
        期間: 5000、
        タイミング関数: 'linear'、
        変換元:"100% 0 0"
      })
      アニメーション.translateX('-100%').step();
      this.setData({
        アニメーション:アニメーション.エクスポート(),
      })
      //ループアニメーションを設定します this.animation = animation;
      setInterval(関数(){
        // 2 番目のアニメーション テキスト位置の初期化 this.Animation2();
 
        // スクロールアニメーションを遅らせる（効果はより良くなります）
        setTimeout(関数(){
          this.animation.translateX('-100%').step();
          this.setData({
            アニメーション: animation.export(),
          })
        }.bind(これ),200);
 
        
      }.bind(これ),5000);
 
  },
 
  /**
   * 2番目のアニメーションテキストの位置を初期化します*/
  アニメーション2(){
    var this_ = これ;
    var animation2 = wx.createAnimation({
      期間: 0,
      タイミング関数: 'linear'、
      変換元:"100% 0 0"
    })
    アニメーション2.translateX('100%').step();
    this_.setData({
      アニメーション:animation2.export(),
    })
  },
 
  /**
   * ミニプログラムの終了とバックグラウンドアニメーションの停止の問題を解決します */
  onHide: 関数 () {
    // ミニプログラムの終了とバックグラウンド アニメーションの停止の問題を解決します // アニメーション メソッドを再度トリガーします this.bindAnimation();
},