Проблема с анимацией размера JavaScript

Question

Я нахожусь в процессе написания библиотеки JavaScript, и у меня возникла проблема. У меня есть функция, которая изменяет размеры элементов, все работает хорошо, но у меня также есть и анимированная версия, которая изменяет их размер за указанный период времени. Сценарий, кажется, зависает, когда он запускается, и кажется, что это связано с циклом while, вот мой код.

// Resize in timeframe
// Work out distance
var widthDiff = width - element.offsetWidth;
var heightDiff = height - element.offsetHeight;

// Work out pixels per milisecond
var widthppm = widthDiff / timeframe;
var heightppm = heightDiff / timeframe;

// Set up times
var d = new Date();
var endtime = d.getTime() + timeframe;

// Get the original width and height
var oldwidth = element.offsetWidth;
var oldheight = element.offsetHeight;

var iteration;

// Loop through until done
while(d.getTime() >= endtime)
{
    iteration = timeframe - (endtime - d.getTime());
    element.style.width = oldwidth + (iteration * widthppm) + 'px';
    element.style.height = oldheight + (iteration * heightppm) + 'px';
}

Все, что я могу вам сейчас сказать, это то, что аргументы (элемент, ширина, высота, таймфрейм) работают нормально, это зависит от моего алгоритма. Любая помощь будет отличной, спасибо!

Answer 1

должно быть d.getTime() <= endtime.
Акцент на <= вместо >=.

Кроме того, вам нужно получить новую метку времени внутри цикла, поскольку d.getTime() всегда будет одинаковым ( время, в которое оно было создано ) ..

так

while(d.getTime() <= endtime)
{
    iteration = timeframe - (endtime - d.getTime());
    element.style.width = oldwidth + (iteration * widthppm) + 'px';
    element.style.height = oldheight + (iteration * heightppm) + 'px';
    d = new Date();
}

Но вы должны использовать тайм-аут / интервал для анимации, а не цикл, поскольку это заблокирует выполнение остальных сценариев.

Вот несколько уроков по анимации с setTimeout и setInterval

• http://www.schillmania.com/content/projects/javascript-animation-1/
• http://www.schillmania.com/content/projects/javascript-animation-2/