当前位置：首页 > JavaScript

js实现阻尼

2026-02-01 14:10:28JavaScript

阻尼效果的实现方法

阻尼效果在JavaScript中通常用于模拟物理运动中的阻力，使运动逐渐减速直至停止。以下是几种常见的实现方式：

使用requestAnimationFrame实现阻尼动画

let position = 0;
let velocity = 10;
const damping = 0.9;

function animate() {
    velocity *= damping;
    position += velocity;

    if (Math.abs(velocity) < 0.01) {
        return; // 停止动画
    }

    element.style.transform = `translateX(${position}px)`;
    requestAnimationFrame(animate);
}

animate();

使用CSS transition实现阻尼效果

CSS的cubic-bezier函数可以模拟阻尼效果：

js实现阻尼

.element {
    transition: transform 1s cubic-bezier(0.1, 0.7, 0.1, 1.0);
}

数学公式实现

阻尼运动的基本公式： $$ x(t) = A e^{-bt} \cos(\omega t + \phi) $$ 其中：

$A$是初始振幅
$b$是阻尼系数
$\omega$是角频率
$\phi$是相位角

JavaScript实现：

js实现阻尼

function dampedOscillation(t, amplitude, damping, frequency, phase) {
    return amplitude * Math.exp(-damping * t) * Math.cos(frequency * t + phase);
}

使用现有库

一些现成的JavaScript库可以简化阻尼效果实现：

Popmotion：提供弹簧物理效果
GSAP：强大的动画库包含阻尼效果
Framer Motion：React动画库支持阻尼

滚动阻尼效果

为页面滚动添加阻尼：

let startY = 0;
let currentY = 0;
const dampingFactor = 0.3;

window.addEventListener('wheel', (e) => {
    currentY = startY + (-e.deltaY * dampingFactor);
    window.scrollTo(0, currentY);
    startY = currentY;
    e.preventDefault();
}, { passive: false });

以上方法可根据具体需求选择使用，数学公式实现提供了最精确的控制，而CSS和现有库方案则更便于快速实现。