Canvas动画基础完整教程，掌握动画原理、动画循环、帧率控制和性能优化技巧。Canvas动画是通过不断重绘画面来创造运动效果的技术，是游戏开发、数据可视化和交互应用的核心。
动画的本质是"视觉暂留"现象——人眼在看到图像后，图像会在视网膜上停留约1/16秒。通过快速连续显示略有差异的画面，大脑会将这些画面融合成流畅的运动。
Canvas动画遵循一个简单循环：
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height)
update()
draw()
requestAnimationFrame(animate)
}
| 类型 | 说明 | 示例 |
|---|---|---|
| 帧动画 | 逐帧播放预设画面 | GIF动画、精灵动画 |
| 属性动画 | 平滑改变属性值 | 移动、缩放、旋转 |
| 物理动画 | 基于物理规律运动 | 弹跳、摆动、碰撞 |
| 粒子动画 | 大量粒子的运动 | 烟花、雨雪、火焰 |
| 方法 | 说明 | 适用场景 |
|---|---|---|
| setInterval | 固定间隔执行 | 简单动画、兼容旧浏览器 |
| setTimeout | 递归调用 | 需要精确控制间隔 |
| requestAnimationFrame | 浏览器优化 | 现代动画首选 |
一个完整的动画循环包含以下要素：
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
let x = 0
let y = 100
let speed = 2
function update() {
x += speed
if (x > canvas.width) x = 0
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.fillStyle = 'blue'
ctx.fillRect(x, y, 50, 50)
}
function animate() {
update()
draw()
requestAnimationFrame(animate)
}
animate()
动画中需要管理各种状态：
const ball = {
x: 100,
y: 100,
vx: 2,
vy: 1
}
let startTime = null
let lastTime = 0
let elapsedTime = 0
let isPlaying = false
let isPaused = false
let currentFrame = 0