19 lines
701 B
Markdown
19 lines
701 B
Markdown
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:
|
|
|
|
```js
|
|
let to = field.clientHeight - ball.clientHeight;
|
|
|
|
animate({
|
|
duration: 2000,
|
|
timing: makeEaseOut(bounce),
|
|
draw(progress) {
|
|
ball.style.top = to * progress + 'px'
|
|
}
|
|
});
|
|
```
|