js实现减速
JavaScript 实现减速效果
在 JavaScript 中实现减速效果通常用于动画、游戏或滚动行为中，使运动逐渐变慢直至停止。以下是几种常见实现方法：
缓动函数（Easing Function）
使用缓动函数中的 ease-out 效果可实现减速。例如：
function easeOutQuad(t) {
return t * (2 - t);
}
let startTime;
function animate(currentTime) {
if (!startTime) startTime = currentTime;
const elapsed = currentTime - startTime;
const duration = 1000; // 动画持续时间（毫秒）
const progress = Math.min(elapsed / duration, 1);
const easedProgress = easeOutQuad(progress);
// 应用缓动值（例如移动元素）
element.style.transform = `translateX(${easedProgress * 100}px)`;
if (progress < 1) {
requestAnimationFrame(animate);
}
}
requestAnimationFrame(animate);物理减速（摩擦力模型）
通过模拟摩擦力逐步减少速度：
let speed = 10; // 初始速度
const friction = 0.95; // 摩擦系数（0~1）
function slowDown() {
speed *= friction;
if (Math.abs(speed) < 0.1) speed = 0; // 停止阈值
// 应用速度（例如移动元素）
element.style.left = `${parseFloat(element.style.left) + speed}px`;
if (speed !== 0) {
requestAnimationFrame(slowDown);
}
}
slowDown();CSS + JavaScript 结合
通过 CSS Transition 的 ease-out 曲线实现减速，JavaScript 触发变化：
element.style.transition = "transform 1s ease-out";
element.style.transform = "translateX(100px)";滚动减速效果
为页面滚动添加减速行为：
let targetScroll = 500;
let currentScroll = window.scrollY;
const decelerateScroll = () => {
currentScroll += (targetScroll - currentScroll) * 0.1;
window.scrollTo(0, currentScroll);
if (Math.abs(targetScroll - currentScroll) > 1) {
requestAnimationFrame(decelerateScroll);
}
};
decelerateScroll();注意事项
- 性能优化：优先使用
requestAnimationFrame而非setInterval。 - 停止条件：需设置速度或距离的阈值以避免无限计算。
- CSS 硬件加速：对 DOM 操作使用
transform比直接修改left/top更高效。
根据具体场景选择合适的方法，缓动函数适合动画，物理模型适合交互控制。
