Показать сообщение отдельно
  #4 (permalink)  
Старый 29.11.2016, 18:32
Аватар для xShift
Профессор
Отправить личное сообщение для xShift Посмотреть профиль Найти все сообщения от xShift
 
Регистрация: 22.11.2016
Сообщений: 212

Решено.

Спасибо чуваку: https://www.viget.com/articles/time-based-animation

train.onclick = function() {
      animate(500,1000);

    };

    // Рисует функция draw
    // Продолжительность анимации duration
    function animate(length,duration) {
      var start = performance.now();
      var v = length / duration;

      requestAnimationFrame(function animate(time) {
        
        // определить, сколько прошло времени с начала анимации
        var timePassed = time - start;

        // возможно небольшое превышение времени, в этом случае зафиксировать конец
        if (timePassed > duration) timePassed = duration;

        draw(timePassed, (v * timePassed));

        // если время анимации не закончилось - запланировать ещё кадр
        if (timePassed < duration) {
          requestAnimationFrame(animate);
        }

      });
    }

    // нарисовать состояние анимации в момент timePassed
    function draw(timePassed, length) {
        train.style.height = length + 'px';
    };


Вообще задача школьная, но у меня ТАКОЙ затуп
Ответить с цитированием