当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript动画实现技巧与效果优化

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

2026-01-31 09:44:30 0浏览收藏

用 `requestAnimationFrame` 手写动画循环最可控

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

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

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

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

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'
  }
);
anim.onfinish = () => console.log('done');
// anim.pause(); anim.play(); anim.cancel();

什么时候该放弃 JS 动画？

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

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

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