如何使用javascript构建简单的动画效果？【教程】

javaScript动画应使用requestAnimationFrame而非setTimeout/setInterval，因其自动对齐屏幕刷新率、后台暂停、统一调度；需递归调用并设停止条件，配合transform/opacity等GPU加速属性及缓动函数实现高性能动画。

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

为什么不用 setInterval 或 setTimeout 做动画

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

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

requestAnimationFrame 的基本写法和循环控制

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

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

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

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

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

立即学习“Java免费学习笔记（深入）”；

• 优先用 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 < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t; } 
function animate() { const progress = Math.min(elapsedTime / duration, 1); const eased = easeInOut(progress); element.style.transform = translateX(${eased * 300}px); if (progress < 1) requestAnimationFrame(animate); }

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

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