Совет по оптимизации(JS-Анимация)
 

В статье JS-Анимация автор дает рекомендации по оптимизации:

Большое количество таймеров сильно нагружают процессор.
Если вы хотите запустить несколько анимаций одновременно, например, показать много падающих снежинок, то управляйте ими с помощью одного таймера.
Дело в том, что каждый таймер вызывает перерисовку. Поэтому браузер работает гораздо эффективней, если для всех анимаций приходится делать одну объединенную перерисовку вместо нескольких.

Фреймворки обычно используют один setInterval и запускают все кадры в заданном интервале.


В общем вопрос. Как можно реализовать с помощью одного setInterval 2 анимации причем 2-я начинаеться и заканчиваеться позже, чем первая и движение идет по разным мат-законам.

допустим, у тебя есть приложение с методом рисования/перерисовки

app.draw();

внутри которого существует единый таймер. На этот таймер будут "опираться" твои анимации.

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

}

т.е. я правильно понял? Здесь будет создаваться один таймер, а не два?

судя по тому, что написал, ты ничего не понял)