Уроки Front end | Анимация SVG

Мы продолжаем наши видеоуроки по разработке сайтов. На этом занятии мы поговорим об SVG-иконках. Мы покажем, как сделать анимацию отрисовки SVG-иконки.

SVG-графику можно анимировать с помощью анимационных элементов. SVG-анимации напоминают CSS-анимации и переходы: создаются ключевые кадры, меняются цвета, объекты движутся. Но при этом они способны делать и то, чего CSS-анимации не могут.

Для работы мы используем, как и раньше, PhpStorm. Работать мы будем с тегом path.

Мы расскажем, какие есть атрибуты у этого тега. Объясним, за что отвечают атрибуты fill, stroke, stroke-dasharray и stroke-dashoffset. Покажем, что происходит при изменении их значений.

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

Если у вас возникнут проблемы с воссозданием этого кода – пишите нам (ссылка на соцсети Дмитрия). Вы также можете задать все интересующие вас вопросы по Front-end.

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

Не пропустите следующие видеоуроки на канале WebDesign Guru!

______________________________________________________________

[ildaranikin]

Три года в фронтенде и только узнал что свг можно анимировать. Круто👍

[kaidor-dragon]

Превьюха в видео топ! Лайк за превьюху!

[kostasancez]

Как анимировать SVG изображение, не иконку?

[igurys]

Долго ищу как сделать path с закрытым тегом. Пробовал иллюстратор, linkscape. Везде пути заканчиваются просто так /> А в видео показано что нужно animate ставить перед закрывающим </path>. Можно ли применить этот способ к путям созданным в программах?

[sdbk]

Ну такое, все, что можно понять из этого видео, то, что SVG можно анимировать, но думаю об этом и так все знали. А принцип анимации?

[orionpro]

используйте GSAP или другие библиотеки для анимации.

[tauron]

Урок и правда класс, но столкнулся с проблемой!
ПОМОГИТЕ))) У вас иконка умещается а один <path> а у меня подобные иконки содержат и path и circle и прочие и по несколько штук( Как этого избежать? просто каждую линию анимировать это капец)

[TheMarlboroLights]

Автор, а почему открывающий тег "<path" не закрыт?

[pwzisvi]

все конечно понятно, но я столкнулся с такой проблемой, что если текст svg, там код совсем другой, а я хочу его как то анимировать, то что делать?

[setsargsyan]

Спасибо за урок, а где можно скачать бесплатно PhpStorm, вроде была же ссылка?

[royalestshow]

Не понял, а чем от js этот svg отличается?


И какие преимущества?

[aksiman]

Как сделать запуск анимации при скроле на страницу?

[tauron]

А как сделать не при клике, а при наведении?!((

[orbita_studios]

Больше о svg не могк понять как такие линия чертить и все атрибуты

[bdqyxyz]

хочу анимированные баннеры в свг делать. Подскажите где инфу взять норм

[jgwtino]

Метка которая движется вниз по траектории, когда работает скролл

[sashastepakov]

Анимация, почему-то, не работает. Я определил длину линии, но анимация не заработала.

[hqmfrue]

А ведь некоторые люди научились увеличивать, ниче не видать