JavaScript动画实现技巧与效果优化

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《JavaScript动画实现方法及效果创建技巧》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

requestAnimationFrame 是最可控的浏览器原生动画方案，需用 timestamp 计算 deltaTime 以保证速率稳定，并手动管理启停；CSS transition/animation 适合声明式交互动画，Web Animations API 提供精细控制但兼容性有限。

用 requestAnimationFrame 手写动画循环最可控

浏览器原生支持的 requestAnimationFrame 是实现流畅 JavaScript 动画的底层基础。它比 setTimeout 或 setInterval 更精准，能自动适配屏幕刷新率（通常是 60fps），且在标签页不可见时暂停执行，节省资源。

常见错误是直接嵌套调用 requestAnimationFrame 却没做时间差计算，导致动画速率受帧率波动影响——比如滚动变慢时动画突然拖沓。

• 必须传入一个带 timestamp 参数的回调函数，用它计算与上一帧的时间差（deltaTime），再按需更新状态
• 避免在动画帧中频繁读取 offsetTop、getComputedStyle 等触发重排/重绘的属性
• 需要手动控制启停：保存返回的 id，用 cancelAnimationFrame(id) 中断

let animationId = null;
let startTime = null;
<p>function animate(timestamp) {
if (!startTime) startTime = timestamp;
const deltaTime = timestamp - startTime;</p><p>// 示例：线性移动元素
const progress = Math.min(deltaTime / 2000, 1); // 2秒完成
element.style.transform = <code>translateX(${progress * 300}px)</code>;</p><p>if (progress < 1) {
animationId = requestAnimationFrame(animate);
}
}
animationId = requestAnimationFrame(animate);</p>

CSS transition 和 animation 适合声明式交互动画

纯 CSS 方案不占用主线程 JS 执行时间，GPU 加速潜力大，性能通常优于 JS 操作样式。但它的控制粒度较粗：无法动态调整关键帧、不能精确监听中间状态、难以响应复杂逻辑条件。

典型踩坑点是给元素同时设置 transition 和 JS 修改 style.transform，结果因 CSS 层叠优先级或重排触发时机导致动画跳变或失效。

• transition 适用于「状态切换」场景，比如 hover、focus、class 切换，只需指定属性名、持续时间和缓动函数
• animation 适合「固定时序」效果，如加载 spinner、入场动效，用 @keyframes 定义关键帧，再通过 animation-name 绑定
• 务必显式设置 transform: translateZ(0) 或 will-change: transform 来触发硬件加速（尤其在 Safari 中）

用 Web Animations API 替代 jQuery.animate() 做精细控制

现代浏览器已普遍支持 Element.animate()，它是介于纯 CSS 和手写 requestAnimationFrame 之间的折中方案：声明式定义动画参数，又提供播放、暂停、取消、事件监听等运行时控制能力。

相比旧式库（如 jQuery.animate），它不依赖 DOM 操作模拟帧循环，也不强制重排，性能更接近原生 CSS；但兼容性仍需留意——IE 完全不支持，Safari 13.1+ 才完整支持关键特性。

• 动画参数对象中，duration 单位是毫秒（不是字符串），easing 可传贝塞尔曲线或预设值如 "ease-in-out"
• 返回的 Animation 对象有 onfinish、oncancel 回调，可绑定清理逻辑
• 多个动画可共用一个 timeline 实现同步，但实际项目中很少用到，多数情况直接调用 element.animate() 更简单

const anim = element.animate(
  [
    { transform: 'scale(1)', opacity: 1 },
    { transform: 'scale(1.2)', opacity: 0.7 }
  ],
  {
    duration: 300,
    easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
    fill: 'forwards'
  }
);
<p>anim.onfinish = () => console.log('done');
// anim.pause(); anim.play(); anim.cancel();</p>

什么时候该放弃 JS 动画？

当动画只涉及简单入场/出场、颜色渐变、尺寸缩放，且不需要响应用户实时输入（如拖拽跟随、滚动视差）时，优先用 CSS。JS 动画真正的价值在于「逻辑驱动」：比如根据鼠标位置实时计算旋转角度、结合传感器数据更新视角、在 Canvas 中绘制粒子系统。

容易被忽略的是动画的「中断处理」：CSS 动画被 class 移除后会立即跳到目标态，而 JS 动画若没在 cancelAnimationFrame 后重置样式，常留下残影或错位。更隐蔽的问题是，在 React/Vue 等框架中直接操作 DOM 动画，可能和虚拟 DOM 更新节奏冲突，导致样式被覆盖。

本篇关于《JavaScript动画实现技巧与效果优化》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！