JavaScript-анимации: когда CSS перестаёт работать

1.

JavaScript-анимации: когда CSS
перестаёт работать
presentation-creation.ru

2.

Зачем нам JavaScript, если есть CSS?
CSS-анимации — стандарт для веб-интерфейсов. Transition и keyframes покрывают
большинство задач: появление, исчезновение, перемещение, трансформация. Это быстро,
просто и работает на аппаратном ускорении.
transition — это свойство, которое заставляет элемент плавно изменяться от одного набора
стилей к другому при смене состояния.
@keyframes — многошаговая анимация.
@keyframes позволяет задать последовательность состояний во времени. Анимация
может проигрываться автоматически при загрузке, повторяться, менять направление.
Но существует класс анимаций, которые невозможно реализовать на CSS. Не потому, что
разработчики не добавили нужное свойство, а потому, что сама природа CSS декларативна.
CSS описывает результат, но не процесс.
JavaScript, напротив, императивен. Он описывает каждый шаг. И там, где анимация
перестаёт быть декорацией и становится частью логики приложения, JavaScript —
единственный выбор.

3.

Произвольные траектории
В CSS траектория движения задаётся либо прямой линией, либо кривой Безье. Всё.
CSS позволяет перемещать элемент из точки А в точку Б. Траектория может быть
либо строго прямой, либо задаваться кривой Безье.
Кривая Безье — это математическая кривая, которая описывается через
опорные точки. В вебе используются два вида:
• Квадратичная — 3 точки (начало, контрольная, конец)
• Кубическая — 4 точки (начало, две контрольные, конец)
CSS поддерживает только кубические кривые Безье. Именно они задают
параметры cubic-bezier(.42, 0, .58, 1) в transition и keyframes.
Этого достаточно для выезжающего меню или плавного появления карточки. Но
недостаточно, если объект должен двигаться по окружности, синусоиде, эллипсу,
ломаной или любому пути, заданному массивом координат.
В JavaScript траектория вычисляется на каждом кадре. Это может быть любая
функция от времени. Движение по орбите, полёт снаряда с учётом ветра, облёт
препятствий — всё это реализуется через JS и невозможно на CSS.

4.

1. Произвольные траектории движения
• CSS ограничен прямой линией и кубическими кривыми Безье.
• JavaScript позволяет задать траекторию любой математической функцией: окружность, синусоида,
эллипс, спираль, ломаная по точкам.
Примеры: движение планет по орбитам, трассировка снаряда, облёт препятствий.
2. Физическое поведение
• CSS не умеет моделировать скорость, ускорение, трение, гравитацию, упругость.
• JavaScript на каждом кадре пересчитывает координаты на основе физических формул.
Примеры: падение мяча с отскоками, движение маятника, инерционная прокрутка.
3. Анимация на Canvas
• CSS работает только с DOM-элементами.
• Canvas — это растровый холст, на котором каждый кадр рисуется вручную.
• Очистка, отрисовка, обновление — всё управляется через JavaScript.
Примеры: игры, графики, симуляции, визуализация данных.

5.

Кадр — это атом анимации
Любое движущееся изображение, будь то кино, мультфильм или веб-анимация, состоит из
последовательности статичных картинок. Каждая такая картинка называется кадром.
Если кадры сменяют друг друга достаточно быстро, человеческий глаз перестаёт различать отдельные
изображения и воспринимает их как непрерывное движение. Этот эффект называется инерцией
зрительного восприятия .
Порог плавности:
24 кадра в секунду — стандарт киноиндустрии.
60 кадров в секунду — стандарт для веб-интерфейсов и игр.
120+ кадров в секунду — современные игровые мониторы и флагманские смартфоны.
Как это работает в вебе
Браузер отрисовывает веб-страницу покадрово. Каждый кадр — это результат выполнения множества
операций:
обработка JavaScript;
пересчёт стилей;
формирование DOM-дерева;
отрисовка пикселей на экране.
В обычном состоянии страница статична — браузер отрисовал один кадр и ждёт. Чтобы создать
анимацию, нужно заставить браузер отрисовывать новый кадр снова и снова, причём на каждом кадре
состояние элементов должно хоть немного отличаться от предыдущего.

6.

Два способа сменить кадр
1. Декларативный (CSS)
Разработчик описывает конечное состояние и время перехода. Браузер
самостоятельно вычисляет все промежуточные кадры и отрисовывает их.
Процесс скрыт от разработчика, управлять им напрямую нельзя.
2. Императивный (JavaScript)
Разработчик
сам определяет,
что должно
быть на каждом кадре. На каждом
Псевдокод простейшей
анимации
перемещения:
шаге вызывается функция, которая:
• вычисляет текущее значение анимируемого свойства;
• применяет это значение к элементу или холсту;
• повторяет операцию, пока не будет достигнуто конечное состояние.
JavaScript не создаёт кадры автоматически. Разработчик должен явно
организовать цикл, который будет вызывать функцию обновления с нужной
периодичностью.

7.

Механизм и способы запуска анимаций
• Базовый цикл анимации (Теория)
Любая покадровая анимация работает по принципу
«стоп-моушн» или плёночного кинопроектора. Мозг не
видит отдельные картинки, если они сменяют друг
друга быстрее, чем примерно 12-16 кадров в секунду
— это создает иллюзию движения.
Почему нельзя просто for?
Если написать while(true) { очистка;
рисование; }, выполнение кода заблокирует
браузер. Страница зависнет, кнопки
перестанут нажиматься, потому что цикл
займет весь поток выполнения, не давая
браузеру перерисовать содержимое и
обработать события.

8.

Современный способ: requestAnimationFrame
Это правильный инструмент для анимаций. Мы говорим браузеру: «Когда будешь
готов перерисовать страницу, вызови вот эту функцию». Браузер сам вызывает её
оптимально (обычно 60 раз в секунду).
Преимущества:
Энергоэффективность. На фоновой вкладке анимация останавливается.
Гладкость. Кадры рисуются строго перед обновлением экрана (нет разрывов).
Оптимизация. Браузер сам подбирает частоту под возможности монитора (например,
120 FPS или 60 FPS).
Особенность: Функция должна вызывать саму себя в конце (рекурсия через
requestAnimationFrame), чтобы создать бесконечный цикл.
Пример: Движущийся круг

9.

10.

Связка с предыдущим (Итог)
(«очистка-обновление-отрисовка»),как его реализовать в коде.
Раньше для этого использовали setInterval, который работал, но был
прожорливым и не всегда вовремя.
Сегодня стандартом де-факто является requestAnimationFrame. Он не просто
запускает функцию по таймеру, а встраивает её в конвейер рендеринга
браузера, экономя ресурсы и обеспечивая максимальную плавность.
Технически мы просто заменяем setInterval(draw, 16) на рекурсивный вызов
requestAnimationFrame(animate), и код становится «умнее и современнее.»

11.

Универсальная анимация: Идея и цель
Зачем нужна такая функция?
В JavaScript встроенные анимации не всегда гибкие. Если мы хотим сделать сложное движение или
управлять анимацией вручную, нам нужен свой инструмент.
Суть подхода
Мы создаем функцию animate(), которая отделяет расчет времени от самого рисования.
Расчет времени: Функция сама считает, сколько прошло секунд и пора ли заканчивать.
Рисование: Что именно делать (двигать картинку, менять цвет, скроллить страницу) — мы передаем как
инструкцию.

12.

Детальный разбор параметров
duration (Число)
Задает жесткую длительность. Например, 2000 = 2 секунды. По истечении этого времени анимация
гарантированно остановится.
timing (Функция)
Отвечает за "физику" движения.
Принимает timeFraction (сколько времени прошло относительно длительности, от 0 до 1).
Возвращает progress (состояние анимации, тоже обычно от 0 до 1).
Примеры:
Линейная: time => time (движение равномерное).
Квадратичная: time => time * time (медленный старт, резкий финиш).
Упругая: сложная формула с эффектом "пружинки".
draw (Функция)

13.

Техническая магия внутри
Как функция animate() работает "под капотом"?
Ядро: Метод requestAnimationFrame. Это встроенная функция браузера, которая говорит: "Выполни мой
код прямо перед тем, как обновить экран". Обычно это 60 раз в секунду.
Цикл:
Запоминаем время start = Date.now().
Создаем внутреннюю функцию step().
В step() вычисляем timePassed = Date.now() - start.
Считаем timeFraction = timePassed / duration. Если время вышло (больше 1), обрезаем до 1.
Вызываем timing(timeFraction), получаем progress.
Вызываем draw(progress) — кадр нарисован.
Если время еще не вышло, снова вызываем requestAnimationFrame(step).

14.

Функции расчёта времени и эффекты
• Для чего нужно:
timing-функции нужны, чтобы анимация не была скучной и одинаковой.Без них объект просто ползет от
точки А до точки Б ровно, как робот.
Механика (Тело): Функция, которая отвечает за перерисовку кадров. Она знает, что рисовать (объект) и
где это должно оказаться в конце (конечные координаты).
Характер (Душа): Timing-функция (или функция сглаживания). Она определяет, как именно объект будет
двигаться от точки А к точке Б.

15.

Преобразование времени в характер
• Определение:
timing-функции — это «душа» анимации. Они принимают равномерный ход времени и трансформируют
его в желаемый характер движения.
• Вход и выход:
На входе: timeFraction — равномерно растет от 0 до 1
На выходе: progress — может меняться по любому закону
• Ключевой принцип:
Код отрисовки получает готовый progress и не знает, по какому закону он был вычислен.

16.

linear — равномерное движение
• Характеристика:
-Самая простая timing-функция
-Прогресс совпадает со временем
• Поведение:
Объект движется с постоянной скоростью от начала до конца. Без ускорений, замедлений и рывков.
• Применение:
Механистичное, роботизированное движение. Прогресс-бары, индикаторы загрузки, служебная
анимация.

17.

quad, circ — ускорение (easeIn)
• Общая характеристика:
Группа функций, создающих эффект разгона. Объект начинает движение медленно и ускоряется к
финишу.
• quad (квадратичная):
Прогресс растет медленно в начале и быстро в конце. Плавный набор скорости.
• circ (круговая):
Еще более плавный старт, чем у quad. Движение начинается почти незаметно.
• Общее название:
Такое поведение называется easeIn — эффект в начале.

18.

bounce — эффект отскока
• Характеристика:
Имитирует физическое падение и отскоки объекта.
• Поведение:
В конце движения объект несколько раз «отскакивает» от финишной точки, каждый раз с меньшей
амплитудой, пока полностью не остановится.
• Визуальная аналогия:
Падение мяча на твердую поверхность.

19.

elastic — эластичные колебания
• Характеристика:
Создает эффект пружины или резинки.
• Поведение:
Объект «пролетает» финишную точку, возвращается назад, снова пролетает, и так несколько раз с
затуханием, пока не остановится в целевой позиции.
• Визуальная аналогия:
Растянутая и отпущенная резинка, колеблющаяся струна.

20.

Инверсия эффектов easeOut и easeInOut
• Проблема:
easeOut
У нас есть функции с эффектом в начале (easeIn). Как получить эффект в
конце?
• Решение:
Функции-обертки позволяют инвертировать любую timing-функцию без
переписывания ее кода.
• makeEaseOut:
Преобразует функцию так, что эффект проявляется в конце движения, а
не в начале.
• makeEaseInOut:
Комбинирует эффекты: замедление/ускорение/отскок проявляются и в
начале, и в конце движения.
• Результат:
Из одной функции можно получить три разных характера движения.
easelnOut

21.

Сводная таблица эффектов
• Важно: makeEaseOut и makeEaseInOut работают с ЛЮБОЙ функцией, не только с этими.
Функция
Без обертки (In)
С makeEaseOut
С makeEaseInOut
linear
равномерно
равномерно
равномерно
quad
разгон в начале
торможение в конце
разгон + торможение
bounce
отскоки в начале
отскоки в конце
отскоки с двух сторон
elastic
колебания в начале
колебания в конце
колебания с двух сторон

22.

Вывод
• Функция animate — это архитектор. Она строит жесткий каркас здания: стены,
перекрытия, лестницы. Без нее никуда, но внутри пусто.
• Timing-функции — это художники-оформители. Не меняя ни одной стены, они могут
сделать интерьер:
-Строгим и офисным (linear)
-Динамичным и спортивным (quad)
-Игривым и детским (bounce)
-Роскошным и текучим (elastic)