返回課程

讓彈跳球動畫化

重要性:5

製作一個彈跳球。按一下看看它應該是什麼樣子

開啟沙盒進行任務。

要彈跳,我們可以使用 CSS 屬性 topposition:absolute,將球放在具有 position:relative 的場地內。

場地的底部座標是 field.clientHeight。CSS top 屬性是指球的上緣。因此,它應該從 0field.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'
  }
});

在沙盒中開啟解決方案。