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 相关文章推荐
js获取单选按钮的数据
Nov 27 Javascript
常用简易JavaScript函数
Apr 09 Javascript
这段js代码得节约你多少时间
Dec 20 Javascript
JS 去除Array中的null值示例代码
Nov 20 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
Jun 20 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 Javascript
Javascript中call和apply函数的比较和使用实例
Feb 03 Javascript
jQuery实现带动画效果的多级下拉菜单代码
Sep 08 Javascript
解决低版本的浏览器不支持es6的import问题
Mar 09 Javascript
element中的$confirm的使用
Apr 26 Javascript
微信小程序 scroll-view的使用案例代码详解
Jun 11 Javascript
js仿淘宝放大镜效果
Dec 28 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 输出缓存详解
2009/06/20 PHP
PHP警告Cannot use a scalar value as an array的解决方法
2012/01/11 PHP
php eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
解析htaccess伪静态的规则
2013/06/18 PHP
PHP 魔术变量和魔术函数详解
2015/02/25 PHP
PHP读取大文件的几种方法介绍
2016/10/27 PHP
详解php curl带有csrf-token验证模拟提交方法
2018/04/18 PHP
一段效率很高的for循环语句使用方法
2007/08/13 Javascript
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
2010/03/09 Javascript
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
javascript不可用的问题探究
2013/10/01 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
document.forms用法示例介绍
2014/06/26 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
2015/12/04 Javascript
详解vue.js组件化开发实践
2016/12/14 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
react中的ajax封装实例详解
2017/10/17 Javascript
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
2019/07/04 Javascript
使用webpack搭建vue环境的教程详解
2019/12/31 Javascript
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
Python实现比较两个文件夹中代码变化的方法
2015/07/10 Python
python 采集中文乱码问题的完美解决方法
2016/09/27 Python
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
python中嵌套函数的实操步骤
2019/02/27 Python
python列表每个元素同增同减和列表元素去空格的实例
2019/07/20 Python
解决json中ensure_ascii=False的问题
2020/04/03 Python
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
《唯一的听众》教学反思
2014/02/20 职场文书
助人为乐道德模范事迹材料
2014/08/16 职场文书
2015年试用期工作总结
2014/12/12 职场文书
2015学校六五普法工作总结
2015/04/22 职场文书
笔记本自带的win11如何跳过联网激活?
2022/04/20 数码科技