uniApp实现点赞动画效果

原创已于 2024-07-23 17:05:34 修改 · 669 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #vue.js #前端

于 2024-07-23 17:03:09 首次发布

基于 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>

效果图