js实现变速
JavaScript 实现变速动画的方法
使用 requestAnimationFrame 结合时间计算实现平滑的变速效果。通过控制速度函数（如缓入、缓出、弹性等）调整动画进程。
function animate({ duration, timing, draw }) {
const start = performance.now();
requestAnimationFrame(function animateFrame(time) {
let timeFraction = (time - start) / duration;
if (timeFraction > 1) timeFraction = 1;
const progress = timing(timeFraction);
draw(progress);
if (timeFraction < 1) {
requestAnimationFrame(animateFrame);
}
});
}常用缓动函数示例
线性运动（匀速）：
function linear(timeFraction) {
return timeFraction;
}缓入效果（开始慢）：
function easeInQuad(timeFraction) {
return Math.pow(timeFraction, 2);
}缓出效果（结束慢）：
function easeOutQuad(timeFraction) {
return 1 - Math.pow(1 - timeFraction, 2);
}实际应用案例
移动DOM元素从左侧到右侧：
const element = document.getElementById('box');
animate({
duration: 1000,
timing: easeOutQuad,
draw(progress) {
element.style.left = progress * 300 + 'px';
}
});贝塞尔曲线变速
使用CSS的cubic-bezier()函数等效的JavaScript实现：
function cubicBezier(p1x, p1y, p2x, p2y) {
return function(timeFraction) {
// 贝塞尔曲线计算逻辑
// 实际实现需要完整的三次方程求解
};
}
// 使用示例
const easeInOut = cubicBezier(0.42, 0, 0.58, 1);性能优化建议
避免在动画过程中触发重排操作。优先使用transform和opacity属性进行动画，这些属性会触发硬件加速：
// 优于直接修改left/top
element.style.transform = `translateX(${progress * 300}px)`;对于复杂动画场景，可以考虑使用专门的动画库如GSAP或anime.js，它们提供了更完善的变速控制和性能优化。
