本文通過例項anSMRw為大家分享了小程式實現文字迴圈滾動的具體程式碼，供大家參考，具體內容如下

解決問題：

1、文字迴圈播放特效

2、小程式退出、隱藏後臺動畫停止（已解決）

效果：

程式碼：

wxml

<view animation="{{animatiwww.cppcns.comon}}" class="animation">
  919測試使用——小程式迴圈播放~~~
</view>

wxss

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

最後js

/**
   * 生命週期函式--監聽頁面初次渲染完成
   */
  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(),})
      //設定迴圈動畫
      thhttp://www.cppcns.com
 
is.animation = animation;
      setInterval(function(){
        //第二個動畫 文字位置初始化
        this.Animation2();
 
        //延遲播放滾動動畫（效果會更好點）
        setTimeout(function(){
          this.animation.translateX('-100%').step();
          this.setData({
            animation: animation.export(),})
        }.bind(this),200);
 
        
      }.bind(this),5000);
 
  },/**
   * 第二個動畫 文字位置初始化
 
程式設計客棧   */
  Animation2(){
    var this_ = this;
    var animation2 = wx.createAnimation({
      duration: 0,transformOrigin:"100% 0 0"
    })
    animation2.translateX('100%').step();
    this_.setData({
      animation:animation2.export(),})
  },/**
   * 解決小程式退出、隱藏後臺動畫停止
   */
  onHide: function () {
   程式設計客棧 //解決小程式退出、隱藏後臺動畫停止
    //重新觸發動畫方法即可
    this.bindAnimation();
},

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。