mpvue小程序循環動畫開啟暫停的實現

這篇文章給大家介紹mpvue小程序循環動畫開啟暫停的實現，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

首先，組件寫出來

添加點擊事件，動畫屬性， style 屬性（用來動態修改樣式）

src/components/refresh.vue

<template>
 <div>
  <div
   class="iconfont icon-shuaxin"
   :animation='refreshA'
   @click="refresh"
   :style='style'></div>
 </div>
</template>

設置初始數據

使用一個 布爾 數據 refreshing 判斷動畫的狀態為開啟 true /暫停 false

<script>
export default {
 data () {
  return {
   refreshA: null,
   style: 'color: #eee;',
   // 用來設置存儲旋轉的度數
   rotate: 0,
   // 存儲定時器id
   refreshI: null
  }
 },
 props: ['refreshing']
}
</script>

添加點擊事件函數

<script>
export default {
 methods: {
  // 刷新按鈕點擊
  refresh () {
   // 正在刷新 則跳出，避免在循環動畫執行時，再次出發點擊刷新事件
   if (this.refreshing) return
   // 否則提交刷新事件
   this.$emit('refresh')
  },
  // 刷新動畫結束
  refreshend () {
   // 當動畫結束，字體顏色恢復原來
   this.style = 'color: #eee;'
  }
 }
}
</script>

監聽 refreshing 狀態

<script>
export default {
 watch: {
  refreshing (newV, oldV) {
   // 沒有正在刷新 > 正在刷新 設置循環動畫
   if (newV && !oldV) {
    this.style = 'color: #fff;'
    this.refreshI = setInterval(() => {
    // 每次 +360 實現每 300 毫秒旋轉 360 度 
     this.rotate += 360
     let animation = wx.createAnimation()
     animation.rotateZ(this.rotate).step()
     this.refreshA = animation.export()
    }, 300)
    return
   }
   // 從正在刷新 > 刷新完成 清空循環定時器動畫
   if (!newV && oldV) {
    clearInterval(this.refreshI)
    this.refreshA = null
   }
  }
 }
}
</script>

需要注意的是定時器時間必須和動畫的過渡時間設置為相同

組件調用

src/pages/index/index.vue

<template>
 <div>
  <Refresh @refresh='refresh' :refreshing='refreshing'/>
 </div>
</template>

<script>
import Refresh from '@/components/refresh'

export default {
 data: {
  // 初始狀態肯定為 false ,點擊刷新組件后，在事件函數中再設置為 true
  refreshing: false
 },
 components: {
  Refresh
 },
 methods: {
  async refresh () {
  this.refreshing = true
  // 這里為一個異步請求api
  let data = await api.getData()
  // 請求完成，執行想要操作的代碼后，設置動畫為 false
  // this.data = data
  this.refreshing = false
  }
 }
}
</script>

<style lang="stylus" scoped>
</style>

refresh 組件完整代碼

<template>
 <div>
  <div
   class="iconfont icon-shuaxin"
   :animation='refreshA'
   @click="refresh"
   :style='style'></div>
 </div>
</template>

<script>
export default {
 data () {
  return {
   refreshA: null,
   style: 'color: #eee;',
   rotate: 0,
   refreshI: null
  }
 },
 props: ['refreshing'],
 watch: {
  refreshing (newV, oldV) {
   if (newV && !oldV) {
    this.style = 'color: #fff;'
    this.refreshI = setInterval(() => {
     this.rotate += 360
     let animation = wx.createAnimation()
     animation.rotateZ(this.rotate).step()
     this.refreshA = animation.export()
    }, 300)
    return
   }
   if (!newV && oldV) {
    clearInterval(this.refreshI)
    this.refreshA = null
   }
  }
 },
 methods: {
  refresh () {
   if (this.refreshing) return
   this.$emit('refresh')
  },
  refreshend () {
   this.style = 'color: #eee;'
  }
 }
}
</script>

<style lang="stylus" scoped>
</style>

關于mpvue小程序循環動畫開啟暫停的實現就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。