🎨 JavaScript 动画教程：从基础到进阶

基础概念

JavaScript 动画的核心是通过修改元素的样式属性实现视觉变化。常见的动画类型包括：

• 位移动画（如 transform: translate()）
• 颜色渐变（如 opacity 或 background-color）
• 尺寸变化（如 width/height 或 scale()）

动画效果可结合 JavaScript DOM 操作教程 深入理解元素属性控制。

CSS 过渡效果

使用 CSS transition 属性可实现平滑动画：

.box {
  transition: all 0.5s ease;
}

关键点：

• transition-property 指定动画属性
• transition-duration 控制动画时长
• transition-timing-function 定义动画曲线

JavaScript 动画方法

通过 requestAnimationFrame 实现流畅动画循环：

function animate() {
  // 动画逻辑
  requestAnimationFrame(animate);
}
animate();

常用技术：

• 动画帧控制（如 clearInterval）
• 位移计算（如 transform: translateX）
• 动画状态管理（如 isAnimating 标志位）

实战案例

1. 按钮悬停效果

   <button class="hover-btn">点击我</button>
   

2. SVG 动画

   <svg><circle cx="50" cy="50" r="40" /></svg>
   

3. Canvas 动画

   const canvas = document.getElementById('myCanvas');
   const ctx = canvas.getContext('2d');
   // 动画绘制逻辑
   

性能优化技巧

• 减少重绘重排：避免频繁修改布局属性
• 使用 will-change：提前声明需要变化的属性
• 动画离散值：用 steps() 曲线优化关键帧效果

更多高级技巧请参考 JavaScript 高性能实践

---

注：所有图片关键词均通过安全过滤，确保符合内容规范