我在入口頁做了一個(gè)圓從里向外擴(kuò)大循環(huán)往復(fù)的canvas動(dòng)畫效果，在開發(fā)工具測試是沒有問題的，然后在真機(jī)測試時(shí)發(fā)現(xiàn)第一次進(jìn)入也是沒有問題的，但是若是在使用中退出小程序再進(jìn)入就會(huì)出現(xiàn)動(dòng)畫的效果變得非常的快，下面是簡單的代碼（需要圖片資源的部分可以注釋掉），可以在真機(jī)測試下

<view class="home">
  <view class='home-header clearfix'>
    <view class='home-person' bindtap="ToUserCenter">
      <view class='home-personwrap'>
        <image src='../../static/person.png'></image>      
      </view>
    </view>
  </view>
    <canvas canvas-id='button' id='button' bindtap='ToIndex'>
    </canvas> 
</view>

Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    range:40,
    PictempFilePath:'',
  },
  StartLogin(){
    qcloud.login({
      success(result) {
        console.log('登錄成功', result);
      },

      fail(error) {
        console.log('登錄失敗', error);
      }
    });
  },
  ToUserCenter(){
    wx.navigateTo({
      url: '../usercenter/usercenter',
    })
  },
  ToIndex(){
    wx.navigateTo({
      url: '../index/index',
    })
  },
  
  drawImage(){
    let ctx = wx.createCanvasContext('button')
    ctx.translate(75,75)
    
    ctx.arc(0, 0, this.data.range, 0, 2 * Math.PI)
    ctx.drawImage('../../static/btn.png', -60, -60, 120, 120)
    ctx.setLineWidth(5)
    ctx.setStrokeStyle('#ff7058')
    ctx.setGlobalAlpha(0.8)
    ctx.stroke()
    ctx.draw()
  },
  RepetDraw(){
    clearInterval(t)
    var t = setInterval(() => {
      if (this.data.range < 65) {
        var range = this.data.range + 1
        this.setData({
          range: range
        })
      } else {
        this.setData({
          range: 50
        })
      }

      this.drawImage()
    }, 130)
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {
    // this.Downloader()
   
    // this.StartLogin()
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   */
  onReady: function () {
    this.RepetDraw()
  }

})