RU (Русский) Перевод

Здравствуйте, будущие веб-разработчики! Сегодня мы отправляемся в увлекательное путешествие в мир анимации DOM с использованием JavaScript. Как ваш добрый сосед по компьютерным наукам, я с радостью провожу вас через эту захватывающую тему. Поверьте мне, к концу этого урока вы научитесь оживлять веб-страницы с помощью движения!

Анимация DOM элементов с помощью JavaScript

Прежде чем мы углубимся в детали анимации, напомним briefly, что такое DOM. DOM означает Document Object Model, и это Essentially программный интерфейс для HTML-документов. Он представляет структуру документа в виде древовидной иерархии, позволяя нам манипулировать содержимым и структурой веб-страницы с помощью JavaScript.

Теперь, когда мы говорим об анимации DOM элементов, мы имеем в виду изменение их свойств со временем, чтобы создать иллюзию движения или преобразования. Это как создание анимации flip book, но с кодом!

Давайте начнем с простого примера:

<div id="myBox" style="width: 100px; height: 100px; background-color: red; position: absolute;"></div>

<script>
let box = document.getElementById('myBox');
let position = 0;

function moveBox() {
    position += 1;
    box.style.left = position + 'px';
}

setInterval(moveBox, 10);
</script>

В этом примере мы перемещаем красный ящик по экрану. Давайте разберем это:

1. Мы создаем элемент <div> с некоторыми初始альными стилями.
2. Мы используем document.getElementById('myBox'), чтобы получить ссылку на наш ящик.
3. Мы определяем функцию moveBox(), которая увеличивает position и обновляет стиль left ящика.
4. Мы используем setInterval() для вызова moveBox() каждые 10 миллисекунд, создавая плавную анимацию.

Анимация DOM элементов с использованием метода setInterval()

Метод setInterval() - один из способов создания анимации в JavaScript. Он многократно вызывает функцию через specified интервалы. Вот более сложный пример:

<div id="bouncer" style="width: 50px; height: 50px; background-color: blue; border-radius: 25px; position: absolute;"></div>

<script>
let bouncer = document.getElementById('bouncer');
let x = 0;
let y = 0;
let dx = 2;
let dy = 2;

function animate() {
    x += dx;
    y += dy;

    if (x > window.innerWidth - 50 || x < 0) dx = -dx;
    if (y > window.innerHeight - 50 || y < 0) dy = -dy;

    bouncer.style.left = x + 'px';
    bouncer.style.top = y + 'px';
}

setInterval(animate, 10);
</script>

Этот скрипт создает эффект прыгающего мяча:

1. Мы устанавливаем начальные позиции (x, y) и скорости (dx, dy).
2. В функции animate() мы обновляем позицию на основе скорости.
3. Мы проверяем, ударил ли мяч в края окна, и изменяем направление, если это так.
4. Мы обновляем положение мяча на экране.
5. setInterval() вызывает animate() каждые 10 мс, создавая плавное движение.

Анимация DOM элементов с использованием метода requestAnimationFrame()

Хотя setInterval() работает, modern браузеры предлагают более эффективный метод: requestAnimationFrame(). Этот метод говорит браузеру, что вы хотите выполнить анимацию и запрашивает, чтобы браузер вызвал specified функцию для обновления анимации перед следующим перерисовыванием.

Давайте перепишем наш прыгающий мяч, используя requestAnimationFrame():

<div id="bouncer" style="width: 50px; height: 50px; background-color: green; border-radius: 25px; position: absolute;"></div>

<script>
let bouncer = document.getElementById('bouncer');
let x = 0;
let y = 0;
let dx = 2;
let dy = 2;

function animate() {
    x += dx;
    y += dy;

    if (x > window.innerWidth - 50 || x < 0) dx = -dx;
    if (y > window.innerHeight - 50 || y < 0) dy = -dy;

    bouncer.style.left = x + 'px';
    bouncer.style.top = y + 'px';

    requestAnimationFrame(animate);
}

requestAnimationFrame(animate);
</script>

Основное различие здесь в том, что вместо использования setInterval(), мы вызываем requestAnimationFrame(animate) в конце нашей функции animate(). Это создает цикл, в котором браузер вызывает animate() непосредственно перед каждым перерисовыванием.

Анимация DOM элементов изменением свойств CSS

До сих пор мы изменяли стили напрямую с использованием JavaScript. Однако modern веб-разработка часто использует CSS transitions и анимации для более плавного выполнения. Давайте посмотрим, как мы можем инициировать CSS анимации с использованием JavaScript:

<style>
.box {
    width: 100px;
    height: 100px;
    background-color: purple;
    position: absolute;
    transition: all 0.5s ease;
}
</style>

<div id="myBox" class="box"></div>

<script>
let box = document.getElementById('myBox');
let position = 0;

function moveBox() {
    position += 50;
    box.style.transform = `translateX(${position}px)`;

    if (position < 200) {
        requestAnimationFrame(moveBox);
    }
}

box.addEventListener('click', function() {
    position = 0;
    requestAnimationFrame(moveBox);
});
</script>

В этом примере:

1. Мы определяем CSS класс с свойством transition.
2. Наша JavaScript функция изменяет свойство transform вместо left.
3. Мы используем requestAnimationFrame() для создания плавной анимации.
4. Анимация начинается при нажатии на ящик.

Этот метод часто приводит к более плавным анимациям, так как браузер может оптимизировать CSS transitions.

Вот таблица, резюмирующая методы, которые мы обсуждали:

Метод	Плюсы	Минусы
setInterval()	Просто понять и реализовать	Может быть менее эффективным, может вызвать заикание
requestAnimationFrame()	Более эффективен, синхронизируется с частотой обновления браузера	Немного сложнее реализовать
CSS Transitions	Очень плавно, может быть ускорено с помощью оборудования	Ограниченный контроль над шагами анимации

помните, что анимация может greatly улучшить пользовательский опыт, но ее следует использовать с умом. Слишком много анимации может быть отвлекающим или даже вызывать головокружение у некоторых пользователей.

Вот и все для нашего путешествия в мир анимации DOM с использованием JavaScript! Надеюсь, вам понравился этот урок так же, как и мне было приятно его преподавать. Продолжайте практиковаться, продолжайте анимировать и, что самое главное, продолжайте получать удовольствие от кода!

Credits: Image by storyset