Введено
Таймеры всегда были основной технологией анимации JavaScript. Ключ к написанию петли анимации состоит в том, чтобы знать, сколько времени уместна задержка. С одной стороны, интервал петли должен быть достаточно коротким, чтобы различные эффекты анимации могли показаться гладкими и гладкими; С другой стороны, интервал петли должен быть достаточно длинным, чтобы браузер мог сделать изменения.
Частота обновления большинства компьютерных мониторов составляет 60 Гц, что примерно эквивалентно перекраске 60 раз в секунду. Большинство браузеров будут ограничивать операцию перерывов, чтобы не превышать частоту перерывов монитора, потому что даже если она превышает эту частоту, пользовательский опыт не улучшится. Следовательно, оптимальный интервал петли для самой плавной анимации составляет 1000 мс/60, что приблизительно равно 16,6 мс.
И проблема с SetTimeout и SetInterval в том, что они не являются точными. Их внутренний работающий механизм определяет, что параметры интервала времени на самом деле просто указывают, как долго добавлять код анимации в очередь потока пользовательского интерфейса браузера, чтобы дождаться выполнения. Если в очередь были добавлены другие задачи, код анимации должен ждать, пока предыдущие задачи не будут выполнены перед выполнением их.
RequestAnimationFrame использует системные интервалы времени для поддержания наилучшей эффективности рисования и не будет перегружены из -за короткого интервала, что увеличит накладные расходы; Также использование анимации не будет застрять и не плавно, потому что интервальное время слишком длинное, поэтому различные эффекты веб -анимации могут иметь единый механизм обновления, тем самым экономия системные ресурсы, улучшая производительность системы и улучшая визуальные эффекты
Функции
【1】 request requestAnimationFrame сосредоточит все операции DOM в каждом кадре, заполняется в одном перекраске или рефере, а временный интервал перекрашивания или рефтова за ним следуют частота обновления браузера
【2】 В скрытых или невидимых элементах requestAnimationFrame не будет перекрашен или перепрофилирована, что, конечно, означает меньше процессора, графического процессора и памяти
【3】 requestAnimationFrame - это API, предоставляемый браузером, специально для анимации. При запуске браузер автоматически оптимизирует вызов метода. Если страница не активирована, анимация автоматически сделает паузу, эффективно сохраняя накладные расходы ЦП
использовать
Использование requestAnimationFrame очень похоже на SetTimeout, за исключением того, что нет необходимости устанавливать интервал времени. RequestAnimationFrame использует функцию обратного вызова в качестве параметра, которая вызывается перед перекрашением браузера. Он возвращает целое число, представляющее номер таймера, который можно передать в CancelanimationFrame, чтобы отменить выполнение этой функции
requestId = requestAnimationFrame (обратный вызов); // Консоль выходов 1 и 0VAR Timer = requestAnimationFrame (function () {console.log (0);}); console.log (таймер); // 1 Метод cancelanimationFrame используется для отмены таймера // Консоль выводит ничто не VAR Timer = requestAnimationFrame (function () {console.log (0);}); CancelanimationFrame (таймер);Вы также можете использовать возвратное значение, чтобы отменить его напрямую
var Timer = requestAnimationFrame (function () {console.log (0);}); CancelanimationFrame (1);совместимый
IE9-Browser не поддерживает этот метод, вы можете использовать SetTimeout для совместимости
if (! window.RequestAnimationFrame) {var в последний раз = 0; window.RequestAnimationFrame = function (обратный вызов) {var currtime = new Date (). getTime (); var timetoCall = math.max (0,16.7- (currtime - в последний раз); var id = windowtimeout (function () {) () {callback (currtimeoc); = curtrime + timetocall; return id;}} if (! window.cancelanimationFrame) {window.cancelanimationFrame = function (id) {cleartimeout (id);};}приложение
Теперь используйте три метода SetInterval, SetTimeout и RequestAnimationFrame, чтобы создать простой системный эффект.
【1】 SetInterval
<div id = "mydiv" style = "фоновый цвет: lightblue; ширина: 0; высота: 20px; линейная-высота: 20px;"> 0%</div> <button id = "btn"> run </button> <script> var timer; btn.onclick = function () {clearInterval (timer); setInterval (function () {if (parseint (mydiv.style.width) <500) {mydiv.style.width = parseint (mydiv.style.width) + 5 + 'px'; mydiv.innerhtml = parseint (mydiv.style.width)/5 + '% } else {clearInterval (timer);}}, 16);} </script>【2】 Settimeout
<div id = "mydiv" style = "фоновый цвет: lightblue; width: 0; height: 20px; line-hight: 20px;"> 0%</div> <button id = "btn"> run </button> <script> var timer; btn.onclick = function () {cleartimeout (timer); fn () {if (parseint (mydiv.style.width) <500) {mydiv.style.width = parseint (mydiv.style.width) + 5 + 'px'; mydiv.innerhtml = parseint (mydiv.style.width)/5 + '% setTimeout (fn, 16);} else {cleartimeout (timer);}}, 16);} </script>【3】 Запрос анимации
<div id = "mydiv" style = "фоновый цвет: lightblue; ширина: 0; высота: 20px; линейная-Height: 20px;"> 0%</div> <button id = "btn"> run </button> <script> var timer; btn.onclick = function () {mydivsTyle.width = '0' 0 '; requestAnimationFrame (function fn () {if (parseint (mydiv.style.width) <500) {mydiv.style.width = parseint (mydiv.style.width) + 5 + 'px'; mydiv.innerhtml = parseint (mydiv.style.width)/5 + = '; requestAnimationFrame (fn);} else {cancelanimationFrame (timer);}});} </script>Хорошо, код здесь, чтобы представить приложение третьего таймера в серии Bom (часы, отсчет времени, секундомер и будильник)
Выше приведено второй таймер requestAnimationFrame серии Bom, введенный вам редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!