Главная страницаКатегория другое (frontend)Продвинутая SVG Анимация

Продвинутая SVG Анимация

Name: Продвинутая SVG Анимация
Rating: 4.3 (36 reviews)

Advanced SVG Animations

master.dev (ex FrontendMasters)

★4.3 (всего оценок - 36)

Продолжительность

2 ч 54 мин

Категория

Другое (Frontend)

Количество уроков

28 Видео

Дата добавления

2 февр. 2017 г., 00:00

Язык

Английский

Дата выхода

10 апр. 2018 г., 10:00

Дата обновления

28 апр. 2026 г., 20:41

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

Что вы узнаете на курсе

Курс охватывает как основы работы с SVG, так и продвинутые приёмы анимации, которые можно применять в современных веб‑проектах.

Базовые понятия SVG

Как устроен SVG и почему он так важен для современных интерфейсов
Оптимизация SVG для уменьшения веса и ускорения загрузки
Использование атрибутов, групп и слоёв

Методы анимации SVG

Анимация на чистом CSS
Использование SMIL-анимации
Анимация с помощью JavaScript и библиотек (GSAP, Anime.js)

Продвинутые техники

Построение сложных микровзаимодействий
Создание последовательных и триггерных анимаций
Анимация по пути и деформация фигур

Практическая часть курса

Каждый модуль включает примеры, рабочие файлы и задания, которые помогут закрепить навыки и научиться использовать SVG‑анимацию в реальных проектах.

Создание анимированных иконок

От простых эффектов наведения до детализированных интерактивных элементов пользовательского интерфейса.

Анимация иллюстраций и сцен

Работа с многослойными графическими сценами, создание плавных переходов и динамичных визуальных историй.

Адаптивные анимации

Как обеспечить корректное отображение анимации на разных устройствах и экранах.

Кому подходит этот курс

Фронтенд‑разработчикам, желающим улучшить визуальные эффекты в проектах
Дизайнерам, стремящимся создавать интерактивные интерфейсы
Всем, кто хочет освоить современные техники веб‑анимации

Итог

После прохождения курса вы сможете уверенно создавать сложные и красивые SVG‑анимации, которые сделают ваши веб‑страницы более живыми, современными и запоминающимися.

Удален по просьбе правообладателя

Урок 1.00:05:52
SVG Introduction
Урок 2.00:04:22
Platonic Shapes
Урок 3.00:08:03
Paths and Groups
Урок 4.00:08:52
Optimization & CSS Animations
Урок 5.00:02:26
Exercise 1
Урок 6.00:09:58
Step Animations & Rolling backgrounds
Урок 7.00:12:14
Responsive Sprites
Урок 8.00:06:19
Atmospheric and Elemental Motion
Урок 9.00:12:37
Benchmarks
Урок 10.00:03:04
CSS Properties
Урок 11.00:09:08
Greensock Workflow
Урок 12.00:05:58
Greensock Syntax
Урок 13.00:03:16
Staggering Animations
Урок 14.00:10:33
Timelines
Урок 15.00:00:38
Exercise 3
Урок 16.00:05:49
Illustrator Workflow
Урок 17.00:10:00
UI/UX Animation Overview
Урок 18.00:09:21
Animation with Interaction
Урок 19.00:09:28
Draggable Animations
Урок 20.00:03:01
DrawSVG
Урок 21.00:04:44
Motion Along a Path
Урок 22.00:03:46
SplitText Plugin
Урок 23.00:01:11
Relative Tweens
Урок 24.00:10:14
Exercise 5
Урок 25.00:00:19
MorphSVG
Урок 26.00:05:39
Exercise 6
Урок 27.00:03:56
Storyboarding Animations
Урок 28.00:03:58
Resources and Course Wrap-Up

Автор - master.dev (ex FrontendMasters)

master.dev (ex FrontendMasters)

Master.dev — это образовательная платформа для разработчиков, которая помогает совершенствовать инженерные навыки: от изучения языков программирования и веб-разработки до работы с базами данных, облачной инфраструктурой, DevOps и искусственным интеллектом. Ранее известная как Frontend Masters, платформа расширила фокус и теперь обучает разработчиков всему спектру современной разработки ПО.

+807