Предположим, что существует такая потребность в анимации: изменить ширину DIV с 100 пикселей до 200 пикселей. Написанный код может выглядеть так:
Кода -копия выглядит следующим образом:
<div id = "test1"> </div>
Функция animate1 (элемент, EndValue, DOURY) {
var startTime = new Date (),
startValue = parseint (element.style.width),
Шаг = 1;
var -timerid = setInterval (function () {
var nextValue = parseint (element.style.width) + step;
element.style.width = nextValue + 'px';
if (nextvalue> = endvalue) {
ClearInterval (Timerid);
// трудоемкий для отображения анимации
element.innerhtml = новая дата - StartTime;
}
}, продолжительность / (EndValue - startValue) * step);
}
animate1 (document.getElementbyId ('test1'), 200, 1000);
Принцип состоит в том, чтобы увеличивать 1px каждый раз до 200px. Тем не менее, время отображения после окончания анимации составляет более 1 с (обычно около 1,5 с). Причина в том, что SetInterval не может строго гарантировать интервал выполнения.
Есть ли лучший способ сделать это? Давайте сначала посмотрим на проблему математики начальной школы:
Кода -копия выглядит следующим образом:
Здание A и здание B было на расстоянии 100 метров друг от друга. Человек пошел от здания А до здания Б на постоянной скорости. Пройдя 5 минут, он прибыл в пункт назначения. Как далеко он был от строительства на третьей минуте?
Формула расчета для расчета расстояния определенного времени во время постоянной скорости: расстояние * Время/время тока. Таким образом, ответ должен быть 100 * 3/5 = 60.
Вдохновение из этого вопроса заключается в том, что путешествие определенного момента можно рассчитать с помощью определенной формулы. Точно так же значение определенного момента в процессе анимации также можно рассчитать с помощью формул вместо накопления:
Кода -копия выглядит следующим образом:
<div id = "test2"> </div>
Функция animate2 (элемент, Endvalue, Duration) {
var startTime = new Date (),
startValue = parseint (element.style.width);
var -timerid = setInterval (function () {
var penestage = (новая дата - начало) / продолжительность;
var Stepvalue = startValue + (EndValue - StartValue) * процент;
element.style.width = Stepvalue + 'px';
if (процент> = 1) {
ClearInterval (Timerid);
element.innerhtml = новая дата - StartTime;
}
}, 13);
}
animate2 (document.getElementbyId ('test2'), 200, 1000);
После этого улучшения вы можете видеть, что время выполнения анимации займет только 10 мс. Однако проблема не была полностью решена. Если вы проверете элемент Test2 в инструменте разработки браузера, вы обнаружите, что конечная ширина Test2 может быть более 200 пикселей. Если вы тщательно проверьте код функции Animate2, вы найдете:
1. Значение процента может быть превышает 1, что может быть решено путем ограничения максимального значения по математике. Мин.
2. Даже если стоимость процента гарантированно будет не более 1, если конечная стоимость или стартовая версия является десятичным значением, значение (EndValue - StartValue) * процент может вызвать ошибки, поскольку точность десятичной операции Javascript является недостаточной. На самом деле, нам нужно убедиться, что точность окончательного значения, поэтому, когда процент составляет 1, просто используйте конечную стоимость напрямую.
Таким образом, код функции animate2 изменяется на:
Кода -копия выглядит следующим образом:
Функция animate2 (элемент, Endvalue, Duration) {
var startTime = new Date (),
startValue = parseint (element.style.width);
var -timerid = setInterval (function () {
// Убедитесь, что процент не превышает 1
var penestage = math.min (1, (новая дата - начало) / продолжительность);
var Stepvalue;
if (процент> = 1) {
// обеспечить точность окончательного значения
Stepvalue = EndValue;
} еще {
Stepvalue = startValue + (EndValue - startValue) * процент;
}
element.style.width = Stepvalue + 'px';
if (процент> = 1) {
ClearInterval (Timerid);
element.innerhtml = новая дата - StartTime;
}
}, 13);
}
Есть еще один последний вопрос: почему интервал SetInterval установлен на 13 мс? Причина в том, что скорость обновления монитора в настоящее время обычно не превышает 75 Гц (то есть обновляется 75 раз в секунду, что означает, что он обновляется каждые 13 мс), и синхронизировать интервал с частотой обновления лучше.