uni-app animation动画

uni.createAnimation(OBJECT)

官方文档

官方是这么描述animation动画的过程:

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

接下来我就一一说明

如何使用uniapp动画

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

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

<view :animation="animationData" class="animation">
    <image src="../../static/猫.png"></image>
</view>
<button @click="running" >别跑</button>

这一步是把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);
      }

效果