Функция requestAnimationFrame JavaScript

JavaScript

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

Как работает requestAnimationFrame?

Когда вы вызываете requestAnimationFrame(callback), браузер добавляет вашу функцию callback в очередь вызовов, которая будет выполнена прямо перед следующей перерисовкой экрана. Таким образом, ваша функция вызывается синхронно с циклом рендеринга браузера, что обеспечивает высокую производительность и плавность анимации.

Пример использования requestAnimationFrame

Рассмотрим простой пример анимации движения квадрата по экрану:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Request Animation Frame Example</title>
    <style>
        #square {
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
            top: 100px;
            left: 100px;
        }
    </style>
</head>
<body>
    <div id="square"></div>
    <script>
        const square = document.querySelector('#square');
        
        let posX = 100;
        let speed = 1;

        function moveSquare() {
            posX += speed;
            square.style.left = `${posX}px`;
            
            if (posX >= window.innerWidth - 50 || posX <= 0) {
                speed *= -1; // Изменяем направление движения
            }

            requestAnimationFrame(moveSquare);
        }

        requestAnimationFrame(moveSquare);
    </script>
</body>
</html>

Пояснение:

  1. HTML: Создаем div-элемент с идентификатором #square, который будет нашим квадратом.
  2. CSS: Определяем стиль для квадрата, устанавливаем его размеры и положение.
  3. JavaScript:
    • Переменная posX хранит текущую позицию квадрата по оси X.
    • Переменная speed определяет скорость перемещения квадрата.
    • Функция moveSquare обновляет позицию квадрата, изменяя его координату left на величину speed. Затем проверяется, достиг ли квадрат границы окна, и если да, то меняется направление движения.
    • Внутри функции moveSquare вызывается requestAnimationFrame(moveSquare) для того, чтобы снова запланировать выполнение этой же функции перед следующим кадром.
    • Первый вызов requestAnimationFrame(moveSquare) запускает цикл анимации.

Преимущества requestAnimationFrame:

  1. Оптимизация производительности: Функция синхронизирована с частотой обновления экрана, что предотвращает избыточные перерисовки и экономит ресурсы процессора.
  2. Плавность анимации: Так как частота вызова функции зависит от частоты обновления экрана, анимация выглядит плавно и стабильно.
  3. Энергосбережение: Когда вкладка неактивна или скрыта, браузер автоматически приостанавливает вызовы requestAnimationFrame, что снижает нагрузку на процессор и продлевает срок службы батареи мобильных устройств.

Заключение

requestAnimationFrame — мощный инструмент для создания плавных и эффективных анимаций в браузере. Его правильное использование поможет вам создать визуально привлекательные веб-приложения с высокой производительностью.

Обновлено: 18.01.2025 в 17:20 | Просмотров: 11
Загрузка...
Похожие статьи

Добавить комментарий

Войти с помощью: