使用requestAnimationFrame结合缓动函数可实现流畅动画。它通过适配屏幕刷新率、自动暂停不可见页面并同步渲染，避免卡顿与耗电；配合ease-in-out等缓动函数，使运动更自然，提升视觉效果与性能表现。
在实现流畅的JavaScript动画时，缓动函数和帧率控制是两个核心要素。它们共同决定了动画的视觉质量和性能表现。直接使用setTimeout或setInterval虽然可以实现简单动画，但容易导致卡顿、掉帧或设备耗电过高。现代浏览器提供了更高效的方案来处理这些问题。
缓动函数：让动画更自然
缓动函数（Easing Function）定义了动画在时间轴上的变化速率。它控制元素从起点到终点的运动节奏，比如先快后慢、先加速再减速等。没有缓动的线性动画会显得生硬，而合理的缓动能极大提升用户体验。
常见的缓动类型包括：
- linear：匀速运动，每帧位移相同
- ease-in：开始慢，逐渐加快
- ease-out：开始快，结束前变慢
- ease-in-out：中间快，两头慢
这些效果可通过数学函数实现。例如，一个简单的二次缓动函数如下：
立即学习“Java免费学习笔记（深入）”；
function easeInQuad(t, b, c, d) {return c * (t /= d) * t + b;
}
其中t是当前经过的时间，b是起始值，c是变化总量，d是总持续时间。这类函数广泛应用于自定义动画库中。
使用requestAnimationFrame进行帧率控制
相比传统定时器，requestAnimationFrame（简称rAF）是浏览器专为动画设计的API。它会在下一次重绘前调用回调函数，并自动适配屏幕刷新率（通常60Hz），从而避免过度绘制和撕裂现象。
rAF的优势包括：
- 浏览器在标签页不可见时会暂停调用，节省资源
- 系统可根据负载动态调整调用频率以保持流畅
- 与CSS动画和滚动事件同步，减少冲突
基本用法如下：
function animate(currentTime) {// 计算已过去的时间
const elapsed = currentTime - startTime;
// 更新元素位置
element.style.left = easeInQuad(elapsed, 0, 100, duration) + 'px';
// 继续下一帧
if (elapsed requestAnimationFrame(animate);
}
}
const startTime = performance.now();
requestAnimationFrame(animate);
结合缓动与rAF实现高质量动画
将缓动函数与requestAnimationFrame结合，可以构建高性能、视觉舒适的动画系统。关键在于根据真实时间差计算进度，而不是依赖固定间隔。
实际开发中的建议：
- 使用
performance.now()获取高精度时间戳 - 在每一帧中重新计算动画进度（0到1之间的值）
- 将进度传入缓动函数得到插值结果
- 更新DOM时尽量操作
transform或opacity，避免触发重排
这样既能保证动画平滑，又能适应不同设备的性能差异。
基本上就这些。掌握缓动函数的设计原理和rAF的正确使用方式，是构建专业级JavaScript动画的基础。不复杂但容易忽略。
