돌아가기
이 글은 다음 언어로만 작성되어 있습니다. English, Español, 日本語, Русский, 简体中文. 한국어 번역에 참여해주세요.

Animate the bouncing ball

중요도: 5

Make a bouncing ball. Click to see how it should look:

샌드박스를 열어 정답을 작성해보세요.

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 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'
  }
});

샌드박스를 열어 정답을 확인해보세요.