小程序?qū)崿F(xiàn)文字循環(huán)滾動(dòng)動(dòng)畫

更新時(shí)間：2021年06月14日 12:02:03 作者：編程改變?nèi)松?

這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)文字循環(huán)滾動(dòng)動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文通過實(shí)例為大家分享了小程序?qū)崿F(xiàn)文字循環(huán)滾動(dòng)的具體代碼，供大家參考，具體內(nèi)容如下

解決問題：

1、文字循環(huán)播放特效

2、小程序退出、隱藏后臺(tái)動(dòng)畫停止（已解決）

效果：

代碼：

wxml

<view animation="{{animation}}" class="animation">
  919測(cè)試使用——小程序循環(huán)播放~~~
</view>

wxss

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

最后js

/**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   */
  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(),
      })
      //設(shè)置循環(huán)動(dòng)畫
      this.animation = animation;
      setInterval(function(){
        //第二個(gè)動(dòng)畫 文字位置初始化
        this.Animation2();
 
        //延遲播放滾動(dòng)動(dòng)畫（效果會(huì)更好點(diǎn)）
        setTimeout(function(){
          this.animation.translateX('-100%').step();
          this.setData({
            animation: animation.export(),
          })
        }.bind(this),200);
 
        
      }.bind(this),5000);
 
  },
 
  /**
   * 第二個(gè)動(dòng)畫 文字位置初始化
   */
  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(),
    })
  },
 
  /**
   * 解決小程序退出、隱藏后臺(tái)動(dòng)畫停止
   */
  onHide: function () {
    //解決小程序退出、隱藏后臺(tái)動(dòng)畫停止
    //重新觸發(fā)動(dòng)畫方法即可
    this.bindAnimation();
},

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: