Привет, меня зовут Кристина Гортон с Design + Code. Сегодня я хочу научить вас, как анимировать SVG с помощью библиотеки анимации GreenSock (GSAP). Мы начнем с рассмотрения кода SVG и его разбивки, чтобы лучше понять, как манипулировать им для анимации. Затем я расскажу о том, как экспортировать и оптимизировать ваши SVG. Далее я покажу вам, как воплотить эти SVG в жизнь с помощью GSAP. Мы будем использовать множество красивых иллюстраций и прототип пользовательского интерфейса из моего курса по макету CSS и анимации в CodePen и добавим к нему анимацию. Если у вас нет учетной записи CodePen, мы кратко поговорим о том, как ее настроить, всего за минуту.
Человеческий мозг запрограммирован уделять внимание движущимся объектам. Анимация повсюду в сети. От тонких переходов кнопок к полному рассказу истории онлайн. В этом курсе я покажу вам, как создавать привлекательные анимации, которые не отвлекают от продукта, но улучшают общее впечатление пользователя. Посмотрев, как найти или создать свои собственные SVG, мы начнем с нескольких простых анимаций GreenSock, чтобы привыкнуть к синтаксису.
В этом курсе мы будем использовать несколько разных инструментов. Одним из инструментов, которые мы будем использовать, является Figma.
Посмотреть больше
Этот материал находится в платной подписке. Оформи премиум подписку и смотри или слушай
SVG Animations with GreenSock,
а также все другие курсы, прямо сейчас!
Команда внимательно читает ваши комментарии и оперативно на них реагирует. Вы можете спокойно оставлять запросы на обновления или задавать любые вопросы о курсе здесь.
Делайте анимацию как профессионал с курсом GreenSock! Вы профессионал или просто начинаете работу с JavaScript, jQuery, GSAP и SVG-анимациями? Это не имеет значения.Мой курс идеально подходит для новичков - потому что я не «предполагаю», что вы уже знаете кучу вещей. Поэтому вы не будете разочарованы во время просмотра моих видео.С самого начала вы сможете забрать все, и говорить на одном языке, как и все остальные.
Анимации привлекают внимание и повышают уровень вовлеченности ваших пользователей. Но их нелегко настроить, и они не всегда выглядят так, как должны в каждом браузере. Greensock - лучшая платформа для создания производительных анимаций с широкими возможностями настройки. Этот курс познакомит вас с возможностями Greensock.
Изучите веб-анимацию простым способом: введение в SVG и GSAP
Learn Web Animation the Easy Way: An Intro to SVG and GSAP
Если вы являетесь разработчиком внешнего интерфейса, дизайнером пользовательского интерфейса или просто любителем веб-анимации, вы сможете воспользоваться методиками, изложенными в этом курсе. Мы используем проектный подход, чтобы познакомить вас с графическим форматом SVG и GreenSock Animation Platform - возможно, самой мощной и эффективной библиотекой анимации на JavaScript, доступной на сегодняшний день.
ihatetomatoes
![Изображение курса Основы SVG [полное руководство по спецификации языка 2020]](https://cdn.coursehunter.net/courses/720x440/osnovy-svg-polnoe-rukovodstvo-po-specifikacii-yazyka-2020.webp)
