Продолжительность
1 ч 56 мин 7 сек
Количество уроков
9 Видео
Дата добавления
02.08.2019
Привет, меня зовут Кристина Гортон с Design + Code. Сегодня я хочу научить вас, как анимировать SVG с помощью библиотеки анимации GreenSock (GSAP). Мы начнем с рассмотрения кода SVG и его разбивки, чтобы лучше понять, как манипулировать им для анимации. Затем я расскажу о том, как экспортировать и оптимизировать ваши SVG. Далее я покажу вам, как воплотить эти SVG в жизнь с помощью GSAP. Мы будем использовать множество красивых иллюстраций и прототип пользовательского интерфейса из моего курса по макету CSS и анимации в CodePen и добавим к нему анимацию. Если у вас нет учетной записи CodePen, мы кратко поговорим о том, как ее настроить, всего за минуту.
CodePen Коллекция для курса
Это ссылка на коллекцию CodePen.
Почему этот курс?
Человеческий мозг запрограммирован уделять внимание движущимся объектам. Анимация повсюду в сети. От тонких переходов кнопок к полному рассказу истории онлайн. В этом курсе я покажу вам, как создавать привлекательные анимации, которые не отвлекают от продукта, но улучшают общее впечатление пользователя. Посмотрев, как найти или создать свои собственные SVG, мы начнем с нескольких простых анимаций GreenSock, чтобы привыкнуть к синтаксису.
В этом курсе мы будем использовать несколько разных инструментов. Одним из инструментов, которые мы будем использовать, является Figma.