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

實(shí)現(xiàn)一個(gè)字體圖標(biāo)組件的循環(huán)旋轉(zhuǎn)動(dòng)畫(huà)開(kāi)啟/暫停

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

首先，組件寫(xiě)出來(lái)

添加點(diǎn)擊事件，動(dòng)畫(huà)屬性， style 屬性（用來(lái)動(dòng)態(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ù)

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

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

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

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

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

<script>export default { watch: {  refreshing (newV, oldV) {   // 沒(méi)有正在刷新 > 正在刷新 設(shè)置循環(huán)動(dòng)畫(huà)   if (newV && !oldV) {    this.style = 'color: #fff;'    this.refreshI = setInterval(() => {    // 每次 +360 實(shí)現(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)定時(shí)器動(dòng)畫(huà)   if (!newV && oldV) {    clearInterval(this.refreshI)    this.refreshA = null   }  } }}</script>

需要注意的是定時(shí)器時(shí)間必須和動(dòng)畫(huà)的過(guò)渡時(shí)間設(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 ,點(diǎn)擊刷新組件后，在事件函數(shù)中再設(shè)置為 true  refreshing: false }, components: {  Refresh }, methods: {  async refresh () {  this.refreshing = true  // 這里為一個(gè)異步請(qǐng)求api  let data = await api.getData()  // 請(qǐng)求完成，執(zhí)行想要操作的代碼后，設(shè)置動(dòng)畫(huà)為 false  // this.data = data  this.refreshing = false  } }}</script><style lang="stylus" scoped></style>