Онлайн-курс «Анимация для фронтендеров»

Анимационные эффекты позволяют создавать привлекательный пользовательский интерфейс. Приведение в действие различных элементов, увеличивает вовлеченность и улучшает впечатление пользователей. Этот онлайн-курс проводится для фронтенд-разработчиков, которые хотят улучшить свои навыки в создании анимации в браузере и научиться создавать динамические и привлекательные элементы для своих проектов. Обучение проводится в рамках онлайн-академии HTML Academy. Уровень курса — синьоры для мидлов.

Во время обучения вы изучите основы анимации HTML и CSS, включая принципы ключевых кадров, трансформаций, переходов и многого другого. Узнаете, как использовать SVG анимацию для создания векторной графики и интерактивных элементов. Знания, которые вы будете получать, можно сразу применить в своих проектах. Опытные кураторы-практики всегда ответят на вопрос и помогут, если что-то будет непонятно.

Краткая программа курса «Анимация для фронтендеров»:

• Главные отличия классической и компьютерной анимации.
• Три принципа выразительной анимации на основе CSS.
• Анимация внутри спецификации SVG.
• Покадровая анимация. JavaScript и Canvas.
• Матрицы трансформации 3D. Камера в WebGL и, в частности, в Three.JS.

В результате вы научитесь создавать эффектную и привлекательную анимацию в браузере, любой сложности. Благодаря этому, вы повысите качество UX и станете более профессиональны в разработке.

• Pipeline выполнения кода в браузере.
• CSS transition и animation: отличия.
• Временные функции: встроенные, cubic-bezier.

• Рассмотрим инструменты для отладки и улучшения производительности анимации в браузере.
• Узнаем, как перенести часть отрисовки CSS на видеоускоритель.
• Познакомимся с принципами Material design.
• Изучим, что такое придание веса объектам и создание иллюзии реалистичности, а также соблюдение принципа причины и следствия.
• Подробно рассмотрим 3 принципа выразительной анимации: расчёт времени, фазованное движение, доводка и захлёст движения.
• Попрактикуемся в работе с таймлайном составных объектов и групп элементов и планировании анимации: рассказ истории и управление вниманием пользователя.

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

• Мультипликация состояния персонажей в играх — метод в веб Sprite Sheets — заготовленные анимации, 360-модель (например, автомобиля).
• Компьютерная мультипликация, моушн-дизайн — метод в веб JS Tween и JS Morph — анимация с помощью библиотек, например, CreateJS, AnimateJS, GSAP.
• Игры с отслеживанием действий игрока в реальном времени — гонки, тетрис — метод создания моделей с интерфейсом взаимодействия — в веб интерактивные элементы и игры.
• Window.requestAnimationFrame.
• Canvas и его параметры и методы.
• Цикл отрисовки анимации простого элемента. Трансформации. Рисование картинки. Маскирование. Класс абстрактного объекта — рига. Расширение класса. Параметрическое задание траектории. Примеры: эллипс, спираль, парабола, синусоида, синусоида с затуханием и т.п.
• Манипуляции с траекториями: сложение, умножение, параллельный перенос, смещение фазы синусоиды.
• Методы update() и render().

• Цветовые фильтры.
• OpenGL.
• Маски — Lumination, Alpha.
• Цветовые наложения — blending.
• Шумы.
• Смещения.
• Размытия.
• Что такое вершинные и фрагментные шейдеры.
• Как использовать WebGL 3d для 2d эффектов.
• Что такое геометрия.
• Pipeline WebGL.
• Взаимодействие JS и WebGL.
• Типы данных в WebGL.
• Написание GLSL — основы.

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

• Управление камерой.
• Базовые движения камеры.
• Риги камер.
• Разные конструкции ригов для разных видов управления.
• Увидим, какие бывают виды камер в Three.JS, параметры камеры, ресайз при переходе к мобильной версии.
• Изучим подходы к анимации камеры. Разберёмся с реакцией на действия пользователя — плавное изменение ракурса. Управление с помощью рига: цикл рендера рига камеры. Создание анимации пролёта.
• Риги камер.
• Рассмотрим переключение между камерами — монтаж. Правила монтажа.

• Увидим, чем отличается Web Animation API от обычной CSS анимации и какие дополнительные возможности даёт.
• Изучим основы Houdini API.
• Поговорим о библиотеках, которые помогут упростить работу с анимациями, таймлайнами, SVG, canvas, WebGL.
• Рассмотрим программы для работы с анимацией и графикой для web: Google Web Designer, Adobe Animate, Adobe After Effects, программы 3d графики: Cinema 4d, Blender.
• Сделаем небольшой обзор подходов к созданию динамически генерируемой анимации и графики. Рассмотрим, какие инструменты можно использовать для построения кроссплатформенного ПО с 3d.
• Поговорим о том, как можно дальше развиваться в создании анимации.

• Формат
  Самостоятельно с наставником
  Видеоуроки / Консультации
  Обучение в ЛК на сайте автора
• Уровень сложности
  Для опытных
• Когда вы будете учиться
  В любой день в любое время
• Домашние задания
  ЕстьС проверкой
• Сопровождение
  Куратором
• Техническая поддержка
  В рабочее времяЭлектронная почта
• Что понадобится для обучения
  Навыки вёрстки и программирования на JavaScript
• Год выхода
  2023 Последнее обновление: 21.04.2024