[НТМL Academy] SVG-анимации

[Аноним]

Ссылка на картинку

На курсе вы научитесь работать с векторной графикой и применять JavaScript-библиотеки для её анимирования.
Улучшайте UI/UX вашего проекта с помощью анимаций, которые произведут впечатление на пользователя.

Программа курса
Раздел 1

Введение
Познакомимся с историей векторной графики в вебе, затронем её особенности и преимущества относительно растровой графики. Узнаем положение SVG во фронтенде. Попрактикуемся в интегрировании SVG-элементов в страницу и в рисовании векторных фигур.

— Что будет на курсе
— Формат SVG во фронтенде
— Синтаксис, атрибуты и стандарты SVG
— Варианты размещения SVG на странице
— Суть анимации и способы анимирования SVG
‍
— Тренажёр: знакомство с SVG
— Демо: корректируем размеры SVG-изображения и его viewBox
— Демо: встраиваем SVG на страницу
— Демо: нормализуем заливку и обводку
‍
Практика
— Задание: работа с иконками в SVG-формате
— Решение: пошаговая эталонная реализация
‍
— Тест по первому разделу

— Дополнительные материалы‍

Раздел 2

Анимирование SVG с помощью CSS
Узнаем, как анимировать SVG-изображения с помощью CSS, какие для этого существуют приёмы и свойства. Рассмотрим логику работы с transition и @keyframes, изучим свойства stroke-dasharray и stroke-dashoffset.
‍
— Когда использовать CSS для SVG
— CSS-свойства для анимирования
— Создание и анимирование индикаторов загрузки
‍
— Демо: анимируем иконки интерфейса
— Демо: создаём индикатор загрузки
— Демо: создаём сложный спиннер
— Демо: делаем лоадер-линию

Практика
— Задание: создание индикатора загрузки
— Решение: пошаговая эталонная реализация
— Задание: эффект обводки у кнопки по ховеру
— Решение: пошаговая эталонная реализация

— Тест по второму разделу

— Дополнительные материалы

Раздел 3

Анимирование SVG с помощью SMIL
Познакомимся с языком SMIL и научимся создавать с его помощью анимации.
‍
— Что такое SMIL
— Краткое введение в синтаксис
‍
— Демо: создаём анимацию квадрата
— Демо: создаём анимацию нескольких элементов
— Демо: создаём морфинг в SMIL

— Особенности запуска анимаций: сторонние и inline SVG

Практика
— Задание: работа с иконками по клику в SMIL
— Решение: пошаговая эталонная реализация

— Тест по третьему разделу
— Дополнительные материалы

Раздел 4

Анимирование SVG с помощью JS
Разберём интерполяцию атрибутов, метод requestAnimationFrame и морфинг. Также узнаем про внутреннее устройство контуров в SVG и генеративную графику. Научимся работать с библиотеками Anime.js и Snap.svg. Создадим кастомный курсор и ещё множество сложных визуальных эффектов.
‍
— Возможности JavaScript
— Интерполяция атрибутов и requestAnimationFrame
— Демо: анимируем кастомный курсор
‍
Практика
— Задание: создание кастомного курсора
— Решение: пошаговая эталонная реализация

Морфинг и библиотеки
— Морфинг
— GSAP и Anime.js
— Морфинг с помощью KUTE.js
— Библиотеки для работы с SVG
‍
Практика
— Задание: морфинг иконки
— Решение: пошаговая эталонная реализация

Работа с контурами и анимация траекторий
— Анимация контуров и траектории
— Погружение в path и генеративная графика

— Демо: анимируем движение по траектории
— Демо: рисуем траекторию по скроллу

Практика
— Задание: анимация траектории
— Решение: пошаговая эталонная реализация

— Демо: анимируем текст
— Демо: создаём таймлайн и композицию в Anime.js

Практика
— Задание: анимирование главного экрана
— Решение: пошаговая эталонная реализация
‍
— Тест по четвёртому разделу

— Дополнительные материалы

Раздел 5

Подготовка SVG к анимированию и производительность анимации
Рассмотрим визуальное отображение SVG в редакторе: структуру документа, работу с контурами, сохранение SVG без мусора. Узнаем, как выбрать подходящий способ анимации.
‍
— Создание структурированного SVG-кода
— Демо: подготовим SVG к анимации

— Графические редакторы
— Отладка разных видов анимаций
— Анализ производительности
— Как выбрать инструмент для создания анимации

Практика
— Задание: подготовка SVG для анимации
— Решение: пошаговая эталонная реализация

— Тест по пятому разделу

— Дополнительные материалы по работе с графическим редактором Figma

Раздел 6

Дополнительные возможности SVG
Поговорим о встроенных возможностях векторной графики, которые напрямую не связаны с анимацией. Разберём маски, фильтры, графики и диаграммы. Затронем Canvas, узнаем его преимущества и недостатки относительно SVG. Попрактикуемся с D3.js, фильтрами и масками. А ещё создадим раскраску.
‍
— Введение в дополнительные возможности SVG
— Маски: синтаксис и базовые возможности
— Демо: учимся работать с масками
— Анимация масок
— Демо: анимируем закрашивание изображения
‍
Практика
— Задание: создание и анимирование маски
— Решение: пошаговая эталонная реализация

Фильтры
— SVG-фильтры
— Демо: работаем с примитивом фильтров feColorMatrix
— Демо: учимся работать с SVG-фильтрами
‍
Практика
— Задание: создание Gooey-эффекта в интерфейсном элементе
— Решение: пошаговая эталонная реализация
‍
Графики и диаграммы
— Анимирование графиков и диаграмм
— Демо: создаём анимированную диаграмму

Практика

— Задание: создание столбчатой диаграммы
— Решение: пошаговая эталонная реализация
‍
Тест по шестому разделу

— Дополнительные материалы

Раздел 7

Заключение
Подведём итоги и узнаем, куда можно двигаться дальше.
‍
— SVG и Canvas
— Демо: сравним SVG и Canvas

— Полезные инструменты и сервисы
— Итоги курса
‍
— Итоговый тест по курсу

— Дополнительные материалы