快捷導(dǎo)航

mpvue小程序循環(huán)動畫開啟暫停的實現(xiàn)方法

更新時間：2019年05月15日 10:20:03 作者：tingzhong

這篇文章主要介紹了mpvue小程序循環(huán)動畫開啟暫停的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

用小程序的 animation 屬性實現(xiàn)循環(huán)動畫的開啟與暫停，并封裝到組件。

實現(xiàn)一個字體圖標(biāo)組件的循環(huán)旋轉(zhuǎn)動畫開啟/暫停

用于點擊圖標(biāo)，字體顏色變換，開始循環(huán)旋轉(zhuǎn)動畫，并刷新內(nèi)容
刷新結(jié)束，停止動畫，并設(shè)置字體顏色為原來的
主要利用 setInterval 定時器循環(huán)執(zhí)行動畫

首先，組件寫出來

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

src/components/refresh.vue

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

設(shè)置初始數(shù)據(jù)

使用一個布爾數(shù)據(jù) refreshing 判斷動畫的狀態(tài)為開啟 true /暫停 false

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

添加點擊事件函數(shù)

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

監(jiān)聽 refreshing 狀態(tài)

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

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

組件調(diào)用

src/pages/index/index.vue

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

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

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

效果

正常效果，看圖中右上角