From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../ru/dom/window.requestanimationframe/index.html | 92 ++++++++++++++++++++++ 1 file changed, 92 insertions(+) create mode 100644 files/ru/dom/window.requestanimationframe/index.html (limited to 'files/ru/dom/window.requestanimationframe') diff --git a/files/ru/dom/window.requestanimationframe/index.html b/files/ru/dom/window.requestanimationframe/index.html new file mode 100644 index 0000000000..d451cae62f --- /dev/null +++ b/files/ru/dom/window.requestanimationframe/index.html @@ -0,0 +1,92 @@ +--- +title: window.requestAnimationFrame() +slug: DOM/window.requestAnimationFrame +tags: + - Анимация +translation_of: Web/API/window/requestAnimationFrame +--- +
{{APIRef}}
+ +

window.requestAnimationFrame указывает браузеру на то, что вы хотите произвести анимацию, и просит его запланировать перерисовку на следующем кадре анимации. В качестве параметра метод получает функцию, которая будет вызвана перед перерисовкой.

+ +
Заметка: Ваш callback метод сам должен вызвать requestAnimationFrame() иначе анимация остановится.
+ +

Вы должны вызывать этот метод всякий раз, когда готовы обновить анимацию на экране, чтобы запросить планирование анимации. Обычно запросы происходят 60 раз в секунду, но чаще всего совпадают с частотой обновления экрана. В большинстве браузеров в фоновых вкладках или скрытых <iframe>, вызовы requestAnimationFrame() приостанавливаются, для того, чтобы повысить производительность и время работы батареи.

+ +

Callback методу передаётся один аргумент, {{domxref("DOMHighResTimeStamp")}}, который содержит текущее время (количество миллисекунд, прошедших с момента time origin). Когда callback-и, отправленные в очередь с помощью requestAnimationFrame() начинают вызывать несколько callback-ов в одном кадре, каждый получает одинаковый timestamp, хотя для вычисления каждого callback было затрачено время. Этот timestamp - десятичное число в миллисекундах, но с минимальной точностью в 1ms (1000 µs).

+ +

Синтаксис

+ +
window.requestAnimationFrame(callback);
+ +

Параметры

+ +
+
callback
+
Функция, которая будет вызвана, когда придёт время обновить вашу анимацию на следующей перерисовке.
+
element {{ optional_inline() }}
+
Необязательный параметр (не используется в Firefox или IE), определяющий элемент, который визуально содержит всю анимацию. Для canvas'а и WebGL'a им должен быть {{ HTMLElement("canvas") }}. Для других элементов вы можете опустить этот параметр для чуть лучшего пользовательского опыта.
+
+ +

Возвращаемое значение

+ +

requestID — длинное целое, являющееся уникальным идентификатором для записи, содержащей callback. Оно не равно нулю, но других предположений о его значении делать не следует. Вы можете передать его в {{ domxref("window.cancelAnimationFrame()") }} для отмены вызова.

+ +

Пример

+ +
var start = null;
+var element = document.getElementById('SomeElementYouWantToAnimate');
+
+function step(timestamp) {
+  if (!start) start = timestamp;
+  var progress = timestamp - start;
+  element.style.transform = 'translateX(' + Math.min(progress / 10, 200) + 'px)';
+  if (progress < 2000) {
+    window.requestAnimationFrame(step);
+  }
+}
+
+window.requestAnimationFrame(step);
+ +

Примечание

+ +

В Edge версиях младше 17 и в Internet Explorer не надежно запускать requestAnimationFrame перед циклом рисования.

+ +

Спецификация

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('HTML WHATWG', '#animation-frames', 'requestAnimationFrame')}}{{Spec2('HTML WHATWG')}}Без изменений, заменяет предыдущую.
{{SpecName('RequestAnimationFrame', '#dom-windowanimationtiming-requestanimationframe', 'requestAnimationFrame')}}{{Spec2('RequestAnimationFrame')}}Первоначальное описание.
+ +

Браузерная совместимость

+ +

{{Compat("api.Window.requestAnimationFrame")}}

+ +

Смотрите также

+ + -- cgit v1.2.3-54-g00ecf