Анимация для фронтендеров (2020) - 9 Октября 2020 - Графика и дизайн. Все для Вашего творчества.

Курс проходит в асинхронном формате, записаться на него можно в любой момент и заниматься в удобном темпе под присмотром наставника.

Курс рассчитан на опытных разработчиков, желающих поднять свои навыки. Для его освоения нужны навыки вёрстки и программирования на JavaScript. Курс подойдёт и для новичков, которые успешно прошли курсы «HTML и CSS. Адаптивная вёрстка и автоматизация» и «JavaScript. Профессиональная разработка веб-интерфейсов».

В курсе мы используем самые эффективные для обучения профессионалов форматы: тексты, тренажёры, скринкасты и демонстрации. Мы не злоупотребляем видео и используем его только там, где оно необходимо.

Что вас ждёт на обучении:
1. Структурированная теория
В каждом разделе вы изучаете теорию и методику решения практических задач: из учебника, подобранных нами материалов и демонстраций кода на примере учебного проекта.
2. Практика
После изучения теории и методики выполняете домашние задания, в которых работаете над своим проектом и закрепляете учебный материал.
3. Ревью кода и консультации
После каждого задания наставник проверяет качество работы и даёт обратную связь. А если остались вопросы, можно записаться на консультацию — наставник поделится опытом и расскажет, как можно сделать ещё лучше.

Программа курса:
Раздел 1. Основы анимации
Мы разберёмся, что такое анимация, почему человек видит движения на экране, какие бывают виды анимации и как благодаря анимации повысить качество UX. Разберем основные идеи Material Design. Также рассмотрим самый простой вид линейных анимаций и их временные функции.
- Линейные анимации.
- Покадровая анимация.
- transition.
- Кривые Безье.

Раздел 2. Анимация в CSS
Продолжим изучать линейные анимации и изучим группу свойств animation в CSS. Также мы рассмотрим, как запустить анимацию на основе событий в JavaScript. Научимся отлаживать анимации и профилировать производительность, чтобы увеличить их скорость и скорость перерисовки страницы в целом.
- Animation.
- @Key-Frame.
- Intersection Observer API.

Раздел 3. SVG-анимация
В этой части мы погрузимся в изучение SVG. Рассмотрим, как анимировать отрисовку кривых. Заставим двигаться один SVG-объект по граням другого объекта и научимся создавать цепочки анимаций с помощью тега animate.
- SVG Path.
- stroke-dasharray.
- Тег animate.

Раздел 4. Покадровая анимация. JavaScript и Canvas
Начиная с этой части курса мы изучим покадровые анимации — это более низкоуровневый вид анимации. Научимся анимировать изображения на canvas, добьемся эффективной работы анимации и в итоге получим заветные 60 кадров в секунду.
- Покадровая анимация.
- canvas.
- window.requestAnimationFrame.
- Math.sin(), Math.cos().

Раздел 5. WebGL. Шейдеры
В этом разделе научимся создавать необычные и сложные анимационные эффекты. Поймём отличия вычислений на CPU и GPU, а также научимся писать специальные микропрограммы для GPU — шейдеры.
- WebGL.
- OpenGL.
- GLSL.

Раздел 6. Three.js часть 1: 3D в браузере
В этой главе мы снова поговорим о системах координат, точках и векторах. Изучим матрицы трансформаций 3D, кватернионы и углы Эйлера, перемножение матриц.
Рассмотрим 2 варианта создания моделей с интерфейсом управления пользователем:
- Прямое задание параметров: скорости или ускорения (перемещения или вращения).
- Задание цели — значения, к которому нужно постепенно приближаться: элемент притягивается к курсору.
- Изучим цикл работы движка, методы invalidate(), update() и render(), особенности работы с плавающим FPS. Узнаем, как вести расчёты внутри update().
В практической части начнём работать с библиотекой Three.js. Изучим:
- Способы описания объектов: положение, геометрия и материалы.
- Геометрию: параметрические встроенные, произвольные загружаемые. Буфер геометрии.
- Какие есть материалы, виды материалов, режимы отрисовки, кастомные материалы.
- Флаги для update.
- Цикл render.
- Анимации положения. Метод анимации Morph.
- Сцена + камера. Добавление объектов на сцену. Группировка.
- Свет. Виды источников света. Материал Matcap.

Раздел 7. Three.js часть 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.
- Поговорим о том, как можно дальше развиваться в создании анимации.