javascript动画如何制作_有哪些实现动画的方法【教程】_网络技术

javascript动画如何制作_有哪些实现动画的方法【教程】

发布时间 - 2026-01-31 00:00:00 点击率：次

优先用 requestAnimationFrame 实现平滑动画，它匹配屏幕刷新率、后台暂停省资源；简单视觉变化用 CSS transition 或 @keyframes；复杂动态控制用 Web Animations API；避免触发重排，只用 transform、opacity、filter 等高效
属性。

用 `requestAnimationFrame` 做平滑动画，别用 `setTimeout` 或 `setInterval`

浏览器对 requestAnimationFrame 有专门优化，能自动匹配屏幕刷新率（通常是 60fps），而 setTimeout 的执行时机不可控，容易掉帧或卡顿。尤其在页面后台运行时，setTimeout 仍会执行，但 requestAnimationFrame 会暂停，更省资源。

常见错误是手动写死 16ms 间隔：setTimeout(fn, 16) —— 这不等于 60fps，因为 JS 执行、重排、重绘都耗时，实际帧率可能只有 40fps 甚至更低。

正确做法是递归调用：

function animate() {
  // 更新状态，比如 element.style.transform = `translateX(${x}px)`
  // 触发重排/重绘
  requestAnimationFrame(animate)
}
requestAnimationFrame(animate)

CSS 动画和过渡更适合简单视觉变化

如果只是位移、缩放、透明度、颜色这类属性变化，优先用 transition 或 @keyframes。它们由浏览器合成线程处理，不阻塞主线程，性能远超 JS 操作样式。

注意几个易错点：

transition 只在属性值“变化时触发”，比如从 opacity: 0 到 opacity: 1；但如果用 JS 快速连续设多次 style.opacity，可能只触发最后一次过渡
transform 和 opacity 是仅有的两个能触发硬件加速的 CSS 属性（在多数浏览器中），其他如 left、top 会引发频繁重排，卡顿明显
用 will-change: transform 提前提示浏览器要动画，但别滥用——它会提前分配图层内存，过度使用反而降低性能

Web Animations API（`element.animate()`）适合动态控制

当需要运行时生成动画、暂停/回放/调节速度，或者组合多个属性动画时，element.animate() 比纯 CSS 更灵活，也比手写 requestAnimationFrame 简洁。

它返回一个 Animation 对象，可直接调用 .pause()、.play()、.reverse()、.currentTime 等方法。

示例：让元素左右晃动三次

const anim = element.animate(
  [
    { transform: 'translateX(0)' },
    { transform: 'translateX(-10px)' },
    { transform: 'translateX(0)' },
    { transform: 'translateX(10px)' },
    { transform: 'translateX(0)' }
  ],
  {
    duration: 600,
    iterations: 3
  }
)

兼容性注意：IE 完全不支持，Safari 16.4+ 才支持 iterationStart 等高级参数，生产环境建议加降级（比如 fallback 到 requestAnimationFrame）。