纯 html + css + javascript 实现篮球弹跳效果

效果图

代码

html

<div class="ball">?</div>
<button class="go">go</button>

css

:root {
    --top: 0px;
}
.ball {
    position: absolute;
    top: var(--top);
    font-size: 100px;
}
.go {
    position: fixed;
    right: 80px;
    top: 50px;
}

javascript

let prev = 0;
// 动画持续时间
const duration = 3000;
// 球距离地面的高度
const height = 500;
function bounce(t) {
    if (!prev) {
        prev = t;
        requestAnimationFrame(bounce);
        return;
    }
    // 计算动画运行时间
    let diff = t - prev;
    // 目前的动画时间对应的 x 值
    let x = diff / duration;
    // 目前的动画时间对应的 y 值
    let y = easeOutBounce(x);
    // y 值对应的高度
    let top = y * height;
    document.documentElement.style.setProperty('--top', top + 'px');
    if (diff >= duration) {
        return;
    }
    requestAnimationFrame(bounce);
}

let go = document.querySelector(".go")
go.addEventListener('click', (e) => {
    prev = 0;
    requestAnimationFrame(bounce);
})

// 模拟弹跳效果的 timing function
// 参考：https://easings.net/#easeOutBounce
function easeOutBounce(x) {
    const n1 = 7.5625;
    const d1 = 2.75;
    if (x < 1 / d1) {
        return n1 * x * x;
    } else if (x < 2 / d1) {
        return n1 * (x -= 1.5 / d1) * x + 0.75;
    } else if (x < 2.5 / d1) {
        return n1 * (x -= 2.25 / d1) * x + 0.9375;
    } else {
        return n1 * (x -= 2.625 / d1) * x + 0.984375;
    }
}

在线演示

jsbin.com/labidan/edi…