Здравствуйте!
Случился злобный затуп и я не могу придумать правильную формулу для корректной отрисовки определенного количества пикселей за строго заданный промежуток времени.
Т.е. дано: к примеру высота элемента и время за которое ее нужно изменить.
Не понятно: правильная формула для скорости изменения пикселей.
Вот код взятый из учебника 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;
Но какой должна быть формула я не могу понять. Пробовал подставлять разные значения на угад и в итоге ничего хорошего не получилось.
Знатоки, подскажите пожалуйста!
