Создание компьютерной анимации

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

Вам будут представлены методы грамотного использования анимаций, которые помогут повысить качество пользовательского опыта и привлекательность разрабатываемых вами веб-сайтов.

Курс включает более 40 практических заданий и предоставляет возможность получить 10 консультаций у наставника.

Программа курса

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

Раздел 1

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

Мы также обсудим различия между линейной и покадровой анимацией и изучим 12 принципов выразительной анимации. В заключение раздела мы создадим простые анимационные переходы с использованием CSS.

Раздел 2

CSS-анимация
Во втором разделе мы продолжим изучение анимаций, основанных на CSS.

Мы рассмотрим инструменты для отладки и оптимизации анимаций в браузере, изучим возможность использования видеоускорителя для оптимизации отрисовки CSS, ознакомимся с принципами дизайна Material и изучим, как создавать причинно-следственные связи и придавать объектам анимированных элементов реалистичности.

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

Раздел 3

SVG-анимация
В этом разделе мы рассмотрим спецификацию SMIL, которая описывает анимацию внутри SVG.

Мы узнаем, в каких случаях рекомендуется использовать SMIL, а в каких — отказаться от нее. Также мы научимся создавать анимацию движения объектов по кривым, запускать анимации на основе событий, таких как "нажатие" или "завершение другой анимации".

Мы подробно изучим еще 4 принципа выразительной анимации: сжатие и растяжение, преувеличение, дуги и детализация. В практической части мы научимся создавать анимации, имитирующие рисование изображений и анимационные полеты.

Раздел 4

Покадровая анимация, jаvascript и Canvas
В этом разделе мы перейдем к изучению низкоуровневого подхода к анимации — покадровой анимации. Мы рассмотрим понятие FPS (кадров в секунду) и стандартные значения (24, 30, 60 кадров в секунду) и ознакомимся с примерами покадровой анимации.

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

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

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

Раздел 5

WebGL. Шейдеры
В этом разделе мы продолжим работу с покадровой анимацией. Мы изучим понятия WebGL и OpenGL и узнаем различия между работой в контексте 2D и WebGL.

Мы рассмотрим различные растровые эффекты, такие как цветовые фильтры, маски, цветовые наложения, шумы, смещения и размытия. Также мы изучим анимацию растровых эффектов, включая постоянное движение и изменение параметров.

В практической части мы рассмотрим, что такое вершинные и фрагментные шейдеры, как использовать WebGL 3D для создания 2D эффектов, обзор геометрии и pipeline WebGL.

Мы также узнаем, как взаимодействовать между JS и WebGL, какие типы данных используются в WebGL и о базовых принципах написания GLSL.

Раздел 6

Three.js часть 1: 3D в браузере
В этой главе мы снова поговорим о системах координат, точках и векторах. Изучим матрицы трансформаций 3D, кватернионы и углы Эйлера, перемножение матриц.

Рассмотрим 2 варианта создания моделей с интерфейсом управления пользователем:

Прямое задание параметров: скорости или ускорения (перемещения или вращения).
Задание цели — значения, к которому нужно постепенно приближаться: элемент притягивается к курсору.
Изучим цикл работы движка, методы invalidate(), update() и render(), особенности работы с плавающим FPS. Узнаем, как вести расчёты внутри update().

Автор материала: HTML Academy.
Страница автора: https://htmlacademy.ru/intensive/animation.

Рассылка от LearningClub

Обзоры курсов, тренингов. Рекомендации.

Ваш E-Mail будет в безопасности.

Наш канал в телеграм:

@LearningClub