[HTML ACADEMY] Профессиональный онлайн‑курс Анимация для фронтендеров
После завершения курса вы сможете строить в браузере анимации любой сложности. Благодаря грамотному использованию анимаций вы сможете повысить качество UX и привлекательность сайтов, которые вы разрабатываете.
Спойлер: Программа курса
Раздел 1
Основы анимации
В первом разделе мы рассмотрим историю появления анимации. Как создать иллюзию движения, основные отличия классической и компьютерной анимации. Какие есть абстракции для построения компьютерной анимации. Чем отличается линейная анимация от покадровой. Также мы рассмотрим 12 принципов выразительной анимации. После этого мы создадим простые анимационные переходы в CSS.
Pipeline выполнения кода в браузере.
CSS transition и animation: отличия.
Временные функции: встроенные, cubic-bezier.
Раздел 2
Анимация в CSS
Во втором разделе продолжим знакомиться с анимацией на основе CSS.
Рассмотрим инструменты для отладки и улучшения производительности анимации в браузере.
Узнаем, как перенести часть отрисовки CSS на видеоускоритель.
Познакомимся с принципами Material design.
Изучим, что такое придание веса объектам и создание иллюзии реалистичности, а также соблюдение принципа причины и следствия.
Подробно рассмотрим 3 принципа выразительной анимации: расчёт времени, фазованное движение, доводка и захлёст движения.
Попрактикуемся в работе с таймлайном составных объектов и групп элементов и планировании анимации: рассказ истории и управление вниманием пользователя.
Раздел 3
SVG Анимация
В этой главе мы изучим спецификацию SMIL, которая описывает анимацию внутри спецификации SVG:
Рассмотрим, в каких случаях лучше использовать SMIL, а в каких от неё стоит отказаться.
Научимся описывать анимацию движения объекта по кривой, запускать анимацию по событиям, например «нажатие», «завершение другой анимации» и т.д.
Подробно рассмотрим ещё 4 принципа выразительной анимации: сжатие и растяжение, преувеличение, дуги, выразительная деталь.
В практической части научимся создавать эффект рисования изображения и анимационного полета.
Раздел 4
Покадровая анимация. JavaScript и Canvas
В этой главе мы перейдём к знакомству с более низкоуровневой абстракцией — покадровой анимацией. Изучим, что такое FPS и стандартные значения FPS: 24, 30, 60. Что такое плавающий FPS. Рассмотрим примеры покадровой анимации:
мультипликация состояния персонажей в играх — метод в веб Sprite Sheets — заготовленные анимации, 360-модель (например, автомобиля).
компьютерная мультипликация, моушн-дизайн — метод в веб JS Tween и JS Morph — анимация с помощью библиотек, например, CreateJS, AnimateJS, GSAP.
игры с отслеживанием действий игрока в реальном времени — гонки, тетрис — метод создания моделей с интерфейсом взаимодействия — в веб интерактивные элементы и игры.
А также продолжим углубленно изучать принципы выразительной анимации: сценичность, привлекательность, профессиональный рисунок — внимание разработчика к деталям, качество финальной картинки.
В практической части научимся использовать:
window.requestAnimationFrame.
Canvas и его параметры и методы.
Цикл отрисовки анимации простого элемента. Трансформации. Рисование картинки. Маскирование. Класс абстрактного объекта — рига. Расширение класса. Параметрическое задание траектории. Примеры: эллипс, спираль, парабола, синусоида, синусоида с затуханием и т.п.
Манипуляции с траекториями: сложение, умножение, параллельный перенос, смещение фазы синусоиды.
Методы update() и render().
Раздел 5
WebGL. Шейдеры
В этой главе мы продолжим работать с покадровой анимацией. Изучим, что такое WebGL и OpenGL. Рассмотрим отличие работы в контексте 2d и webgl. Исследуем, какие бывают растровые эффекты:
цветовые фильтры
OpenGL
маски — Lumination, Alpha
цветовые наложения — blending
шумы
смещения
размытия
А также изучим анимацию растровых эффектов: постоянное движение и изменение параметров.
На практике рассмотрим:
Что такое вершинные и фрагментные шейдеры.
Как использовать WebGL 3d для 2d эффектов.
Что такое геометрия.
Pipeline WebGL.
Взаимодействие JS и WebGL.
Типы данных в WebGL.
Написание GLSL — основы.
Раздел 6
часть 1: 3D в браузере
В этой главе мы снова поговорим о системах координат, точках и векторах. Изучим матрицы трансформаций 3D, кватернионы и углы Эйлера, перемножение матриц.
Рассмотрим 2 варианта создания моделей с интерфейсом управления пользователем:
Прямое задание параметров: скорости или ускорения (перемещения или вращения).
Задание цели — значения, к которому нужно постепенно приближаться: элемент притягивается к курсору.
Изучим цикл работы движка, методы invalidate(), update() и render(), особенности работы с плавающим FPS. Узнаем, как вести расчёты внутри update().
В практической части начнём работать с библиотекой Изучим:
Способы описания объектов: положение, геометрия и материалы.
Геометрию: параметрические встроенные, произвольные загружаемые. Буфер геометрии.
Какие есть материалы, виды материалов, режимы отрисовки, кастомные материалы.
Флаги для update.
Цикл render.
Анимации положения. Метод анимации Morph.
Сцена + камера. Добавление объектов на сцену. Группировка.
Свет. Виды источников света. Материал Matcap.
Раздел 7
часть 2: Работа с камерой
В этой части мы рассмотрим, что такое камера в WebGL, и в частности в Three.JS:
Управление камерой.
Базовые движения камеры.
Риги камер.
Разные конструкции ригов для разных видов управления.
В практической части:
Увидим, какие бывают виды камер в Three.JS, параметры камеры, ресайз при переходе к мобильной версии.
Изучим подходы к анимации камеры. Разберёмся с реакцией на действия пользователя — плавное изменение ракурса. Управление с помощью рига: цикл рендера рига камеры. Создание анимации пролёта.
Риги камер.
Рассмотрим переключение между камерами — монтаж. Правила монтажа.
Раздел 8
Будущее анимации в браузере
В завершающей части курса мы рассмотрим те API, которые ещё не готовы для использования в продакшен, но их уже сейчас стоит для начать изучать, чтобы в будущем повысить эффективность своей работы.
Увидим, чем отличается Web Animation API от обычной CSS анимации и какие дополнительные возможности даёт.
Изучим основы Houdini API.
Поговорим о библиотеках, которые помогут упростить работу с анимациями, таймлайнами, SVG, canvas, WebGL.
Рассмотрим программы для работы с анимацией и графикой для web: Google Web Designer, Adobe Animate, Adobe After Effects, программы 3d графики: Cinema 4d, Blender.
Сделаем небольшой обзор подходов к созданию динамически генерируемой анимации и графики. Рассмотрим, какие инструменты можно использовать для построения кроссплатформенного ПО с 3d.
Поговорим о том, как можно дальше развиваться в создании анимации.
Спойлер: Проекты
Учебный проект
На примере учебного проекта мы расскажем и покажем, как правильно делать крутые анимации. После этого вы сможете попрактиковаться, выполняя задания по личному проекту.
Промо сайт для Фестиваля «Иллюзион»
В течение курса мы будем анимировать промо-страницу фестиваля иллюзионистов «Иллюзион», которая, как и сам фестиваль, не должна оставить равнодушным ни одного посетителя.
Личный проект
В каждом разделе вы будете выполнять задания по личному проекту. Над ним вы будете работать и самостоятельно, и в паре с наставником.
Сайт конкурса-игры «Таинственный отпуск»
Вам предстоит сделать анимации для сайта конкурса игры, где игрокам предстоит угадать пункт назначения путешествия. Чтобы попробовать свои силы, им нужно будет сыграть в чате с ботом ИИ «Соня». А вам — с помощью анимаций создать весёлую атмосферу развлечения.
После завершения курса вы сможете строить в браузере анимации любой сложности. Благодаря грамотному использованию анимаций вы сможете повысить качество UX и привлекательность сайтов, которые вы разрабатываете.
Спойлер: Программа курса
Раздел 1
Основы анимации
В первом разделе мы рассмотрим историю появления анимации. Как создать иллюзию движения, основные отличия классической и компьютерной анимации. Какие есть абстракции для построения компьютерной анимации. Чем отличается линейная анимация от покадровой. Также мы рассмотрим 12 принципов выразительной анимации. После этого мы создадим простые анимационные переходы в CSS.
Pipeline выполнения кода в браузере.
CSS transition и animation: отличия.
Временные функции: встроенные, cubic-bezier.
Раздел 2
Анимация в CSS
Во втором разделе продолжим знакомиться с анимацией на основе CSS.
Рассмотрим инструменты для отладки и улучшения производительности анимации в браузере.
Узнаем, как перенести часть отрисовки CSS на видеоускоритель.
Познакомимся с принципами Material design.
Изучим, что такое придание веса объектам и создание иллюзии реалистичности, а также соблюдение принципа причины и следствия.
Подробно рассмотрим 3 принципа выразительной анимации: расчёт времени, фазованное движение, доводка и захлёст движения.
Попрактикуемся в работе с таймлайном составных объектов и групп элементов и планировании анимации: рассказ истории и управление вниманием пользователя.
Раздел 3
SVG Анимация
В этой главе мы изучим спецификацию SMIL, которая описывает анимацию внутри спецификации SVG:
Рассмотрим, в каких случаях лучше использовать SMIL, а в каких от неё стоит отказаться.
Научимся описывать анимацию движения объекта по кривой, запускать анимацию по событиям, например «нажатие», «завершение другой анимации» и т.д.
Подробно рассмотрим ещё 4 принципа выразительной анимации: сжатие и растяжение, преувеличение, дуги, выразительная деталь.
В практической части научимся создавать эффект рисования изображения и анимационного полета.
Раздел 4
Покадровая анимация. JavaScript и Canvas
В этой главе мы перейдём к знакомству с более низкоуровневой абстракцией — покадровой анимацией. Изучим, что такое FPS и стандартные значения FPS: 24, 30, 60. Что такое плавающий FPS. Рассмотрим примеры покадровой анимации:
мультипликация состояния персонажей в играх — метод в веб Sprite Sheets — заготовленные анимации, 360-модель (например, автомобиля).
компьютерная мультипликация, моушн-дизайн — метод в веб JS Tween и JS Morph — анимация с помощью библиотек, например, CreateJS, AnimateJS, GSAP.
игры с отслеживанием действий игрока в реальном времени — гонки, тетрис — метод создания моделей с интерфейсом взаимодействия — в веб интерактивные элементы и игры.
А также продолжим углубленно изучать принципы выразительной анимации: сценичность, привлекательность, профессиональный рисунок — внимание разработчика к деталям, качество финальной картинки.
В практической части научимся использовать:
window.requestAnimationFrame.
Canvas и его параметры и методы.
Цикл отрисовки анимации простого элемента. Трансформации. Рисование картинки. Маскирование. Класс абстрактного объекта — рига. Расширение класса. Параметрическое задание траектории. Примеры: эллипс, спираль, парабола, синусоида, синусоида с затуханием и т.п.
Манипуляции с траекториями: сложение, умножение, параллельный перенос, смещение фазы синусоиды.
Методы update() и render().
Раздел 5
WebGL. Шейдеры
В этой главе мы продолжим работать с покадровой анимацией. Изучим, что такое WebGL и OpenGL. Рассмотрим отличие работы в контексте 2d и webgl. Исследуем, какие бывают растровые эффекты:
цветовые фильтры
OpenGL
маски — Lumination, Alpha
цветовые наложения — blending
шумы
смещения
размытия
А также изучим анимацию растровых эффектов: постоянное движение и изменение параметров.
На практике рассмотрим:
Что такое вершинные и фрагментные шейдеры.
Как использовать WebGL 3d для 2d эффектов.
Что такое геометрия.
Pipeline WebGL.
Взаимодействие JS и WebGL.
Типы данных в WebGL.
Написание GLSL — основы.
Раздел 6
часть 1: 3D в браузере
В этой главе мы снова поговорим о системах координат, точках и векторах. Изучим матрицы трансформаций 3D, кватернионы и углы Эйлера, перемножение матриц.
Рассмотрим 2 варианта создания моделей с интерфейсом управления пользователем:
Прямое задание параметров: скорости или ускорения (перемещения или вращения).
Задание цели — значения, к которому нужно постепенно приближаться: элемент притягивается к курсору.
Изучим цикл работы движка, методы invalidate(), update() и render(), особенности работы с плавающим FPS. Узнаем, как вести расчёты внутри update().
В практической части начнём работать с библиотекой Изучим:
Способы описания объектов: положение, геометрия и материалы.
Геометрию: параметрические встроенные, произвольные загружаемые. Буфер геометрии.
Какие есть материалы, виды материалов, режимы отрисовки, кастомные материалы.
Флаги для update.
Цикл render.
Анимации положения. Метод анимации Morph.
Сцена + камера. Добавление объектов на сцену. Группировка.
Свет. Виды источников света. Материал Matcap.
Раздел 7
часть 2: Работа с камерой
В этой части мы рассмотрим, что такое камера в WebGL, и в частности в Three.JS:
Управление камерой.
Базовые движения камеры.
Риги камер.
Разные конструкции ригов для разных видов управления.
В практической части:
Увидим, какие бывают виды камер в Three.JS, параметры камеры, ресайз при переходе к мобильной версии.
Изучим подходы к анимации камеры. Разберёмся с реакцией на действия пользователя — плавное изменение ракурса. Управление с помощью рига: цикл рендера рига камеры. Создание анимации пролёта.
Риги камер.
Рассмотрим переключение между камерами — монтаж. Правила монтажа.
Раздел 8
Будущее анимации в браузере
В завершающей части курса мы рассмотрим те API, которые ещё не готовы для использования в продакшен, но их уже сейчас стоит для начать изучать, чтобы в будущем повысить эффективность своей работы.
Увидим, чем отличается Web Animation API от обычной CSS анимации и какие дополнительные возможности даёт.
Изучим основы Houdini API.
Поговорим о библиотеках, которые помогут упростить работу с анимациями, таймлайнами, SVG, canvas, WebGL.
Рассмотрим программы для работы с анимацией и графикой для web: Google Web Designer, Adobe Animate, Adobe After Effects, программы 3d графики: Cinema 4d, Blender.
Сделаем небольшой обзор подходов к созданию динамически генерируемой анимации и графики. Рассмотрим, какие инструменты можно использовать для построения кроссплатформенного ПО с 3d.
Поговорим о том, как можно дальше развиваться в создании анимации.
Спойлер: Проекты
Учебный проект
На примере учебного проекта мы расскажем и покажем, как правильно делать крутые анимации. После этого вы сможете попрактиковаться, выполняя задания по личному проекту.
Промо сайт для Фестиваля «Иллюзион»
Личный проект
В каждом разделе вы будете выполнять задания по личному проекту. Над ним вы будете работать и самостоятельно, и в паре с наставником.
Сайт конкурса-игры «Таинственный отпуск»
