烟花配置
使用说明
- 点击画布任意位置发射烟花
- 使用控制按钮暂停/播放动画
- 调整配置参数改变烟花效果
- 点击"发射一个"按钮随机发射烟花
🎨 技术特性
- 使用HTML5 Canvas实现高性能渲染
- 基于物理的粒子系统模拟
- 完全可自定义的烟花参数
- 响应式设计，适配各种屏幕尺寸
- 实时交互控制
🕹️ 交互指南
- 点击画布 - 在点击位置发射烟花
- 调整滑块 - 改变烟花物理参数
- 控制按钮 - 暂停/播放、清空、发射单个烟花
- 自动发射 - 切换自动发射模式
⚙️ 参数说明
- 发射频率 - 控制新烟花生成的频率
- 重力 - 影响粒子下落速度
- 摩擦力 - 控制粒子运动阻力
- 粒子数量 - 每个烟花的粒子数
- 粒子速度 - 粒子爆炸初始速度
💻 TypeScript 实现
这个烟花模拟器使用TypeScript实现，具有完整的类型安全。主要特性包括：
- 类型定义：为粒子、烟花和配置参数提供了完整的类型定义
- 类实现：使用ES6类实现粒子和烟花系统
- React Hooks：使用useState、useEffect和useCallback管理状态和副作用
- 性能优化：使用requestAnimationFrame实现平滑动画
// Particle 类示例
class Particle {
x: number;
y: number;
size: number;
color: string;
alpha: number;
constructor(x: number, y: number, hue: number) {
this.x = x;
this.y = y;
this.size = Math.random() * 3 + 1;
this.color = `hsl(${hue}, 100%, 50%)`;
this.alpha = 1;
}
}