uniapp 点击动画_uni-app animation动画

##? uni.createAnimation(OBJECT)

[官方文档](https://uniapp.dcloud.io/api/ui/animation?id=createanimation)

官方是这么形容animation动画的过程:

创立一个动画实例 animation。调用实例的方法来形容动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。

接下来我就逐个说明

### 如何使用uniapp动画

先说需求, 点击按钮小猫开始运动


首先在元素上绑定动画(`:animation="animationData"`)

```

? ?

别跑

```

这一步是把animationData数据传递给animation属性

```

? export default {

? ? data() {

? ? ? return {

? ? ? ? animationData: {}

? ? ? ? // 在data中初始化animationData

? ? ? }

? ? },

? ? onUnload() {

? ? ? this.animationData = {}

? ? ? // 页面关闭后清空数据

? ? },

? ? onload(){

? ? ? ? ? this.animation = uni.createAnimation()?

? ? ? ? // 创立动画实例

? ? },

? ? methods: {

? ? ? running() {

? ? ? ? this.animation.translateX(500).step({duration:1000})

? ? ? ? // 调用实例的方法来形容动画,translateX定义动画类型为x轴偏移, 500为偏移长度, 单位px

? ? ? ? // 调用 step() 来表示一组动画完成(当前参数动画时间1s)

? ? ? ? // step 可以配置参数用于指定当前组动画的配置。具体参数请看文档

? ? ? ? this.animationData = this.animation.export()

? ? ? ? // export方法导出动画数据

? ? ? }

? ? }

? }

```

一个动画就定义好了

下面来看效果


### 链式动画

可以在step()之后紧接第二个动画, 相似promise写法

```

this.animation.translateX(100).step()

? ? .translateY(100).step()

? ? .translateX(0).step()

? ? .translateY(0).step()

```

效果


### 动画屡次触发

假如动画完成后, 元素未回到初始位置, 第二次动画是无法触发的

有两种方法使元素回到原位

#### 通过链式操作

在动画最后在增加一个动画的, 效果是返回原位(透明度,动画时间都是0)

```

this.animation.translateX(200).step({duration:700})

? ? .translateX(0).opacity(0).step({duration:0})

```

#### 设置timeout

假如动画时间是0.7s, 那就在0.8s之后使用动画让元素返回

timeout调用时间在动画完成之后

同样duration,opacity都为0

```

running() {

? ? ? ? this.animation = uni.createAnimation()

? ? ? ? this.animation.translateX(200).step({duration:700})

? ? ? ? this.animationData = this.animation.export()

? ? ? ? setTimeout(()=>{

? ? ? ? ? this.animation.translateX(0).opacity(0).step({duration:0})

? ? ? ? ? this.animationData = this.animation.export()

? ? ? ? }, 800);

? ? ? }

```

效果