番外篇🍭-Uniapp中的动画

番外篇🍭-Uniapp中的动画

1.uniapp中的动画

官方文档

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

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

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

https://pictures-1300239498.cos.ap-nanjing.myqcloud.com/learn/uni/uni-animation.png

• 这一步是把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.animation.translateY("200rpx").step({ duration: 1000 });//单位可以是数字，也可以是字符串
				this.animation.rotate(45).scale(2, 2).step({ duration: 1000 });
				this.animation.translate(100, 100).step({ duration: 1000 });
				this.animationData = this.animation.export()
        // export方法导出动画数据
      }
    }
  }

2.动画多次触发：

如果动画完成后, 元素未回到初始位置, 第二次动画是无法触发的。 有两种方法使元素回到原位：

• 在动画最后在添加一个动画的, 效果是返回原位(动画时间是0)

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

• 设置timeout

如果动画时间是0.7s, 那就在0.8s之后使用动画让元素返回timeout调用时间在动画完成之后 同样duration为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);
      }