[HTML Academy] Онлайн‑курс «Анимация для фронтендеров» (2020)

ZenMaster

Модератор
Сообщения
6.045
Реакции
8
Баллы
38
Credits
2.000
Материал может быть удален по запросу правообладателя!

0.png


Описание курса:

[HTML Academy] Онлайн‑курс «Анимация для фронтендеров» (2020)


Анимация для фронтендеров — новый курс HTML Academy. В программе: линейная и покадровая анимация, анимация CSS и SVG, Canvas, WebGL и шейдеры, 3D в браузере и будущее анимации в браузере. Курс проходит в асинхронном формате, записаться на него можно в любой момент и заниматься в удобном темпе под присмотром наставника

Программа курса
Раздел 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
Покадровые анимации. Canvas
Начиная с этой части курса мы изучим покадровые анимации — это более низкоуровневый вид анимации. Научимся анимировать изображения на canvas, добьемся эффективной работы анимации и в итоге получим заветные 60 кадров в секунду.

Покадровая анимация.
canvas.
window.requestAnimationFrame.
Math.sin(), Math.cos().
Раздел 5
WebGL. Шейдеры
В этом разделе научимся создавать необычные и сложные анимационные эффекты. Поймём отличия вычислений на CPU и GPU, а также научимся писать специальные микропрограммы для GPU — шейдеры.

WebGL.
OpenGL.
GLSL.
Раздел 6
3D в браузере
Наконец-то изучим основы 3D-моделирования и рассмотрим разные библиотеки для реализации 3D в браузере. Создадим сцену, свет для неё, добавим 3D модель с текстурами и элементы управления.

Раздел 7
Будущее анимации в браузере
Раздел посвящён Web Animation API, который расширяет возможности линейных анимаций благодаря JavaScript, но пока является экспериментальным. Ещё в разделе разберемся с Houdini API, благодаря которому можно получить низкоуровневый доступ к движку CSS.

Ссылка на Продажник:

Скрытое содержимое для зарегистрированных пользователей!

Ссылка на скачивание этого материала:

Скрытое содержимое могут видеть только пользователь группы : Vip, Администратор, Модератор, Проверенный, Свой

Прямая ссылка на покупку материала:
Для просмотра скрытого содержимого, необходимо Войти или Зарегистрироваться
 
Сверху