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 的优势包括：
闪灵CMS企业建站系统是淄博闪灵网络科技有限公司开发的一款专门为企业建站提供解决方案的产品，前端模板样式主打HTML5模板，以动画效果好、页面流畅、响应式布局为特色，程序主体采用PHP+MYSQL构架，拥有独立自主开发的一整套函数、标签系统，具有极强的可扩展性，设计师可以非常简单的开发出漂亮实用的模板。系统自2015年发布第一个版本以来，至今已积累上万用户群，为上万企业提供最优质的建站方案。
- 自动适配屏幕刷新率（通常 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 驱动的前端动效。不复杂但容易忽略细节。
