[HTML Academy] Анимация для фронтендеров

[Moderator]

Анимация для фронтендеров — новый курс HTML Academy. В программе: линейная и покадровая анимация, анимация CSS и SVG, Canvas, WebGL и шейдеры, 3D в браузере и будущее анимации в браузере. Курс проходит в асинхронном формате, записаться на него можно в любой момент и заниматься в удобном темпе под присмотром наставника Структурированная теория В начале каждого раздела вы изучаете теорию из текстового учебника и отобранных нами материалов. Практика После изучения теории выполняете домашнее задание, в котором работаете над своим проектом и закрепляете учебный материал. Ревью кода После каждого задания ваш личный наставник проверяет качество работы, делится опытом и рассказывает, как можно сделать лучше. Программа курса После завершения курса вы сможете строить в браузере анимации практически любой сложности. Благодаря грамотному использованию анимаций вы сможете повысить качество UX и привлекательность сайтов, которые вы разрабатываете. Раздел 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.