基于 uniapp+vue3组合式API+animation对象实现
<template>
<view class="like-wrapper">
<view class="icon" @click="handlelike">
<image src="../../static/icon/点赞.svg" mode=""></image>
</view>
<view class="content" :animation="animationData" >
+1
</view>
</view>
</template>
<script setup>
import { reactive, onMounted, onUnmounted, ref } from 'vue'
const animationData = ref({})
const animation = ref(null)
const handlelike = () => {
// 实现点赞动画效果
if (animation.value) {
animation.value.translateY(-90).opacity(1).step({
duration: 400
});
// 导出动画数据传递给组件的animation属性
animationData.value = animation.value.export();
// 还原动画
setTimeout(()=>{
animation.value.translateY(0).opacity(0).step({
duration: 0
});
animationData.value = animation.value.export();
},500)
}
};
onMounted(() => {
// 创建动画实例
animation.value = uni.createAnimation();
});
onUnmounted(()=>{
animationData.value = {}
});
</script>
<style lang="less">
.like-wrapper{
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
margin-top: 20upx;
image{
width: 150upx;
height: 150upx;
}
.content{
font-weight: 700;
font-size: 20px;
color: #ff0000;
opacity: 0;
}
}
</style>
效果图