球体动起来 - 动画基础入门

概念介绍

欢迎进入动画的魔法世界！之前我们画的球都是静止的，现在我们要让球动起来！动画的秘密其实很简单：快速连续显示略有不同的画面。在p5.js中，draw()函数每秒钟会自动运行60次，这为动画创造了完美的条件！

学习目标

• 理解动画原理：draw()函数的重复执行机制
• 掌握用变量控制球的位置变化
• 学会速度概念：位置增量就是速度
• 理解边界检测和反弹效果
• 学习使用mouseX, mouseY全局变量

---

🎬 动画原理揭秘

为什么会动？快速显示连续画面！

想象一下翻书动画：

• 每一页：球的位置稍微不同
• 快速翻页：看起来就像球在动
• p5.js的draw()函数：每秒自动"翻页"60次

🔧 与基础课程的连接

还记得基础课程中的变量概念吗？

• 基础课程：let score = 100; 变量存储分数
• 动画课程：let x = 50; 变量存储位置，然后不断更新

现在变量不再是静态的值，而是会随着时间变化！

---

🏃 速度概念入门

什么是速度？

速度 = 每帧位置的变化量

速度可以是负数

---

🔄 边界反弹

球碰到边界会反弹！

边界检测原理

球心位置 + 半径 > 画布宽度  →  碰到右边界
球心位置 - 半径 < 0        →  碰到左边界

---

💻 实践练习

练习1：水平移动的球 🎯

创建一个在水平方向移动的球：

挑战：

• 改变速度值，看看有什么不同？
• 改变球的初始位置
• 改变球的大小

练习2：垂直移动的球 ⬆️⬇️

让球在垂直方向移动：

练习3：对角线移动 ↗️

让球同时对x和y方向移动：

练习4：跟随鼠标的球 🐭

使用mouseX和mouseY全局变量：

练习5：缓动的球 🌊

球平滑地跟随鼠标：

练习6：大小变化的球 🔵

球的大小随时间变化：

练习7：加速的球 🚀

速度逐渐变化的球：

练习8：呼吸球 🫁

模拟呼吸效果：

---

🎯 本课重点总结

核心概念

• ✅ 动画原理：draw()函数每秒运行60次
• ✅ 速度概念：每帧位置的变化量
• ✅ 边界检测：检查球是否碰到画布边缘
• ✅ 反弹效果：通过改变速度正负实现反弹

重要变量

• ✅ 位置变量：let x = 100;
• ✅ 速度变量：let speed = 2;
• ✅ 全局变量：mouseX, mouseY, width, height

与基础课程的连接

• ✅ 变量应用：从存储数据到控制动画
• ✅ 数学运算：+=操作符在动画中的重要性
• ✅ 条件判断：if语句在边界检测中的应用

---

🚀 下一步

太棒了！你已经让球动起来了！你学会了：

• ⚡ 动画基础：draw()函数的重复执行
• 🎯 速度控制：用变量控制位置变化
• 🔄 边界反弹：让球在画布内弹跳
• 🐭 鼠标交互：跟随鼠标的球效果

下一课我们将学习：

• 🖱️ 鼠标交互：点击、悬停、拖拽效果
• 📏 距离计算：用dist()函数检测碰撞
• 🎮 互动游戏：创建真正的交互体验
• 🔄 状态管理：球的点击、悬停等状态

准备好让你的球不仅能动，还能和你互动了吗？

p5.js官方参考

• Reference: mouseX
• Reference: mouseY
• Reference: width
• Reference: height
• Reference: frameCount
• Reference: sin()