思路：
- 在页面创建的时候，创建一个临时动画对象
- 调用 step() 来表示一组动画完成
- 通过动画实例的export方法导出动画数据传递给组件的animation属性
- 还原动画
- 页面卸载的时候，清除动画数据
<template><view class="content"><view class="item" v-for="(item,index) in list" :key="item.id"><view class="left"> {{item.memo}} </view><view class="right" @click="praiseMe(index)"><image src="../../static/praise.png"></image><view class="font11">点赞</view><view :animation="animationDataArr[index]" class="praise-me animation-opacity"> +1 </view></view></view></view>
</template><script>
export default {data() {return {list:[{id:"001",memo:"苹果"},{id:"002",memo:"橘子"},{id:"003",memo:"草莓"},{id:"004",memo:"香蕉"}],animationData: {},animationDataArr: []};},onLoad() {// 1 在页面创建的时候，创建一个临时动画对象this.animation = uni.createAnimation();this.animationDataArr=Array(this.list.length).fill({});},onUnload() {// 5 页面卸载的时候，清除动画数据this.animationData = {};this.animationDataArr=Array(this.list.length).fill({});},methods: {// 实现点赞动画效果praiseMe(index) {// 2 调用 step() 来表示一组动画完成this.animation.translateY(-90).opacity(1).step({duration: 400});// 3 通过动画实例的export方法导出动画数据传递给组件的animation属性this.animationData = this.animation;this.animationDataArr[index] = this.animationData.export();// 4 还原动画setTimeout(()=> {this.animation.translateY(0).opacity(0).step({duration: 0});this.animationData = this.animation;this.animationDataArr[index] = this.animationData.export();}, 600)},}
};
</script><style scoped>
.item{display: flex;align-items: center;text-align: center;border: 1px pink solid;margin-top:20rpx ;padding: 20rpx 0;
}
.item image{width: 80rpx;height: 80rpx;z-index: 10;
}
.item .left{flex: 1;
}
.item .right{width: 300rpx;border-left: 1px pink dashed;padding-top: 50rpx;
}.praise-me {font-size: 14px;color: #feab2a;
}.animation-opacity {font-weight: bold;opacity: 0;
}
</style>
