- Регистрация
- 13.03.2019
- Сообщения
- 48 482
После завершения курса вы сможете строить в браузере анимации любой сложности. Благодаря грамотному использованию анимаций вы сможете повысить качество UX и привлекательность сайтов, которые вы разрабатываете. На курсе предусмотрено более 40 практических заданий. Формат курса: асинхронный Программа курса Раздел 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 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. Поговорим о том, как можно дальше развиваться в создании анимации. 
|
Прямая ссылка на скачивание, доступно для пользователей: VIP
Прямая ссылка на скачивание, доступно для пользователей: VIP
Последнее редактирование:
