Canvas动画进阶教程，掌握缓动动画、弹性动画、粒子系统、物理模拟等高级动画技术。 在掌握动画基础之后，本章将深入探讨更高级的动画技术，创建更丰富、更自然的动画效果。
动画进阶是在基础动画之上，运用数学公式、物理规律和设计技巧，创造更复杂、更自然的动画效果。
| 技术 | 说明 | 应用场景 |
|---|---|---|
| 缓动动画 | 使用缓动函数控制速度变化 | UI过渡、页面动画 |
| 弹性动画 | 模拟弹簧的弹性效果 | 交互反馈、游戏UI |
| 粒子动画 | 大量粒子的集体运动 | 烟花、雨雪、火焰 |
| 物理模拟 | 基于物理规律的运动 | 游戏、仿真 |
| 碰撞检测 | 检测物体间的碰撞 | 游戏、交互 |
| 动画时间线 | 管理复杂的动画序列 | 动画编辑器、演示 |
缓动动画通过缓动函数控制动画的速度变化，让动画更自然。
const easings = {
linear: t => t,
easeInQuad: t => t * t,
easeOutQuad: t => t * (2 - t),
easeInOutQuad: t => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t,
easeInCubic: t => t * t * t,
easeOutCubic: t => (--t) * t * t + 1,
easeInOutCubic: t => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1
}
弹性动画模拟弹簧的弹性效果，常用于交互反馈。
function springAnimation(from, to, tension = 0.5, friction = 0.7) {
let current = from
let velocity = 0
return function update() {
const force = (to - current) * tension
velocity = (velocity + force) * friction
current += velocity
return current
}
}
粒子系统通过大量粒子的集体运动创造壮观效果。
class Particle {
constructor(x, y) {
this.x = x
this.y = y
this.vx = (Math.random() - 0.5) * 4
this.vy = (Math.random() - 0.5) * 4
this.life = 1
this.color = `hsl(${Math.random() * 360}, 70%, 60%)`
}
update() {
this.x += this.vx
this.y += this.vy
this.life -= 0.02
}
draw(ctx) {
ctx.globalAlpha = this.life
ctx.fillStyle = this.color
ctx.beginPath()
ctx.arc(this.x, this.y, 5, 0, Math.PI * 2)
ctx.fill()
ctx.globalAlpha = 1
}
}
物理模拟基于物理规律计算运动，创造真实的动画效果。
class PhysicsBody {
constructor(x, y, mass = 1) {
this.x = x
this.y = y
this.vx = 0
this.vy = 0
this.ax = 0
this.ay = 0
this.mass = mass
}
applyForce(fx, fy) {
this.ax += fx / this.mass
this.ay += fy / this.mass
}
update(dt) {
this.vx += this.ax * dt
this.vy += this.ay * dt
this.x += this.vx * dt
this.y += this.vy * dt
this.ax = 0
this.ay = 0
}
}
碰撞检测判断物体是否相交，是游戏开发的核心技术。
function circleCollision(c1, c2) {
const dx = c2.x - c1.x
const dy = c2.y - c1.y
const distance = Math.sqrt(dx * dx + dy * dy)
return distance < c1.radius + c2.radius
}
function rectCollision(r1, r2) {
return r1.x < r2.x + r2.width &&
r1.x + r1.width > r2.x &&
r1.y < r2.y + r2.height &&
r1.y + r1.height > r2.y
}
动画时间线管理复杂的动画序列，协调多个动画的播放。
class Timeline {
constructor() {
this.animations = []
this.currentTime = 0
}
add(animation, startTime) {
this.animations.push({ animation, startTime })
}
update(dt) {
this.currentTime += dt
this.animations.forEach(item => {
if (this.currentTime >= item.startTime) {
item.animation.update(dt)
}
})
}
}
本章节包含以下内容：
理解数学原理
缓动函数和物理模拟都基于数学公式，理解原理才能灵活运用。
注重性能
粒子系统和物理模拟对性能要求高，注意优化。
循序渐进
从简单效果开始，逐步增加复杂度。
实践为主
多动手实践，从实际项目中积累经验。