思路:
- 在页面创建的时候,创建一个临时动画对象
- 调用 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>