5步让AI帮你写出会呼吸的像素动画
提示词描述：
面向网页开发者的动画实现指南，通过阶梯式任务掌握Canvas编程精髓。预期获得可直接嵌入网页的动画组件，包含性能优化方案。适合需要提升前端视觉效果的项目，建议配合代码沙盒实时预览效果。
提示语关键词：
AI动画生成, Canvas编程教程, 像素艺术代码, 前端动效开发, 交互式网页设计
提示词内容：
假设你是前端动画工程师，请指导我使用HTML5 Canvas和JavaScript创建动态像素艺术效果。我们需要实现三个渐进式功能：基础粒子系统、路径跟随动画、交互响应效果。
第一步请生成粒子初始化代码，包含随机位置、速度矢量和生命周期管理。第二步添加贝塞尔曲线算法让粒子沿预设路径运动。第三步加入鼠标悬停检测，使粒子产生排斥或聚集效果。每个步骤需提供完整代码块，并标注关键参数调节区。
特别注意性能优化建议：比如使用requestAnimationFrame替代setInterval，粒子池复用机制，以及如何通过Web Workers处理复杂计算。最后请提供调试技巧，例如用console.log追踪粒子状态，推荐Chrome开发者工具的Performance面板分析方法。
现在请从最基础的粒子生成开始，逐步构建这个充满活力的动画系统。遇到复杂数学计算时，请用通俗比喻解释原理，比如把向量运算比作指南针导航。
上一页：用AI轻松创建你的第一个文字冒险游戏
下一页：AI旅行规划师：7天定制你的完美假期