讓彈跳球動畫化
重要性:5
要彈跳,我們可以使用 CSS 屬性 top
和 position:absolute
,將球放在具有 position:relative
的場地內。
場地的底部座標是 field.clientHeight
。CSS top
屬性是指球的上緣。因此,它應該從 0
到 field.clientHeight - ball.clientHeight
,這是球的上緣的最終最低位置。
要獲得「彈跳」效果,我們可以在 easeOut
模式中使用計時函數 bounce
。
以下是動畫的最終程式碼
let to = field.clientHeight - ball.clientHeight;
animate({
duration: 2000,
timing: makeEaseOut(bounce),
draw(progress) {
ball.style.top = to * progress + 'px'
}
});