Javascript-форум - Анимировать N пикселей за T секунд

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Анимировать N пикселей за T секунд (https://javascript.ru/forum/misc/66175-animirovat-n-pikselejj-za-t-sekund.html)

Анимировать N пикселей за T секунд

Здравствуйте!

Случился злобный затуп и я не могу придумать правильную формулу для корректной отрисовки определенного количества пикселей за строго заданный промежуток времени.

Т.е. дано: к примеру высота элемента и время за которое ее нужно изменить.

Не понятно: правильная формула для скорости изменения пикселей.

Вот код взятый из учебника JavaScript.ru:

<!DOCTYPE HTML>
<html>

<head>
  <style>
    #train {
      position: relative;
      cursor: pointer;
      width: 100px;
      height: 100px;
      background: red;
    }
  </style>
</head>

<body>

  <img id="train" src="https://js.cx/clipart/train.gif">


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

    };

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

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

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

        draw(timePassed, length);

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

      });
    }

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


</body>

По умолчанию скорость можно отрегулировать вот тут:

var current = timePassed / 5;

Но какой должна быть формула я не могу понять. Пробовал подставлять разные значения на угад и в итоге ничего хорошего не получилось.

Знатоки, подскажите пожалуйста!:-?

Цитата:

Сообщение от xShift

Знатоки, подскажите пожалуйста!

JS не является ЯП в реальном времени...
Т.е. не факт, что твоя задача решаема. Если ты начнешь "бить" временной промежуток на некие таймауты, ты в сумме рискуешь получить интервал больше заданного.

Да, но это значение не так велико и решается жесткой установкой стиля результирующего вида в конце всех итераций таймера.

Мне нужнее формула. Проблему опичанную вами я знаю как решить.

Цитата:

Сообщение от ksa (Сообщение 436528)

в Jquery она как-то решена. Но я не смог разобраться в их сырцах - слишком мудрено.

Решено.

Спасибо чуваку: 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';
    };

Вообще задача школьная, но у меня ТАКОЙ затуп :D

Все гениальное - просто. Спасибо.