Уроки Front end | Анимация SVG скачать в хорошем качестве

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

Мы продолжаем наши видеоуроки по разработке сайтов. На этом занятии мы поговорим об SVG-иконках. Мы покажем, как сделать анимацию отрисовки SVG-иконки. SVG-графику можно анимировать с помощью анимационных элементов. SVG-анимации напоминают CSS-анимации и переходы: создаются ключевые кадры, меняются цвета, объекты движутся. Но при этом они способны делать и то, чего CSS-анимации не могут. Для работы мы используем, как и раньше, PhpStorm. Работать мы будем с тегом path. Мы расскажем, какие есть атрибуты у этого тега. Объясним, за что отвечают атрибуты fill, stroke, stroke-dasharray и stroke-dashoffset. Покажем, что происходит при изменении их значений. Затем мы перейдем к самой анимации. Мы пропишем, когда отрабатывать нашу анимацию. Укажем скорость отрисовки иконки и количество повторений. Покажем, как заморозить иконку после окончания анимации. Сделаем настройку так, чтобы все отрисовывалось равномерно, а не рывками. Если у вас возникнут проблемы с воссозданием этого кода – пишите нам (ссылка на соцсети Дмитрия). Вы также можете задать все интересующие вас вопросы по Front-end. Пишите в комментариях под видео, если вам интересно больше узнать об SVG. Не пропустите следующие видеоуроки на канале WebDesign Guru! Ссылка на материалы: https://www.dropbox.com/sh/a2qf91rzok... ______________________________________________________________ 👉Группа в вк - https://vk.com/webdesign_guru 💭 Чат для - https://t.me/Webdesignguruchat 👍 Курсы веб дизайна - https://vk.com/market-129017017 💵 Ищешь работу? Посмотри что у меня есть для тебя - https://goo.gl/b6wUJp 📖 Telegram группа - https://telegram.me/webdesign_guru 💣 Понравился материал? Давай помоги нам - https://goo.gl/jfUkMM 🏆 Тебе надо фотографии по бешеным скидкам? Тебе сюда - https://shopdiz.biz/r/im7sNLRE