Анимация для фронтендеров
Научимся строить анимации любой сложности в браузере. Курс рассчитан на для начинающих разработчиков, которые уже освоили HTML, CSS и JS
Старт курса
Длительность
любое время
2,5 месяца
Интенсивность
15−20 часов в неделю
Благодаря грамотному использованию анимаций вы повысите качество UX и привлекательность сайтов, которые вы разрабатываете.
Личный проект
Анимации для сайта игры про путешествия, в которой игроки отвечают на вопросы и угадывают страны.
2
Критерии
Профессиональные критерии качества, которые мы разработали совместно с компаниями и профессиональным сообществом.
1
Наставник
Профессиональные разработчики, которые проверят ваши проекты на соответствие критериям качества.
3
Чтобы добиться высокого качества обучения, мы используем профессиональную триаду:
Как устроен курс
Живые лекции
Лекции проходят по понедельникам и четвергам с 19:00 до 21:00 по московскому времени. Запись лекции доступна на следующий день.
Спикер не просто рассказывает сухую теорию, но постоянно общается с аудиторией и делится любопытными кейсами из личного опыта.

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

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

После каждой темы студенты выполняют задание на пару минут, чтобы сразу отработать знания и задать вопросы.
Чему вы научитесь
Создавать иллюзию движения;
Отрисовывать анимации разного вида сложности;
Создавать покадровую анимацию;
Работать с библиотекой Three. JS;
Управлять вниманием пользователя.
По результатам курса вы научитесь создавать анимации правильно, чтобы после обучения выдавать результат высокого уровня.
Структурированная теория
Практика
Ревью кода и консультации
После каждого задания ваш личный наставник проверяет качество работы и дает обратную связь. А если остались вопросы — можно записаться на консультацию.
После изучения теории и методик вы работаете над своим проектом и закрепляете учебный материал.
Вы изучаете методики решения практических задач по материалам, которые мы подобрали и по демонстрации кода учебного проекта.
Что вас ждет на обучении
Программа курса
Раздел 1
Основы анимации
Раздел 1
Основы анимации
Рассмотрим историю появления анимации. Разберем основные отличия классической и компьютерной анимации. Узнаем, как создать иллюзию движения, какие есть абстракции для построения компьютерной анимации и чем отличается линейная анимация от покадровой. Рассмотрим 12 принципов выразительной анимации и создадим простые анимационные переходы в CSS.
Pipeline выполнения кода в браузере
CSS transition и animation: отличия
Временные функции: встроенные, cubic-bezier
Раздел 2
Анимация в CSS
Раздел 2
Анимация в CSS
Познакомимся с анимацией на основе CSS.
Инструменты для отладки и улучшения производительности анимации в браузере
Перенос частей отрисовки CSS на видеоускоритель
Принципы Material design
Вес объектов, создание иллюзии реалистичности, соблюдение принципа причины и следствия
3 принципа выразительной анимации: расчёт времени, фазованное движение, доводка и захлёст движения
Таймлайн составных объектов, групп элементов и планирование анимации: сторителлинг и управление вниманием пользователя
Раздел 3
SVG Анимация
Раздел 3
SVG Анимация
Изучим спецификацию SMIL, которая описывает анимацию внутри спецификации SVG.
Случаи использование SMIL
Анимация движения объекта по кривой, запуск анимации по событиям: «нажатие», «завершение другой анимации» и др.
4 принципа выразительной анимации: сжатие и растяжение, преувеличение, дуги, выразительная деталь

На практике создадим эффект рисования изображения и анимационного полета.
Раздел 4
Покадровая анимация. JavaScript и Canvas
Раздел 4
Покадровая анимация. JavaScript и Canvas
Познакомимся с более низкоуровневой абстракцией — покадровой анимацией. Изучим, что такое FPS, стандартные значения FPS: 24, 30, 60, плавающий FPS. Рассмотрим примеры покадровой анимации. Изучим принципы выразительной анимации: сценичность, привлекательность, профессиональный рисунок.
Мультипликация состояния персонажей в играх 
Метод в веб Sprite Sheets 
Заготовленные анимации, 360-модель (например, автомобиля)
Компьютерная мультипликация, моушн-дизайн 
Метод в веб JS Tween и JS Morph 
Анимация с помощью библиотек, например, CreateJS, AnimateJS, GSAP
Игры с отслеживанием действий игрока в реальном времени 
Гонки, тетрис 
Метод создания моделей с интерфейсом взаимодействия#nbsp
Веб-интерактивные элементы и игры

На практике рассмотрим:
Window.requestAnimationFrame.
Canvas и его параметры и методы
Цикл отрисовки анимации простого элемента. Трансформации. Рисование картинки. Маскирование. Класс абстрактного объекта — рига. Расширение класса. Параметрическое задание траектории. Примеры: эллипс, спираль, парабола, синусоида, синусоида с затуханием и др.
Манипуляции с траекториями: сложение, умножение, параллельный перенос, смещение фазы синусоиды;
Методы update () и render ().
Раздел 5
WebGL. Шейдеры
Раздел 5
WebGL. Шейдеры
Поработаем с покадровой анимацией. Изучим, что такое WebGL и OpenGL. Рассмотрим отличие работы в контексте 2d и webgl. Изучим анимацию растровых эффектов: постоянное движение и изменение параметров.

Исследуем, какие бывают растровые эффекты: цветовые фильтры, OpenGL, маски (Lumination, Alpha), цветовые наложения (blending), шумы, смещения, размытия.

На практике рассмотрим:
Вершинные и фрагментные шейдеры
WebGL 3d для 2d эффектов
Геометрию
Pipeline WebGL
Взаимодействие JS и WebGL
Типы данных в WebGL.
Основы написания GLSL
Раздел 6
Three. js часть 1: 3D в браузере
Раздел 6
Поговорим о системах координат, точках и векторах. Изучим матрицы трансформаций 3D, кватернионы и углы Эйлера, перемножение матриц. Рассмотрим два варианта создания моделей с интерфейсом управления пользователем.
Прямое задание параметров: скорости или ускорения (перемещения или вращения)
Задание цели — значения, к которому нужно постепенно приближаться (элемент притягивается к курсору)
Цикл работы движка, методы invalidate (), update () и render (), особенности работы с плавающим FPS. Узнаем, как вести расчёты внутри update ()

На практике поработаем с библиотекой Three. js и рассмотрим:
Способы описания объектов: положение, геометрия и материалы
Геометрию: параметрические встроенные, произвольные загружаемые, буфер геометрии
Материалы, виды материалов, режимы отрисовки, кастомные материалы
Флаги для update
Цикл render
Анимации положения, метод анимации Morph
Сцену + камеру, добавление объектов на сцену, группировку
Свет, виды источников света, материал Matcap

Three. js часть 1: 3D в браузере
Раздел 7
Three. js часть 2: Работа с камерой
Раздел 7
Узнаем, что такое камера в WebGL и в Three. JS:
Управление камерой
Базовые движения камеры
Риги камер
Разные конструкции ригов для разных видов управления

На практике рассмотрим:
Камеру в Three. JS, параметры камеры, ресайз при переходе к мобильной версии
Подходы к анимации камеры, реакцию на действия пользователя, плавное изменение ракурса, управление с помощью рига (цикл рендера рига камеры) и создание анимации пролёта
Риги камер
Переключение между камерами, монтаж и правила монтажа



Three. js часть 2: Работа с камерой
Раздел 8
Будущее анимации в браузере
Раздел 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
Дальнейшее развитие в создании анимации
Будущее анимации в браузере
Курс «Анимация для фронтендеров»
Вебинары, уроки, домашка и проверка домашки наставником курса
Цена со скидкой
22 125 ₽
Полная цена
29 500 ₽
Стоимость обучения
Бесплатная консультация
Познакомимся, поможем понять, работает ли курс на ваши цели.

Расскажем, как проходит урок и как отвечают наставники.

Ответим на вопросы об оплате.
Оставляя заявку, вы принимаете условия соглашения