uni-app动画渲染

今天分享一个uni-app实现点赞+1的动画，效果如图：

直接把代码分享出来，我在代码中比较容易解释清楚

<template>
	<view class="page">
		<view class="single-course" v-for="(item,index) in courseList" :key="item.id" >
			<view class="course-desc">
				{{item.name}}
			</view>
			<view class="course-oper" @click="praiseMe(item.id)">
				<image src="../../static/icos/praise.png" class="praise-ico" ></image>
				<view class="praise-me" >
					赞一下
				</view>
				<!-- 创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性 -->
				<view :animation="animationData[item.id]" class="praise-me animation-opacity" >+1</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				courseList: [
					{id: 101,name: 'vue入门到精通'},
					{id: 102,name: 'React入门到入土'},
					{id: 103,name: 'Java基础'},
					{id: 105,name: '数据结构与算法'},
					{id: 106,name: '单片机应用'},
					{id: 107,name: 'STM32库函数开发'},
					{id: 108,name: '人工智能威胁论'},
					{id: 109,name: '小学一年级数学上册'}
					],
				animationData: {}, //动画实例初始化
			}
		},
		onLoad() {
			//页面加载时创建一个动画
			this.animation = uni.createAnimation();
		},
		methods: {
			//点赞
			praiseMe(id){
				//点击时，描绘动画的运动过程
				this.animation.translateY(-80).opacity(1).step({duration: 500});
				this.animationData = {};  //必须要清空，如果没有清空，引用是一样的，页面就不会重新渲染，导致动画无法显示。vue的特性
				this.animationData[id] = this.animation.export();  //导出动画，对应的键是当前数据的ID
				setTimeout(()=>{  //时间到后，动画恢复原点
					    this.animation.translateY(0).opacity(0).step({duration: 0})
						this.animationData = {};
						this.animationData[id] = this.animation.export();
				},500);
			},
		}
	}
</script>

<style>
	
.single-course {
	display: flex;
}
.course-desc {
	line-height: 140upx;
	padding-left: 50upx;
	width: 440upx;
}
/* 点赞 */
.course-oper {
	width: 140upx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-left: #dbdbda dashed 2px;
}
.praise-ico{
	width: 40upx;
	height: 40upx;
	align-self: center;
}
.praise-me {
	font-size: 14px;
	color: #feab2a;
	align-self: center;
}
.animation-opacity{
	font-weight: bold;
	color: #feab2a;
	opacity: 0;   /* 备注： 默认透明度为 0，不显示 */
}
</style>