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

这里是使用mpvue实现小程序循环动画开启暂停的完整攻略。

1. 概述

小程序循环动画开启暂停的实现方法，有多种方案。而在使用mpvue框架时，可以直接使用wx.createAnimation创建动画并进行操作。具体实现步骤如下。

2. 实现步骤

2.1 创建动画

首先，我们需要创建动画。可以使用wx.createAnimation方法创建一个动画实例，代码如下：

// 在页面中引入动画库
import createAnimation from '@/utils/createAnimation'

// 在data中定义动画实例
data () {
  return {
    animationInstance: createAnimation()
  }
}

// 封装createAnimation
const _createAnimation = () => {
  return wx.createAnimation({
    duration: 2000, // 动画持续时间
    timingFunction: 'linear', // 动画的类型
    transformOrigin: '50% 50%' // 动画的轴心
  })
}
export default _createAnimation

这里创建了一个名为animationInstance的动画实例，并将其引入页面中。

2.2 开启动画

接着，我们需要编写开启动画的方法。在mpvue框架中，我们可以使用this.animationInstance.export方法导出动画实例，并将其绑定在页面的dom元素上，实现动画的开启。

// 在界面中定义动画所绑定的class名
<view class='animation'></view>

// 编写开启动画的方法
methods: {
  startAnimation () {
    const animation = this.animationInstance.export()
    animation.rotate(360).step()
    this.$mp.page.setData({
      animationData: animation.export()
    })
  }
}

这里我们使用animation.rotate(360).step()来编写动画效果，然后通过setData方法将动画导出到页面中。

2.3 暂停动画

除了开启动画，我们还需要编写暂停动画的方法。在mpvue框架中，我们可以使用animation.option方法来修改动画属性，实现动画的停止。具体代码如下：

// 编写动画暂停的方法
methods: {
  pauseAnimation () {
    const animation = this.animationInstance.export()
    animation.option.transition.duration = 0
    this.$mp.page.setData({
      animationData: animation.export()
    })
  }
}

这里使用animation.option.transition.duration = 0来将动画持续时间设置为0，实现动画的停止。

2.4 示例说明

为了更好地理解上述步骤的实现过程，以下提供两个示例：

示例1

在页面中引入动画库

import createAnimation from '@/utils/createAnimation'

在data中定义动画实例

data () {
  return {
    animationInstance: createAnimation()
  }
}

在界面中定义动画所绑定的class名

<view class='animation'></view>

编写开启动画的方法

methods: {
  startAnimation () {
    const animation = this.animationInstance.export()
    animation.rotate(360).step()
    this.$mp.page.setData({
      animationData: animation.export()
    })
  }
}

编写动画暂停的方法

methods: {
  pauseAnimation () {
    const animation = this.animationInstance.export()
    animation.option.transition.duration = 0
    this.$mp.page.setData({
      animationData: animation.export()
    })
  }
}

示例2

在页面中引入动画库

import createAnimation from '@/utils/createAnimation'

在data中定义动画实例

data () {
  return {
    animationInstance: createAnimation()
  }
}

在界面中定义动画所绑定的class名

<view class='animation'></view>

编写开启动画的方法

methods: {
  startAnimation () {
    const animation = this.animationInstance.export()
    animation.scale(1.2).step()
    this.$mp.page.setData({
      animationData: animation.export()
    })
  }
}

编写动画暂停的方法

methods: {
  pauseAnimation () {
    const animation = this.animationInstance.export()
    animation.option.transition.duration = 0
    this.$mp.page.setData({
      animationData: animation.export()
    })
  }
}

以上便是使用mpvue实现小程序循环动画开启暂停的实现方法的完整攻略。