JavaScript动画通过代码控制元素样式变化，利用requestAnimationFrame实现流畅效果，相比定时器更高效省电，适合复杂交互场景。
JavaScript 动画的核心在于通过代码控制元素的样式变化，并在短时间内连续更新，从而形成视觉上的动画效果。它不依赖 CSS 的 transition 或 animation，而是由 JavaScript 主动驱动，灵活性更高，适合复杂逻辑或与用户交互强相关的动效。
1. 基于定时器的动画实现
早期的 JavaScript 动画多使用 setTimeout 或 setInterval 来反复修改元素的样式属性。
例如，让一个 div 向右移动：
let pos = 0;
const elem = document.getElementById('box');
const timer = setInterval(() => {
pos += 5;
elem.style.left = pos + 'px';
if (pos >= 200) clearInterval(timer);
}, 30);
这种方式简单直接，但存在性能问题：无法与浏览器刷新率同步，容易丢帧或卡顿。
立即学习“Java免费学习笔记（深入）”；
2. 使用 requestAnimationFrame 优化动画
requestAnimationFrame（rAF） 是现代 Web 动画的推荐方式。它告诉浏览器你需要执行动画，浏览器会在下一次重绘前调用指定函数，确保动画流畅且节省资源。
rAF 的优势包括：
- 自动适配屏幕刷新率（通常 60Hz）
- 页面不可见时暂停调用，节省 CPU 和电量
- 比 setTimeout 更精确、更高效
示例：使用 rAF 实现平滑移动
function animate(elem, from, to, duration) {
const start = performance.now();
requestAnimationFrame(function step(now) {
const progress = (now - start) / duration;
const val = from + (to - from) * Math.min(progress, 1);
elem.style.transform = `translateX(${val}px)`;
if (progress < 1) {
requestAnimationFrame(step);
}
});
}
animate(document.getElementById('box'), 0, 200, 1000); // 1秒内移动
3. 添加缓动效果提升视觉体验
线性运动显得生硬，加入缓动函数可以让动画更自然。常见的有 ease-in、ease-out、cubic-bezier 等。
例如，使用 easeOutQuad 函数：
function easeOutQuad(t) {
return t * (2 - t);
}
// 在 rAF 中使用：
const easedProgress = easeOutQuad(Math.min(progress, 1));
结合不同的数学函数，可以实现弹跳、回弹等丰富效果。
4. 实际开发中的建议
为了写出高效、可维护的 JavaScript 动画，注意以下几点：
- 优先使用 transform 和 opacity 属性，它们由合成器处理，性能更好
- 避免频繁读取 layout 属性（如 offsetTop、clientWidth），防止强制重排
- 将动画逻辑封装成可复用函数或类，便于管理多个动画
- 考虑使用成熟的动画库如 GSAP，应对复杂场景
基本上就这些。掌握 requestAnimationFrame 和缓动函数，就能实现大多数需要 JavaScript 驱动的前端动效。不复杂但容易忽略细节。
