微信小程序持續(xù)旋轉(zhuǎn)動畫 坑! 清除計時器

最近在項目中遇到一個需求,就是需要在微信小程序做一個持續(xù)旋轉(zhuǎn)的動作,在開發(fā)過程中發(fā)現(xiàn)了一些問題,比如如何持續(xù)旋轉(zhuǎn),計時器為什么清除了還是會快速旋轉(zhuǎn)動畫。
本來最先考慮用關鍵幀做動畫,但是在編譯的過程中出錯了,所以最終使用了wx.createAnimation來實現(xiàn),下面貼下代碼(本代碼是基于mpvue寫的),希望對遇到同樣坑的人有點幫助:

onShow () {
    this.animate = wx.createAnimation({
      duration: 1000
    })
    const that = this
    if (that.timer) {
      clearInterval(that.timer)
    }
    that.timer = setInterval(function () {
      that.n = that.n + 1
      that.animate.rotateY(45 * that.n).step()
      that.myRotate = that.animate.export()
    }, 1000)
  },
  onUnload () {
    this.n = 0
    clearInterval(this.timer)
    this.animate.rotateY(0).step()
    this.myRotate = this.animate.export()
  },

重點就在onUnload里面,退出頁面清楚定時器,還需要重置動畫。官方?jīng)]說清楚,搞的我加班到現(xiàn)在。。。。呵,程序員~~~

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

友情鏈接更多精彩內(nèi)容