uniApp animation点赞+1动画

		<!-- <block v-for="(guess,gindex) in guessList">  -->
		<!-- 动画第一步 标签内定义:animation="animationData" if为多个那么animationDataArr[index]  -->
		
		<view :animation="animationData" class="animation-opacity" @click="praiseMe">+1</view>
		
		<!-- <view :animation="animationData" :data-gindex="gindex" class="animation-opacity" @click="praiseMe">+1</view> -->
		<!-- </block> -->

script

<script>

	export default {
		data() {
			return {
				title: 'Hello',
				superheroList: [],
				animationData: {},
				// 如果多个循环出的按钮想要实现此效果，需要给动画对象包括进数据，再标签内设置currentIndex
				animationDataArr: [{}, {}, {}, {}]
			}
		},
		onUnload() {
			//页面卸载的时候清除对象
			this.animationData = {};
			this.animationDataArr = [{}, {}, {}, {}]
		},
		onLoad() {
			//通过API修改导航栏的属性
			uni.setNavigationBarColor({
				frontColor: "#FFFFFF",
				backgroundColor: "#000000"
			})
			var me = this;
			// #ifdef APP-PLUS || MP-WEIXIN
			//2再页面创建的时候，创建一个临时动画对象
			this.animation = uni.createAnimation();
			// #endif
		},
		methods: {
			//实现动画效果
			praiseMe(e) {
				// #ifdef APP-PLUS || MP-WEIXIN
				//3   获取当前点击的下标
				var gindex = e.currentTarget.dataset.gindex;
				//构建动画数据，并且通过step来表示这组动画的完成
				this.animation.translateY(-60).opacity(1).step({
					duration: 400
				});
				//导出动画数据到view组件,实现组件的动画
				this.animationData = this.animation.export();
				//4   将临时对象赋值给当前对象。然后从数组对象中找到该index的对象并导出
				// this.animationData = this.animation;
				// this.animationDataArr[gindex] = this.animationData.export();
				//还原动画
				setTimeout(function() {
					this.animation.translateY(0).opacity(0).step({
						duration: 0
					});
					//重新开始动画
					this.animationData = this.animation.export();
					//4重新开始动画
					// this.animationData = this.animation;
					// this.animationDataArr[index] = this.animationData.export();
				}.bind(this), 500)
				// #endif
			}
		}

	}