【Vue3组件】LottieAnimation组件封装，用于流畅的页面动画效果
lottie是什么就不多介绍了，自己封装了一个平时用的比较多的组件，主要用于快速使用lottie动画，支持自动播放，循环播放，暂停继续
必要的库–lottie-web
<template><div class="lottie" ref="lottieContainer"></div>
</template><script setup lang="ts">
import { ref, onMounted, watch,withDefaults } from 'vue';
import lottie from 'lottie-web';interface Props {animationPath: string;loop?: boolean;autoplay?: boolean;isPlaying?: boolean;
}const props = withDefaults(defineProps<Props>(),{loop: true,autoplay: true,isPlaying: true,
})const lottieContainer = ref<HTMLDivElement | null>(null);
// @ts-ignore
const lottieInstance = ref<lottie.AnimationItem | null>(null);onMounted(() => {if (lottieContainer.value) {fetch(props.animationPath).then(response => {if (!response.ok) {throw new Error(`HTTP error! status: ${response.status}`);}return response.json();}).then(animationData => {lottieInstance.value = lottie.loadAnimation({container: lottieContainer.value as Element,renderer: 'svg',loop: props.loop ?? true,autoplay: props.autoplay ?? true,animationData: animationData,});}).catch(error => {console.error('Error loading Lottie animation:', error);});}
});watch(() => props.isPlaying,(newVal) => {if (lottieInstance.value) {if (newVal) {lottieInstance.value.play();} else {lottieInstance.value.pause();}}}
);
</script>
使用时只需要传入animationPath即可
例如
<LottieAnimation :animationPath="lottieList[getRandomInt()]" />
自动播放，循环播放，暂停继续等
<LottieAnimation :animationPath="lottieList[getRandomInt()]" :loop="true" :autoplay="true" :isPlaying="true"/>