uni-app 创建动画流程

uni-app 创建动画的方式比较简单，就是给我们要添加动画的组件，添加一个 animation 属性

步骤如下：

1. 在组件上添加一个 animation属性
2. 在data中存一个描述组件动画的对象animationData
3. 创建动画实例
4. 描述动画轨迹 width, height等等， 以step表示一个动画轨迹的结束
5. 将动画轨迹通过export导出的方式，传递给animationData对象，则动画就会执行

<view>
  <view>动画</view>
  <view class="box" :animation="animationData"></view>
  <view>
    <button @click="start">启动动画</button>
  </view>
</view>

data() {
  return {
    animationData: {} // 定义动画对象
  };
},
methods: {
    start() {
    	// 创建动画实例，传入配置对象
    	let animation = uni.createAnimation({
    		duration: 2000
    	})
    	
    	// 上面动画实例创建了，但是具体的动画行为，轨迹，通过下面描述
    	
    	// 第一个动画行为，变大
    	animation.width("400rpx").height("600rpx").step({
    		// 传入和 createAnimation一样的参数，来描述当前这个动画的行为
    		timingFunction: "ease-out"
    	})
    
    	// 第二个动画行为，旋转、变小，颜色发生变化
    	animation.rotate(180).width("100rpx").height("100rpx").backgroundColor("rgba(55,124,78,0.6)").step()
    	
    	this.animationData = animation.export()
    	
    	// 过3秒以后，再添加一个动画行为
        setTimeout(()=> {
            console.log('第二个动画开始执行')
            animation.scale(10).step({
            	timingFunction: "ease-out",
            	delay: 500
            })
            animation.scale(1).step()
            
            this.animationData = animation.export()
        }, 4000)
    }
}

直接上图

注意事项：

如果要操作组件的 left, top, right, bottom 前提一定是要将给组件设置定位 relative, fixed, absolute