32 lines
828 B
Markdown
32 lines
828 B
Markdown
In the task <info:task/animate-ball> we had only one property to animate. Now we need one more: `elem.style.left`.
|
|
|
|
The horizontal coordinate changes by another law: it does not "bounce", but gradually increases shifting the ball to the right.
|
|
|
|
We can write one more `animate` for it.
|
|
|
|
As the time function we could use `linear`, but something like `makeEaseOut(quad)` looks much better.
|
|
|
|
The code:
|
|
|
|
```js
|
|
let height = field.clientHeight - ball.clientHeight;
|
|
let width = 100;
|
|
|
|
// animate top (bouncing)
|
|
animate({
|
|
duration: 2000,
|
|
timing: makeEaseOut(bounce),
|
|
draw: function(progress) {
|
|
ball.style.top = height * progress + 'px'
|
|
}
|
|
});
|
|
|
|
// animate left (moving to the right)
|
|
animate({
|
|
duration: 2000,
|
|
timing: makeEaseOut(quad),
|
|
draw: function(progress) {
|
|
ball.style.left = width * progress + "px"
|
|
}
|
|
});
|
|
```
|