当前位置：首页 > JavaScript

js实现减速

2026-03-14 09:50:57JavaScript

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)";

滚动减速效果

为页面滚动添加减速行为：

js实现减速

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();