Анимируйте мячик, прыгающий вправо
важность: 5
Сделайте отскок мяча вправо. Как в примере:
Напишите код для анимации. Расстояние слева 100px.
Возьмите решение предыдущей задачи Анимируйте прыгающий мячик за основу.
В задаче Анимируйте прыгающий мячик нам надо было анимировать только одно свойство. Теперь необходимо добавить ещё одно: elem.style.left.
Горизонтальная координата меняется по другому закону: она не «подпрыгивает», а постепенно увеличивается, сдвигая шар вправо.
Для этого мы можем написать ещё одну функцию animate.
В качестве временной функции можно использовать linear, но makeEaseOut(quad) будет выглядеть гораздо лучше.
Код:
let height = field.clientHeight - ball.clientHeight;
let width = 100;
// анимация top (прыжки)
animate({
duration: 2000,
timing: makeEaseOut(bounce),
draw: function(progress) {
ball.style.top = height * progress + 'px'
}
});
// анимация left (движение вправо)
animate({
duration: 2000,
timing: makeEaseOut(quad),
draw: function(progress) {
ball.style.left = width * progress + "px"
}
});