Robot
Складчик
- #1
[НТМ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
— Полезные инструменты и сервисы
— Итоги курса
— Итоговый тест по курсу
— Дополнительные материалы
Улучшайте 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
— Полезные инструменты и сервисы
— Итоги курса
— Итоговый тест по курсу
— Дополнительные материалы
