js 弹跳效果算法

let startY = 0; // 初始位置
let velocityY = 0; // 初始速度
const gravity = 0.5; // 重力加速度
const bounciness = 0.7; // 弹簧系数
const minHeight = 50; // 最小高度

function update() {
    velocityY += gravity; // 更新速度
    startY += velocityY; // 更新位置

    // 检测是否到达地面
    if (startY > groundLevel) {
        startY = groundLevel;
        velocityY = -velocityY * bounciness; // 反弹
    }

    // 更新元素位置
    element.style.transform = `translateY(${startY}px)`;

    requestAnimationFrame(update);
}

requestAnimationFrame(update);

function easeOutQuad(t, b, c, d) {
    t /= d;
    return -c * t * (t - 2) + b;
}

let startTime = null;
const duration = 1000; // 动画持续时间

function update(timestamp) {
    if (!startTime) startTime = timestamp;
    const elapsed = timestamp - startTime;
    const progress = Math.min(elapsed / duration, 1);
    const newY = easeOutQuad(elapsed, startY, groundLevel - startY, duration);

    element.style.transform = `translateY(${newY}px)`;

    if (progress < 1) {
        requestAnimationFrame(update);
    }
}

requestAnimationFrame(update);