程序员接外包网站青岛关键词优化平台
在开发中，为用户提供具有视觉冲击力的反馈是一种提升用户体验的好方法。今天，我们将结合 Vue 框架、canvas-confetti 和 Lottie 动画，创建一个动态对话框动画，其中包含炫酷的烟花特效。
效果图：
效果简介
当用户触发特定事件时：
- 弹出一个对话框，加载基于用户等级的 Lottie 动画。
- 配合对话框的展示，启动烟花特效（
canvas-confetti），模拟庆祝场景。 - 用户关闭对话框时，清除动画和特效。
使用的技术栈
- Vue 3: 构建响应式用户界面。
- Lottie: 显示矢量动画，支持用户等级的动态变化。
- canvas-confetti: 用于生成烟花效果，支持细粒度的控制和动画定制。
实现步骤
1. 安装依赖
npm install canvas-confetti lottie-web2. 代码实现
以下是核心代码的分步解析：
初始化状态和依赖
import confetti from 'canvas-confetti'
import lottie from 'lottie-web'
import { watchEffect, computed, ref } from 'vue'
import { useGlobalStore } from '@/stores/global'
import { useUserStore } from '@/stores/user'
- 引入
canvas-confetti和lottie-web。 - 使用
useGlobalStore和useUserStore来获取全局状态和用户数据。
动态动画加载
通过 watchEffect 监听对话框状态，动态加载 Lottie 动画和烟花效果：
watchEffect(() => {if (value.value) {// 加载 Lottie 动画animation = lottie.loadAnimation({container: animationContainer.value,renderer: 'svg',loop: true,autoplay: true,animationData: getLottieFileByUserLevel(),})// Lottie 动画加载完成后触发烟花效果animation.addEventListener('DOMLoaded', startConfetti)} else {// 清除动画和烟花if (animation) {animation.destroy()animation = null}if (animationFrameId) {cancelAnimationFrame(animationFrameId)animationFrameId = null}}
})
创建烟花效果
通过 requestAnimationFrame 控制粒子效果的动态生成：
const startConfetti = () => {const duration = 15 * 1000 // 烟花持续时间const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 2100 }const animationEnd = Date.now() + durationconst frame = () => {const timeLeft = animationEnd - Date.now()if (timeLeft <= 0) {if (animationFrameId) cancelAnimationFrame(animationFrameId)return}const particleCount = 10 * (timeLeft / duration)confetti({...defaults,particleCount,origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },})confetti({...defaults,particleCount,origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },})// 循环调用animationFrameId = requestAnimationFrame(frame)}frame()
}
这里的 randomInRange 函数用来随机生成粒子发射的方向和范围：
function randomInRange(min: number, max: number) {return Math.random() * (max - min) + min
}
根据用户等级加载 Lottie 动画
不同的用户等级对应不同的动画文件：
const getLottieFileByUserLevel = () => {let level = userStore.userLevelif (level === 2) {return Level02Lottie} else if (level === 3) {return Level03Lottie} else if (level === 4) {return Level04Lottie} else if (level === 5) {return Level05Lottie} else if (level === 6) {return Level06Lottie} else {return Level01Lottie}
}
3. 完整代码
<script lang="ts" setup>
import confetti from 'canvas-confetti'
import { watchEffect, computed, ref } from 'vue'
import { useGlobalStore } from '@/stores/global'
import { useUserStore } from '@/stores/user'
import lottie from 'lottie-web'
import Level01Lottie from '@/assets/lottie/Level01.json'
import Level02Lottie from '@/assets/lottie/Level02.json'
import Level03Lottie from '@/assets/lottie/Level03.json'
import Level04Lottie from '@/assets/lottie/Level04.json'
import Level05Lottie from '@/assets/lottie/Level05.json'
import Level06Lottie from '@/assets/lottie/Level06.json'const globalStore = useGlobalStore()
const userStore = useUserStore()
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
const animationContainer = ref()
let animation: any = null
let animationFrameId: number | null = nullconst value = computed({get() {return props.modelValue},set(value) {emit('update:modelValue', value)},
})const beforeClose = () => {globalStore.fireworkVisable.show = false
}// Confetti effect function with requestAnimationFrame
function randomInRange(min: number, max: number) {return Math.random() * (max - min) + min
}const getLottieFileByUserLevel = () => {let level = userStore.userLevelif (level === 2) {return Level02Lottie} else if (level === 3) {return Level03Lottie} else if (level === 4) {return Level04Lottie} else if (level === 5) {return Level05Lottie} else if (level === 6) {return Level06Lottie} else {return Level01Lottie}
}const startConfetti = () => {const duration = 15 * 1000const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 2100 }const animationEnd = Date.now() + durationconst frame = () => {const timeLeft = animationEnd - Date.now()if (timeLeft <= 0) {if (animationFrameId) cancelAnimationFrame(animationFrameId)return}const particleCount = 10 * (timeLeft / duration)confetti({...defaults,particleCount,origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },})confetti({...defaults,particleCount,origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },})// Continue the animation loopanimationFrameId = requestAnimationFrame(frame)}frame()
}watchEffect(() => {if (value.value) {// Load lottie animationanimation = lottie.loadAnimation({container: animationContainer.value,renderer: 'svg',loop: true,autoplay: true,animationData: getLottieFileByUserLevel(),})// Start confetti after lottie loadsanimation.addEventListener('DOMLoaded', startConfetti)} else {// Destroy lottie animation and cancel confetti animationif (animation) {animation.destroy()animation = null}if (animationFrameId) {cancelAnimationFrame(animationFrameId)animationFrameId = null}}
})
</script><template><div class="tipBox"><el-dialog v-model="value" title="" :before-close="beforeClose"><div ref="animationContainer" style="width: 100%; height: 100%"></div></el-dialog></div>
</template><style lang="scss" src="./style.scss" scoped />
总结
以上实现为用户提供了动态且炫酷的视觉体验：
- 对话框弹出时加载用户特定的动画。
- 使用
canvas-confetti模拟烟花特效，持续 15 秒。 - 对话框关闭时清理资源，避免性能问题。
这种效果非常适用于用户晋级、任务完成等场景，希望本文能对你有所启发！