mpvue小程序循环动画开启暂停的实现方法


Posted in Javascript onMay 15, 2019

用小程序的 animation 属性实现循环动画的开启与暂停,并封装到组件。

实现一个字体图标组件的循环旋转动画开启/暂停

  1. 用于点击图标,字体颜色变换,开始循环旋转动画,并刷新内容
  2. 刷新结束,停止动画,并设置字体颜色为原来的
  3. 主要利用 setInterval 定时器循环执行动画

首先,组件写出来

添加点击事件,动画属性, 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小程序循环动画开启暂停的实现方法

网速太快

mpvue小程序循环动画开启暂停的实现方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript div 弹出可拖动窗口
Feb 26 Javascript
JS的replace方法介绍
Oct 20 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
Dec 05 Javascript
JQuery教学之性能优化
May 14 Javascript
Javascript 实现图片无缝滚动
Dec 19 Javascript
小议JavaScript中Generator和Iterator的使用
Jul 29 Javascript
JavaScript数据结构链表知识详解
Nov 21 Javascript
Bootstrap基本组件学习笔记之面板(14)
Dec 08 Javascript
AngularJS select设置默认值的实现方法
Aug 25 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
Mar 06 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
Mar 28 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
Jul 31 Javascript
微信小程序的tab选项卡的实现效果
May 15 #Javascript
少女风vue组件库的制作全过程
May 15 #Javascript
vue两组件间值传递 $router.push实现方法
May 15 #Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
May 15 #Javascript
详解微信UnionID作用
May 15 #Javascript
小程序:授权、登录、session_key、unionId的详解
May 15 #Javascript
javascript+HTML5 canvas绘制时钟功能示例
May 15 #Javascript
You might like
在服务端进行目录建立、删除,文件上传、删除的过程的php代码
2008/09/10 PHP
php实现字符串首字母大写和单词首字母大写的方法
2015/03/14 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
Zend Framework入门教程之Zend_Registry组件用法详解
2016/12/09 PHP
Javascript调用XML制作连动下拉列表框
2006/06/25 Javascript
jQuery 学习第七课 扩展jQuery的功能 插件开发
2010/05/17 Javascript
JS下拉框内容左右移动效果的具体实现
2013/07/10 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
13个PHP函数超实用
2015/10/21 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
2016/11/10 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
2016/12/14 Javascript
JS使用正则实现去掉字符串左右空格的方法
2016/12/27 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
JS中将多个逗号替换为一个逗号的实现代码
2017/06/23 Javascript
Vue 处理表单input单行文本框的实例代码
2019/05/09 Javascript
js基础之事件捕获与冒泡原理
2019/10/09 Javascript
js+css实现全屏侧边栏
2020/06/16 Javascript
[07:03]显微镜下的DOTA2第九期——430圣堂刺客杀戮秀
2014/06/20 DOTA
深度定制Python的Flask框架开发环境的一些技巧总结
2016/07/12 Python
利用Python实现Windows下的鼠标键盘模拟的实例代码
2017/07/13 Python
python实现关键词提取的示例讲解
2018/04/28 Python
在python带权重的列表中随机取值的方法
2019/01/23 Python
使用python画社交网络图实例代码
2019/07/10 Python
Python入门Anaconda和Pycharm的安装和配置详解
2019/07/16 Python
Pytorch根据layers的name冻结训练方式
2020/01/06 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
Python基于wordcloud及jieba实现中国地图词云图
2020/06/09 Python
详解Python模块化编程与装饰器
2021/01/16 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
土耳其风格手工珠宝:Ottoman Hands
2019/07/26 全球购物
年终自我鉴定
2013/10/09 职场文书
九月份红领巾广播稿
2014/01/22 职场文书
前处理组长岗位职责
2014/03/01 职场文书
基于Python和openCV实现图像的全景拼接详细步骤
2021/10/05 Python
Linux中各个目录的作用与内容
2022/06/28 Servers