# 烟花，粒子烟花，孔明灯烟花，圣诞树 **Repository Path**: jules2009/fireworks ## Basic Information - **Project Name**: 烟花，粒子烟花，孔明灯烟花，圣诞树 - **Description**: 一个基于 Vue 3 + TypeScript + Vite 构建的烟花和孔明灯展示项目，包含多种精美的烟花动画效果 ✨ 项目特性 - 🎨 **多种烟花效果**：包含 6 种不同风格的烟花效果 - 🎯 **交互式体验**：支持点击、自动播放等多种交互方式 - 🌈 **丰富视觉效果**：HSL 颜色空间、粒子系统、渐变光晕等 - ⚡ **高性能**：使用 Canvas 渲染，流畅的动画效果 - **Primary Language**: HTML - **License**: MulanPSL-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 2 - **Forks**: 1 - **Created**: 2025-12-31 - **Last Updated**: 2026-02-27 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 🎆 Fireworks - 烟花效果展示项目 > 一个基于 Vue 3 + TypeScript + Vite 构建的烟花效果展示项目，包含多种精美的烟花动画效果，适用于节日庆典、活动展示等场景。 ## ✨ 项目特性 - 🎨 **多种烟花效果**：包含 6 种不同风格的烟花效果 - 🎯 **交互式体验**：支持点击、自动播放等多种交互方式 - 🌈 **丰富视觉效果**：HSL 颜色空间、粒子系统、渐变光晕等 - 📱 **响应式设计**：适配桌面端和移动端 - ⚡ **高性能**：使用 Canvas 渲染，流畅的动画效果 - 🔧 **TypeScript**：完整的类型支持，代码更安全 - 📦 **双版本支持**：提供 Vue 版本和纯 HTML 版本 ## 🎬 效果展示 ### 1. 点击文字烟花 (ClickTextFirework) - **路径**: `/` - **特性**: - 🎯 点击创建文字烟花（支持中英文） - 🎆 自动生成圆形烟花 - 🌏 优化字体，完美支持中文显示 - 🎨 多彩粒子效果（HSL 颜色空间） - ✨ 增强的淡出算法 ### 2. 自动文字烟花 (AutoTextFirework) - **路径**: `/autoTextFirework` - **特性**: - 📝 自动生成文字烟花效果 - 🎨 流畅的动画过渡 - 💫 丰富的粒子效果 ### 3. 经典烟花 (ClassicFirework) - **路径**: `/classicFirework` - **特性**: - 🎆 经典的圆形烟花效果 - 🎨 青色/绿色主题色调 - ⚡ 简洁高效的渲染 ### 4. 交互式烟花 (InteractiveFirework) - **路径**: `/interactiveFirework` - **特性**: - 🎆 多种烟花类型（菊花型、幽灵型、闪烁型等） - 🎨 可调节参数（大小、画质、天空照明等） - 🎯 交互控制（暂停、声音、全屏等） - ✨ 自动模式和长曝光效果 - 💫 丰富的自定义选项 ### 5. 粒子烟花 (ParticleFirework) - **路径**: `/particleFirework` - **特性**: - ✨ 精美的粒子系统效果 - 🎨 流畅的粒子动画 - 💫 丰富的视觉效果 ### 6. 孔明灯烟花 (SkyLantern) - **路径**: `/skyLantern` - **特性**: - 🏮 精美的孔明灯动画效果 - ✨ 动态闪烁的星星背景（上方密度高） - 🎆 优化的烟花粒子效果 - 💫 祝福文字显示 - 🌙 渐远效果（透明度渐变） ### 7. 圣诞树 & 飘雪 (ChristmasTree) - **路径**: `/christmasTree` - **特性**: - 🎄 Canvas 绘制多层圣诞树 - ❄️ 多边形雪花飘落特效（基于粒子运动） - 🧸 随机分布的圣诞装饰（球、礼物等） - 📱 全屏自适应，树与雪花双层画布叠加 - 🧩 逻辑抽离到 `utils/christmasTree`，结构清晰，可复用 ## 📄 HTML 版本 项目同时提供了纯 HTML 版本，可以直接在浏览器中打开使用，效果与 Vue 版本完全一致。 ### HTML 文件位置 所有 HTML 文件位于 `src/html/` 目录下： 1. **交互式烟花** - 文件: `src/html/firework/index.html` - 效果: 与 Vue 版本的交互式烟花相同 - 特性: 多种烟花类型、可调节参数、交互控制 2. **孔明灯烟花** - 文件: `src/html/sky-lantern/sky-lantern.html` - 效果: 与 Vue 版本的孔明灯烟花相同 - 特性: 孔明灯动画、星星背景、烟花效果 3. **点击文字烟花** - 文件: `src/html/textFireworks/clickTextFirework.html` - 效果: 与 Vue 版本的点击文字烟花相同 - 特性: 点击创建文字烟花，自动生成圆形烟花 4. **自动文字烟花** - 文件: `src/html/textFireworks/autoTextFirework.html` - 效果: 与 Vue 版本的自动文字烟花相同 - 特性: 自动生成文字烟花效果 5. **普通烟花** - 文件: `src/html/textFireworks/ordinaryFirework.html` - 效果: 与 Vue 版本的经典烟花相同 - 特性: 经典的圆形烟花效果 6. **粒子烟花** - 文件: `src/html/particleFirework/particleFirework.html` - 效果: 与 Vue 版本的粒子烟花相同 - 特性: 多彩爆炸、星形模式、发光效果、物理运动 7. **圣诞树 & 飘雪** - 文件: `src/html/christmasTree/index.html` - 效果: 纯 HTML 版圣诞树与飘雪特效 - 特性: 双 canvas（圣诞树 + 雪花）、自动下雪、随机装饰 ## 📁 项目结构 ``` Fireworks/ ├── src/ │ ├── views/ # Vue 视图组件 │ │ ├── ClickTextFireworkView.vue # 点击文字烟花 │ │ ├── AutoTextFireworkView.vue # 自动文字烟花 │ │ ├── ClassicFireworkView.vue # 经典烟花 │ │ ├── InteractiveFireworkView.vue # 交互式烟花 │ │ ├── ParticleFireworkView.vue # 粒子烟花 │ │ └── SkyLanternView.vue # 孔明灯烟花 │ ├── html/ # HTML 版本（可直接访问） │ │ ├── firework/ # 交互式烟花 HTML │ │ │ ├── index.html │ │ │ ├── css/ │ │ │ └── js/ │ │ ├── sky-lantern/ # 孔明灯烟花 HTML │ │ │ ├── sky-lantern.html │ │ │ └── js/ │ │ └── textFireworks/ # 文字烟花 HTML │ │ ├── clickTextFirework.html │ │ ├── autoTextFirework.html │ │ ├── ordinaryFirework.html │ │ └── js/ │ │ └── particleFirework/ # 粒子烟花 HTML │ │ ├── particleFirework.html │ │ └── js/ │ ├── utils/ # 工具函数（TypeScript） │ │ ├── clickTextFirework.ts # 点击文字烟花逻辑 │ │ ├── autoTextFirework.ts # 自动文字烟花逻辑 │ │ ├── classicFirework.ts # 经典烟花逻辑 │ │ ├── particleFirework.ts # 粒子烟花逻辑 │ │ ├── firework/ # 交互式烟花模块 │ │ │ ├── script.ts # 主脚本 │ │ │ ├── particles.ts # 粒子系统 │ │ │ ├── shell.ts # 烟花外壳 │ │ │ ├── shellGenerators.ts # 烟花生成器 │ │ │ ├── spark.ts # 火花效果 │ │ │ ├── star.ts # 星星效果 │ │ │ └── ... │ │ └── lantern/ # 孔明灯模块 │ │ ├── fireworks.ts # 烟花效果 │ │ ├── sky.ts # 星星背景 │ │ ├── lantern.ts # 孔明灯逻辑 │ │ └── wishes.ts # 祝福语 │ ├── router/ # 路由配置 │ │ └── index.ts │ ├── stores/ # 状态管理（Pinia） │ │ ├── counter.ts │ │ └── fireworkStore.ts │ ├── components/ # 公共组件 │ └── assets/ # 静态资源 │ ├── base.css │ └── main.css ├── public/ # 公共资源 │ └── firework/ # 公共烟花资源 ├── package.json # 项目配置 ├── vite.config.ts # Vite 配置 ├── tsconfig.json # TypeScript 配置 └── README.md # 项目说明 ``` ## 🛠️ 技术栈 ### 核心框架 - **[Vue 3](https://vuejs.org/)** - 渐进式 JavaScript 框架（Composition API） - **[TypeScript](https://www.typescriptlang.org/)** - 类型安全的 JavaScript 超集 - **[Vite](https://vitejs.dev/)** - 下一代前端构建工具 ### 核心库 - **[Vue Router](https://router.vuejs.org/)** - Vue.js 官方路由管理器 - **[Pinia](https://pinia.vuejs.org/)** - Vue 的状态管理库 - **[Element Plus](https://element-plus.org/)** - 基于 Vue 3 的组件库 ### 工具库 - **[tinycolor2](https://github.com/bgrins/TinyColor)** - 颜色处理和转换工具 - **Less** - CSS 预处理器 ### 开发工具 - **ESLint** - 代码检查工具 - **Prettier** - 代码格式化工具 - **vue-tsc** - Vue 单文件组件的 TypeScript 类型检查 ## 🎨 核心特性说明 ### 粒子系统 - **高性能渲染**：使用 Canvas 2D API 进行硬件加速渲染 - **丰富色彩**：HSL 颜色空间，呈现自然的色彩变化和渐变效果 - **粒子多样化**：粒子大小随机化（1-5px），大粒子带光晕效果，增强视觉层次 - **优化算法**：改进的淡出算法，粒子残留更快消失，保持画面流畅 ### 星星背景 - **动态效果**：星星具有动态闪烁动画，营造真实夜空氛围 - **自然分布**：上方密度高，下方密度低的自然分布模式 - **智能布局**：70% 的星星集中在上方 1/3 区域，符合视觉焦点 ### 孔明灯效果 - **流畅动画**：使用 SVG 动画，实现流畅的上升效果 - **渐远效果**：结合缩放和透明度渐变，营造渐行渐远的视觉效果 - **自定义文字**：支持自定义祝福文字，可个性化设置 ### 文字烟花 - **多语言支持**：完美支持中英文文字显示 - **字体优化**：使用优化字体，确保中文显示清晰美观 - **粒子化效果**：文字以粒子形式呈现，具有独特的视觉效果 ### 代码规范 - **ESLint**：使用 ESLint 进行代码检查，运行 `npm run lint` 自动修复问题 - **Prettier**：使用 Prettier 进行代码格式化，运行 `npm run format` 格式化代码 - **TypeScript**：遵循 TypeScript 最佳实践，运行 `npm run type-check` 检查类型 - **Vue 3**：遵循 Vue 3 Composition API 最佳实践，使用 `