Анимируйте падение мяча с отскоками вправо

Заставьте мяч падать вправо. Кликните, чтобы увидеть в действии.

Напишите код, который будет анимировать мяч. Дистанция вправо составляет 100px.

Исходный документ: tutorial/browser/animation/ball-bounce-src/index.html.

В нём есть мяч, animate и набор delta-функций.

Решение

Посмотрите задачу Анимируйте мяч. Там создаётся подпрыгивающий мяч. А для решения этой задачи нам нужно добавить еще одну анимацию для elem.style.left.

Горизонтальная координата меняется по другому закону, нежели вертикальная. Она не «подпрыгивает», а постоянно увеличивается, постепенно сдвигая мяч вправо.

Мы могли бы применить для неё linear, но тогда горизонтальное движение будет будет отставать от скачков мяча. Более красиво будет что-то типа makeEaseOut(quad).

Код:

img.onclick = function() {

  var height  = document.getElementById('field').clientHeight - img.clientHeight
  var width  = 100
  
  animate({
    delay: 20,
    duration: 1000,
    delta: makeEaseOut(bounce), 
    step: function(delta) {
      img.style.top = height*delta + 'px'
    }
  });
  
*!*
  animate({
    delay: 20,
    duration: 1000, 
    delta: makeEaseOut(quad),
    step: function(delta) {
      img.style.left = width*delta  + "px"
    }
  }); 
*/!*
}

Полное решение: tutorial/browser/animation/ball-bounce-right/index.html.

#245