Перед появлением requestAnimationFrame мы обычно используем SetTimeout и SetInterval, так почему же HTML5 добавляет новый запрос -анимация?
Преимущества и характеристики:1) requestAnimationFrame сосредоточит все операции DOM в каждом кадре, заполняйте его одним переписыванием или возвратом, а временный интервал повторного обмена или возврата тесно следит за частотой обновления браузера.
2) В скрытом или невидимом элементе requestAnimationFrame не будет переоценить или возвращать, что означает, что использование процессоров, графических процессоров и памяти меньше.
3) requestAnimationFrame - это API, предоставляемый браузером, специально для анимации.
Одним словом, этот материал высок и не застрянет, и частота кадров автоматически регулируется в соответствии с различными браузерами. Если вы не понимаете или не понимаете, это не имеет значения. Давайте сначала научитесь использовать его!
Как использовать requestAnimationFrame?
Способ использования похож на временную синхронизацию таймера.
var -timer = requestAnimationFrame (function () {console.log ('код таймера');});});Параметр является функцией обратного вызова, а возвратное значение - это целое число, которое используется для представления количества таймера.
<! uaa -compatible content = ie = edge> <title> документ </title> <script> window.onload = function () {var ainput = document.queeryelectollll (input), timer = null; () {Timer = requestAnimationFrame (function say () {console.log (1); timer = requestAnimationFrame (say);};}; ainput [1] .onclick = function () {can clanimationFrame (timer);}} < /script> </head> <body> <input type = кнопка value = open> <input type = кнопка значение = закрыто> </body> </html>CancelanimationFrame используется для отключения таймера
Этот метод должен быть совместимым:
Простая совместимость:
Window.requestanimframe = (function () {return window.requestanimationframe || window.webkitrequestanimationframe || window.mozrequestanimation || function (обратный вызов) {window.settimeout (обратный вызов, 1000 /60);};});Если браузер не знает AnimationFrame, используйте совместимость SetTimeout.
Используйте 3 разных таймера (SetTimeout, SetInterval, RequestAnimationFrame) для достижения загрузки панели хода
1. Метод SetInterval: <! UAA -compatible Content = IE = EDGE> 30px /40px 'microsoft yahei'; null, curwidth = 0, getStyle = function (obj, name, value) {if (obj.currentStyle) {return obj.currenttenle [name];} else {retcomputedStyle (obj, obj, false) [name];}}; Получите 1000) {obox. <p> <input type = value = ready! Во -вторых, метод установки <script> window.onload = function () {var octn = document.queryselector (input), obox = document.queryselector (div), timer = null, getsty le = function (obj, name, value) {if (obj. CurrenStyle) {return obj.currentStyle [name];} else {return getComputEdstyle (obj, false) [name];}; ;; Inerhtml = parseint (getStyle (obox, 'width')) /10 + '%'; Скрипт> 3. Метод запроса анимации <! UAA -compatible Content = IE = EDGE> 30px /40px 'microsoft yahei'; null, curwidth = 0, getStyle = function (obj, name, value) {if (obj.currentStyle) {return obj.currenttenle [name];} else {retcomputedStyle (obj, obj, false) [name];}}; Onclick = function () {Cancelanimation Frame (Timer); .OffSetWidth + 10 + 'px'; > <входной тип = значение = готово!