项目介绍
大家好！这是我使用 iFlow CLI 开发的春节手势识别 Web 应用——一个充满年味的互动体验项目！
这个应用通过摄像头实时识别用户的张开手掌手势，触发春节主题的视觉特效：绚丽的烟花粒子动画、传统的六角宫灯、金色的福字装饰……让每一位用户都能用最自然
的方式，为春节增添一份科技感与仪式感！
在线体验
GitHub 仓库： 春节手势识别
核心功能
实时手势识别
- 基于 Google MediaPipe Hands 技术
- 智能识别"张开手掌"手势（五指伸展 + 手掌朝前）
- 防抖机制避免误触发
- 实时绘制手部骨架和关键点可视化
春节特效系统
- 烟花粒子动画：多色烟花随机绽放（红、金、橙、粉、绿、青等春节配色）
- 六角宫灯：带有菱形格纹的传统灯笼，带有摇摆动画
- 福字装饰：金色福字点缀，营造节日氛围
- 沉浸式背景：红色渐变背景，配合春节祝福文字
沉浸式体验
- 春节模式激活后持续保持开启，提供完整的节日氛围
- 视频容器自动缩小到右下角，方便同时观看春节特效
- 响应式设计，支持桌面端和移动端
- 纯前端实现，无需安装，打开即用
技术栈
- 手势识别：MediaPipe Hands 0.4.1675469240
- 图形渲染：HTML5 Canvas（烟花粒子系统）
- 摄像头访问：WebRTC Camera API
- 样式：原生 CSS3（SVG 动画、过渡效果）
- 开发服务器：http-server
项目结构
spring-festival-gesture-recognition/
├── index.html # 主页面入口
├── css/
│ └── style.css # 样式文件（灯笼、福字、烟花画布等）
├── js/
│ ├── main.js # 主入口，初始化应用和事件处理
│ ├── handDetector.js # 手势检测模块（MediaPipe封装）
│ └── effects.js # 春节特效模块（烟花动画）
├── package.json # 项目配置和依赖
└── README.md # 项目文档
快速体验
安装依赖
npm install
启动开发服务器
npm start
或
npm run dev
应用将在 http://localhost:3000 运行。
使用说明
- 启动应用后，允许浏览器访问摄像头权限
- 将手放在摄像头前，保持手掌朝向摄像头
- 张开手掌（五指伸展）即可触发春节主题特效
- 春节模式激活后会持续保持开启
- 按 S 键 可手动切换春节模式（用于测试）
iFlow CLI 使用体验
这个项目从构思到实现，全程使用 iFlow CLI 辅助开发：
- 代码生成：使用 iFlow CLI 快速生成项目结构和基础代码
- 问题解决：遇到手势识别逻辑问题时，iFlow CLI 提供了专业的解决方案
- 代码优化：iFlow CLI 帮助优化了烟花粒子性能，提升动画流畅度
- 错误调试：在调试阶段，iFlow CLI 快速定位并修复了多处 bug
iFlow CLI 的 AI 编程能力让我能够专注于创意实现，大大提高了开发效率！
效果展示
手势识别
- 张开手掌（五指伸展）即可触发春节特效
- 手势识别带有防抖机制，避免误触发
- 实时绘制手部骨架（金色指尖，白色关节）
春节特效
- 烟花粒子系统：每次爆炸 50-100 个粒子，发射间隔 500-1500ms 随机
六角宫灯：带有菱形格纹的传统灯笼，3s 周期摇摆动画
福字装饰：金色福字，2s 周期弹跳动画
装饰元素：星星、光斑、彩带、花瓣等
浏览器兼容性
- Chrome 90+
- Firefox 88+
- Edge 90+
- Safari 14+
需要支持 WebGL 和 WebRTC 的现代浏览器。
项目亮点
- 零门槛互动：无需学习复杂操作，张开手掌即可体验
- 视觉效果精美：精心设计的春节元素，还原传统年味
- 技术栈轻量：纯前端实现，无后端依赖，部署简单
- 响应式适配：完美适配桌面端和移动端设备
- 性能优化：使用 requestAnimationFrame 实现流畅动画（60fps）
未来扩展
- 添加更多手势识别（如握拳、比心等）
- 增加春节音效（鞭炮声、祝福音乐等）
- 支持自定义祝福文字和配色方案
- 添加截图分享功能，记录美好时刻
祝大家新春快乐！ 
✦ 欢迎各位体验并提出宝贵建议！
