JavaScript动画制作入门教程

本文深入解析了如何用 JavaScript 制作高性能、流畅且可控的简单动画，核心强调摒弃低效的 setTimeout/setInterval，转而使用浏览器原生调度的 requestAnimationFrame——它自动对齐屏幕刷新率、后台自动暂停、统一协调多动画，兼顾顺滑性与省电性；同时详解了递归调用写法、停止条件设计、cancelAnimationFrame 中断机制，并指出必须配合 GPU 加速属性（如 transform 和 opacity）避免重排，辅以轻量逻辑与精准时间计算（performance.now()），再通过自定义缓动函数（如 easeInOut）赋予动画自然节奏，最终揭示：真正专业的动画不在于“能动”，而在于“动得准、动得省、动得可控”。

JavaScript 构建简单动画，核心不是靠 setTimeout 硬拖帧，而是用 requestAnimationFrame —— 它由浏览器调度，更顺滑、更省电、自动节流。

为什么不用 setInterval 或 setTimeout 做动画

它们不感知屏幕刷新节奏，容易丢帧或卡顿；在页面后台时仍运行，浪费资源；时间间隔难精准匹配 60fps（约 16.6ms/帧）。

• requestAnimationFrame 自动对齐显示器刷新率（通常是 60Hz），实际帧率可能更高或更低，但始终“该画才画”
• 页面不可见时自动暂停，恢复可见后继续，无需手动控制
• 多个动画共存时，浏览器统一调度，避免互相抢占主线程

requestAnimationFrame 的基本写法和循环控制

它只执行一次，想持续动画必须在回调里递归调用自己。别忘了加停止条件，否则无限执行。

function animate() {
  // 更新元素位置/透明度/旋转等
  element.style.transform = `translateX(${x}px)`;
<p>// 下一帧继续
if (x < 400) {
requestAnimationFrame(animate);
}
}
requestAnimationFrame(animate);</p>

• 不要写成 requestAnimationFrame(animate())（带括号是立即执行）
• 用 cancelAnimationFrame(id) 可中途终止，requestAnimationFrame 返回一个 ID，需提前保存
• 动画逻辑尽量轻量，避免在帧回调里做 DOM 查询、复杂计算或触发重排

配合 CSS transform 和 opacity 实现高性能动画

直接改 left、top 或 width 会触发 Layout（布局重排），开销大；而 transform 和 opacity 属于合成层属性，走 GPU 加速路径。

• 优先用 transform: translateX() 替代 left，用 transform: scale() 替代 width/height
• 避免同时读写样式（如先 offsetLeft 再改 style.left），会强制同步 Layout
• 如果动画元素内容不变，可加 will-change: transform 提前提示浏览器提升图层（但别滥用）

简单缓动效果怎么加（不用库）

线性运动太机械，加个 ease-in-out 就自然得多。用时间比例 t（0→1）套入缓动函数即可，不需要完整贝塞尔曲线。

function easeInOut(t) {
  return t function animate() {
const progress = Math.min(elapsedTime / duration, 1);
const eased = easeInOut(progress);
element.style.transform = <code>translateX(${eased * 300}px)</code>;
if (progress < 1) requestAnimationFrame(animate);
}

• 时间计算建议用 performance.now()，比 Date.now() 更精确（微秒级）
• 别在每次 requestAnimationFrame 回调里重新计算起始时间，应在动画启动时记录一次 startTime
• 缓动函数返回值范围必须是 [0, 1]，否则位移会超界或反向

真正难的不是让东西动起来，而是动得准、动得省、动得可控——比如暂停/恢复、动态调整持续时间、与用户交互（如 hover 中断）无缝衔接。这些细节没封装好，再“简单”的动画也会在真实项目里露馅。

终于介绍完啦！小伙伴们，这篇关于《JavaScript动画制作入门教程》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！