widget的animation属性实现了循环动画的开始和暂停，封装在组件中，

使用小程序的animation属性来实现循环动画的开启和暂停，封装在组件中。

• 为字体图标组件实现开始/暂停旋转动画
  • 用于点击图标，字体颜色变化，启动旋转动画并更新内容
  • 动画，设置字体颜色到原来的。
  • 主要使用setInterval定时器循环来执行动画

首先打印组件添加❙、style属性（用于动态改变样式）

• src/components/refresh.vue

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

设置初始数据 ❀use♿♿❀

<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>
复制代码

评估动画状态是否开启 true/Pausefalse ? 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>
复制代码

刷新组件完整代码

<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) {
        this.style = 'color: #eee;'
        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>

复制代码

效果

• 效果正常，见图片右上角

• 网速太高：P tingzhong
  链接：https ：//juejin.im/post/5cda5fdd51882569677f7d1d
  来源：掘金
  版权归作者所有。如需商业转载，请联系作者以获得批准。非商业转载请注明来源。