retour au cours
Ce contenu n'est disponible que dans les langues suivantes :English, Español, 日本語, 한국어, Русский, Türkçe, 简体中文. Merci de

To bounce we can use CSS property top and position:absolute for the ball inside the field with position:relative.

The bottom coordinate of the field is field.clientHeight. The CSS top property refers to the upper edge of the ball. So it should go from 0 till field.clientHeight - ball.clientHeight, that’s the final lowest position of the upper edge of the ball.

To get the “bouncing” effect we can use the timing function bounce in easeOut mode.

Here’s the final code for the animation:

let to = field.clientHeight - ball.clientHeight;

animate({
  duration: 2000,
  timing: makeEaseOut(bounce),
  draw(progress) {
    ball.style.top = to * progress + 'px'
  }
});

Ouvrez la solution dans une sandbox.