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

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

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

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

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

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

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

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

Ссылка на материалы: [ Ссылка ]

______________________________________________________________

👉Группа в вк - [ Ссылка ]

💭 Чат для - [ Ссылка ]

👍 Курсы веб дизайна - [ Ссылка ]

💵 Ищешь работу? Посмотри что у меня есть для тебя - [ Ссылка ]

📖 Telegram группа - [ Ссылка ]

💣 Понравился материал? Давай помоги нам - [ Ссылка ]

🏆 Тебе надо фотографии по бешеным скидкам? Тебе сюда - [ Ссылка ]

свернуть