designcode.io
Пройдите курсы о лучших инструментах и системах проектирования. Прототипируйте и создавайте приложения с помощью React и Swift. 60 часов видеоконтента и ресурсных материалов.
Продолжительность
1 ч 56 мин
Категория
Другое (Tools)
Количество уроков
9 Видео
Дата добавления
2 авг. 2019 г., 18:29
Язык
Английский
Дата выхода
23 июл. 2019 г., 21:21
Привет, меня зовут Кристина Гортон с Design + Code. Сегодня я хочу научить вас, как анимировать SVG с помощью библиотеки анимации GreenSock (GSAP). Мы начнем с рассмотрения кода SVG и его разбивки, чтобы лучше понять, как манипулировать им для анимации. Затем я расскажу о том, как экспортировать и оптимизировать ваши SVG. Далее я покажу вам, как воплотить эти SVG в жизнь с помощью GSAP. Мы будем использовать множество красивых иллюстраций и прототип пользовательского интерфейса из моего курса по макету CSS и анимации в CodePen и добавим к нему анимацию. Если у вас нет учетной записи CodePen, мы кратко поговорим о том, как ее настроить, всего за минуту.
CodePen Коллекция для курса
Это ссылка на коллекцию CodePen.
Почему этот курс?
Человеческий мозг запрограммирован уделять внимание движущимся объектам. Анимация повсюду в сети. От тонких переходов кнопок к полному рассказу истории онлайн. В этом курсе я покажу вам, как создавать привлекательные анимации, которые не отвлекают от продукта, но улучшают общее впечатление пользователя. Посмотрев, как найти или создать свои собственные SVG, мы начнем с нескольких простых анимаций GreenSock, чтобы привыкнуть к синтаксису.
В этом курсе мы будем использовать несколько разных инструментов. Одним из инструментов, которые мы будем использовать, является Figma.
Посмотреть больше
-
Урок 1. 00:10:29Intro to SVG and GreenSock Animations
-
Урок 2. 00:17:29How to Create an SVG
-
Урок 3. 00:12:49Getting Started with GreenSock
-
Урок 4. 00:06:20Timing Functions and Easing
-
Урок 5. 00:10:21Creating Complex Animations
-
Урок 6. 00:11:10MorphSVG Plugin
-
Урок 7. 00:18:01DrawSVG Plugin
-
Урок 8. 00:16:49Animating Our UI
-
Урок 9. 00:12:39More GreenSock Plugins
Автор - designcode.io
Категории
Комментарии
Команда внимательно читает ваши комментарии и оперативно на них реагирует. Вы можете спокойно оставлять запросы на обновления или задавать любые вопросы о курсе здесь.
Другие материалы в этой категории
ihatetomatoes
14 дек. 2017 г., 22:20
GreenSock Workshop
Делайте анимацию как профессионал с курсом GreenSock! Вы профессионал или просто начинаете работу с JavaScript, jQuery, GSAP и SVG-анимациями? Это не имеет значения.Мой курс идеально подходит для новичков - потому что я не «предполагаю», что вы уже знаете кучу вещей. Поэтому вы не будете разочарованы во время просмотра моих видео.С самого начала вы сможете забрать все, и говорить на одном языке, как и все остальные.
Создавайте удивительные анимации с GreenSock
Create Amazing Animations with GreenSock
Анимации привлекают внимание и повышают уровень вовлеченности ваших пользователей. Но их нелегко настроить, и они не всегда выглядят так, как должны в каждом браузере. Greensock - лучшая платформа для создания производительных анимаций с широкими возможностями настройки. Этот курс познакомит вас с возможностями Greensock.
![Изображение курса Основы SVG [полное руководство по спецификации языка 2020]](https://cdn.coursehunter.net/courses/720x440/osnovy-svg-polnoe-rukovodstvo-po-specifikacii-yazyka-2020.webp)
Изучите веб-анимацию простым способом: введение в SVG и GSAP
Learn Web Animation the Easy Way: An Intro to SVG and GSAP
Если вы являетесь разработчиком внешнего интерфейса, дизайнером пользовательского интерфейса или просто любителем веб-анимации, вы сможете воспользоваться методиками, изложенными в этом курсе. Мы используем проектный подход, чтобы познакомить вас с графическим форматом SVG и GreenSock Animation Platform - возможно, самой мощной и эффективной библиотекой анимации на JavaScript, доступной на сегодняшний день.
