JS控制CSS动画实现教程

本文深入解析了如何用 JavaScript 高效实现流畅动画，重点对比了 requestAnimationFrame 与 setTimeout 的本质差异——前者天然对齐浏览器重绘节奏、避免丢帧，是高性能动画的基石；同时强调实践要点：手动递归调用、规避帧内重耗操作、使用 performance.now() 精确计时，并详解 transform 和 opacity 的“合成层”优势——仅触发 GPU 加速合成，彻底避开昂贵的回流与重绘；还介绍了更现代的 element.animate() API，支持动态关键帧、运行时控制与事件监听；最后提醒动画终结时务必清理资源，正确重置样式、取消动画实例，防止内存泄漏——掌握这些，你就能写出既丝滑又健壮的 JS 动画代码。

用 requestAnimationFrame 控制动画节奏比 setTimeout 更稳

浏览器重绘有固定帧率（通常是 60fps），硬用 setTimeout 设 16ms 定时器并不能保证准时执行，还可能因主线程阻塞丢帧。requestAnimationFrame 会把回调交给浏览器统一调度，在下一次重绘前执行，天然对齐刷新节奏。

实操建议：

• 每次动画更新后，必须主动调用下一次 requestAnimationFrame，它不是循环自动触发的
• 避免在动画帧里做大量计算或 DOM 查询，否则拖慢帧率
• 用 performance.now() 替代 Date.now() 获取更精确的时间戳，方便实现匀速、缓动等逻辑

let start = performance.now();
function animate(timestamp) {
  const elapsed = timestamp - start;
  const progress = Math.min(elapsed / 2000, 1); // 2秒动画
  element.style.transform = `translateX(${progress * 200}px)`;
  if (progress <h3>直接改 <code>style.transform</code> 和 <code>style.opacity</code> 性能最好</h3><p>CSS 动画中，只有 <code>transform</code>（<code>translate</code>/<code>scale</code>/<code>rotate</code>）和 <code>opacity</code> 属于“只触发合成”的属性，修改它们不会触发回流（layout）和重绘（paint），只走合成线程，GPU 加速明显。</p><p>常见错误现象：</p>

• 用 style.left / style.top 移动元素 → 强制同步布局，卡顿明显
• 动画中频繁读取 offsetLeft 或 getBoundingClientRect() → 触发回流，帧率骤降
• 给 width / height 做动画 → 每次都重排布局，开销极大

正确做法：所有位移、缩放、旋转、透明度变化，一律走 transform 和 opacity。

用 element.animate() API 实现声明式动画

element.animate() 是现代浏览器原生支持的 Web Animations API，比纯 JS 手动控制更简洁，也比 CSS @keyframes 更灵活——可以动态生成关键帧、随时暂停/反转/调整时间。

使用场景：

• 需要运行时计算终点位置（比如跟随鼠标、响应滚动）
• 多个元素按不同延迟依次动画（不用写一堆 setTimeout）
• 需要监听动画完成事件，且兼容性要求不覆盖 IE

注意参数差异：

• 关键帧是对象数组，如 [{ opacity: 0 }, { opacity: 1 }]，不是 CSS 字符串
• 选项对象里用 duration（毫秒）、delay、easing（如 "ease-in-out"），不用 ms 单位
• 返回值是 Animation 对象，可调用 .pause()、.reverse()、监听 onfinish

const anim = element.animate(
  [{ transform: 'scale(1)' }, { transform: 'scale(1.2)' }],
  { duration: 300, easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)' }
);
anim.onfinish = () => console.log('done');

动画结束时记得清理状态或释放资源

手动用 requestAnimationFrame 的动画，如果没做终止判断或没清空引用，容易导致内存泄漏或意外持续执行。用 element.animate() 虽然自动管理，但若反复调用没取消前一个，也会堆积动画实例。

容易被忽略的地方：

• 在组件卸载、元素 remove() 前，显式调用 anim.cancel() 或清除 requestAnimationFrame ID
• 用 transform 动画后，若需恢复默认状态，别直接设 ''（可能残留内联样式），而是设回 'none' 或用 style.removeProperty('transform')
• 监听 animationend 事件时，注意它只对 CSS animation 触发，对 JS 动画无效；JS 动画要用 onfinish 或自己判断进度

好了，本文到此结束，带大家了解了《JS控制CSS动画实现教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！