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

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

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

SVG Essentials & Animation, v2

frontendmasters

★4.2 (всего оценок - 38)

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

4 ч 12 мин

Категория

Другое (Frontend)

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

57 Видео

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

30 нояб. 2018 г., 21:15

Язык

Английский

Дата выхода

29 нояб. 2018 г., 22:59

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

29 апр. 2026 г., 01:53

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

Что делает SVG ключевым инструментом в современной веб‑анимации

SVG остаётся одним из самых мощных форматов для графики в Интернете: он масштабируемый, адаптивный и полностью управляемый через DOM. Благодаря этому вы можете строить динамичные интерфейсы, которые одинаково хорошо выглядят на любых устройствах и экранах. В рамках курса вы разберёте реальные сценарии использования SVG для UI/UX, научитесь работать с файлами, оптимизацией и продвинутыми эффектами.

Ключевые навыки и результаты обучения

Глубокое понимание графики и базовых элементов SVG

Работа с platonic shapes и командами пути для создания сложных форм.
Разбор атрибута viewBox и управление масштабом изображения.

Создание и оптимизация SVG‑графики

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

Разработка анимаций, готовых к продакшену

Создание временных рамок и взаимодействий для сложных анимационных последовательностей.
Построение производительных анимаций, учитывающих ограничения реальных проектов.

Кроссбраузерность и производительность

Настройка корректной работы SVG во всех современных браузерах.
Повышение производительности за счёт оптимизации кода и графических элементов.

Работа с GreenSock API

Использование многофункционального API GreenSock для создания впечатляющих переходов и визуальных эффектов.
Построение плавных и отзывчивых анимаций, усиливающих впечатление от интерфейса.

Практика и творческий подход

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

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

Подробные примеры, исходники и вспомогательные материалы доступны в репозитории:

https://github.com/sdras/svg-workshop

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

Урок 1.00:06:31
Introduction & Setup
Урок 2.00:03:59
What is SVG?
Урок 3.00:03:50
SVG Support & Performance
Урок 4.00:02:29
The Antidote to Positioning in CSS
Урок 5.00:05:52
Platonic Shapes
Урок 6.00:01:52
viewBox & Responsive
Урок 7.00:04:37
preserveAspectRatio
Урок 8.00:10:33
Paths, Groups, & Polylines
Урок 9.00:02:33
Animated Bézier Curves & Template Literals
Урок 10.00:02:48
Accessibility
Урок 11.00:06:20
Optimizing & Building
Урок 12.00:08:14
Constructing an SVG
Урок 13.00:03:52
Starting an SVG
Урок 14.00:02:53
Prototyping
Урок 15.00:00:52
Planning an Animation Exercise
Урок 16.00:02:22
Planning an Animation Review
Урок 17.00:02:15
Animation Support Breakdown
Урок 18.00:04:17
Differences in Functionality
Урок 19.00:02:22
Why SVG?
Урок 20.00:01:37
Transform-Origin
Урок 21.00:00:15
Animate an SVG Exercise
Урок 22.00:03:03
SVG Tools and Ideas Q&A
Урок 23.00:10:42
Sprites
Урок 24.00:05:08
Atmospheric & Elemental Motion
Урок 25.00:12:17
Tools Overview
Урок 26.00:07:50
Performance & GSAP
Урок 27.00:03:54
TweenMax Syntax
Урок 28.00:03:12
Stagger
Урок 29.00:01:04
GSAP Monster Demo
Урок 30.00:01:35
Cycle Stagger
Урок 31.00:01:45
Setting CSS Properties
Урок 32.00:01:20
Comments on D3
Урок 33.00:12:47
Timeline
Урок 34.00:09:08
GSAP Demo
Урок 35.00:00:25
GSAP Exercise
Урок 36.00:08:22
UI vs Standalone Animation
Урок 37.00:02:00
Social Engineering with Animation
Урок 38.00:01:42
Context Switching
Урок 39.00:04:09
Improving an Existing UI Demo
Урок 40.00:02:43
Interaction, JS Detection, & Scaling
Урок 41.00:01:34
Interaction & GSAP Timeline Functions
Урок 42.00:02:53
Interaction Demo
Урок 43.00:07:38
Draggable
Урок 44.00:00:44
Interactive Exercise
Урок 45.00:06:32
DrawSVG
Урок 46.00:03:03
Motion Along a Path
Урок 47.00:04:36
Curviness & Rotation
Урок 48.00:06:04
Animating Text
Урок 49.00:06:29
Relative Color Values
Урок 50.00:00:30
Creating a Story Exercise
Урок 51.00:12:59
MorphSVG
Урок 52.00:09:42
Bonus Demos
Урок 53.00:00:22
Shape Morph Exercise
Урок 54.00:08:22
Clipping & Masking
Урок 55.00:03:36
viewBox
Урок 56.00:04:04
svgOrigin
Урок 57.00:00:19
Thanks!

Автор - frontendmasters

frontendmasters

FrontendMasters — одна из ведущих онлайн-платформ для изучения фронтенд- и веб-разработки. Курсы представлены в формате видеоворкшопов и преподаются практикующими экспертами из крупных технологических компаний. Платформа охватывает широкий спектр современных технологий (JavaScript, React, TypeScript и др.) и делает упор на глубокое понимание и применение знаний на практике.

+794

Комментарии

kojo
1 мая 2023 г., 22:02
What a garbage course. So happy I didn't pay for it.

Imagine being this unimaginative to boar the students with so much theory in such a fun domains a SVG. Terrible.