mpvue小程序字体图标循环旋转动画的开启与暂停

本文档介绍了如何在mpvue小程序中实现一个循环动画的功能，具体是通过使用小程序内置的`animation`属性和JavaScript的`setInterval`定时器来实现一个字体图标组件的循环旋转动画。该组件名为`refresh.vue`，其功能是在用户点击图标时，改变字体颜色并启动动画，同时刷新内容。当动画结束后，字体颜色会恢复原状，动画状态会暂停。 在组件的模板部分，我们看到一个`<div>`元素，其中包含了`iconfont`类和`icon-shuaxin`类，这些用于显示字体图标。`:animation='refreshA'`表示将`refreshA`属性绑定到`animation`属性上，这样可以控制动画的开启与暂停。`@click="refresh"`添加了一个点击事件处理器，当用户点击图标时，会调用`refresh`方法。 在组件的`data`部分，初始化了三个关键变量：`refreshA`用于保存动画状态（默认为`null`），`style`用于动态设置字体颜色（初始值为`#eee`），`rotate`用于存储旋转角度（初始值为0）。`refreshI`用于存储定时器的ID，将在动画开始时被设置。 `methods`部分定义了两个函数：`refresh`和`refreshend`。`refresh`函数首先检查`refreshing`属性是否为`true`，如果是，则跳过操作以防止在动画过程中触发新的刷新；否则，触发`refresh`事件并将当前状态传递给父组件。`refreshend`函数负责在动画结束后重置字体颜色。 `watch`对象用于监听`refreshing`状态的变化。当`refreshing`变为`true`时，开始执行动画，将字体颜色设为白色，并设置一个定时器，通过递增`rotate`值来实现循环旋转动画，每次旋转360度，周期为300毫秒。 总结来说，本篇文章提供了一个完整的mpvue小程序中循环动画实现步骤，包括组件设计、数据管理、事件处理以及动画状态的监控，使得开发者能够轻松在字体图标组件上实现循环旋转动画的开关控制。