Java, UX, HTML, CSS, WEB-design

Как создавать, редактировать и анимировать SVG в одном месте с помощью SVGator 3.0


  • Миколай Добруцкий

  • 0 Комментарии

Как создавать, редактировать и анимировать SVG в одном месте с помощью SVGator 3.0

  • 8 минут чтения

  • SVG, приложения, графика, анимация

Краткое резюме ↬

Сегодня мы более подробно рассмотрим SVGator 3.0, новую основную версию популярного приложения SVG, которое позволяет создавать, редактировать и анимировать файлы SVG и максимально эффективно использовать возможности SVG — от начала до конца.

SVGator развивается, и он сильно развивается. Три года назад мы опубликовали всеобъемлющее введение в основы использования SVGator. В то время это было приложение, предназначенное исключительно для анимации файлов SVG, созданных в других приложениях. Два года назад мы представили вам новую версию SVGator и ее улучшенные возможности анимации. На этот раз мы представляем новую основную версию SVGator, которая предлагает зрелую, полную среду для рисования с нуля и анимации графики SVG.

Примечание: Некоторые функции SVGator, описанные в этом руководстве, являются платными. В бесплатном плане вы можете создавать и экспортировать неограниченное количество SVG-графики. Вы также можете использовать основные функции анимации и экспортировать 3 анимации в месяц. Расширенные функции анимации доступны в рамках платного плана, начиная с 11 долларов США в месяц.

В этой статье мы проследим за процессом создания пользовательского загрузчика SVG, от его рисования с нуля и применения различных визуальных эффектов до создания различных типов анимации до экспорта вашего файла и подготовки его для использования в Интернете.

Пользовательский загрузчик, созданный с использованием чистого SVG, нарисованный и анимированный в SVGator.

Начнем с создания нового пустого файла и изменения цвета его фона.

Изменение цвета холста

Изменение цвета полотна. (Большой превью)

Отсюда мы можем начать рисовать иллюстрацию, которую мы собираемся анимировать позже. SVGator позволяет рисовать все стандартные формы SVG, такие как эллипсы, прямоугольники и многоугольники, а также использовать инструменты Pen и Pencil для рисования собственных. Вы также можете использовать логические функции для объединения фигур друг с другом.

Чтобы мне было легче создавать желаемую форму, я начал с рисования круга в качестве ориентира в центре холста. К счастью, SVGator упрощает выравнивание и измерение элементов благодаря умной системе направляющих и функциям привязки. Вы также можете использовать сетки и линейки для большей точности и достоверности.

Использование интеллектуальных направляющих для выравнивания круга по центру

Использование интеллектуальных направляющих для выравнивания круга по центру. (Большой превью)

Вы знали?  Помимо базовых фигур и функций рисования, SVGator также предлагает библиотеку готовых ресурсов для ускорения рабочего процесса.  Вы можете выбирать из огромного разнообразия форм, значков и иллюстраций.

Вы знали? Помимо базовых фигур и функций рисования, SVGator также предлагает библиотеку готовых ресурсов для ускорения рабочего процесса. Вы можете выбирать из огромного разнообразия форм, значков и иллюстраций. (Большой превью)

Затем, используя Pen Tool, мы рисуем первую каплю, примерно повторяя форму круга под ней. Инструмент «Карандаш» также подойдет для этой цели. Что действительно здорово в этом, так это то, что SVGator Pencil Tool обычно создает фигуры с гораздо меньшим количеством узловых точек, чем аналогичные инструменты в других приложениях, что делает результат не только более гладким, но и намного меньшим по размеру файла.

Используя Pen Tool, нарисуйте форму капли. Обратите внимание, что по мере добавления новых точек к пути вы всегда можете изменять уже существующие точки и кривые на лету, перемещая и перетаскивая их. Не нужно входить и выходить из режима рисования, чтобы настроить уже созданные линии.

Создание и редактирование фигур в SVGator может показаться немного другим, чем в других векторных инструментах, но как только вы привыкнете к нему, это действительно очень просто. Также важно отметить, что все функции рисования SVGator полностью бесплатны, поэтому вы можете использовать его в качестве программного обеспечения для создания SVG столько раз, сколько захотите, бесплатно.

Если вам нужно больше места для рисования, вы можете легко скрыть и показать боковые панели приложения, нажав

Если вам нужно больше места для рисования, вы можете легко скрыть и показать боковые панели приложения, нажав . (Большой превью)

Когда первая капля готова, пришло время немного ее стилизовать. Здесь мы натыкаемся на одно из самых больших конкурентных преимуществ приложения. Другие популярные приложения векторной графики, которые позволяют экспортировать файлы SVG, обычно должны использовать свои функции, чтобы соответствовать множеству форматов и вариантов использования. В то же время приложения, ориентированные в первую очередь на пользовательские интерфейсы, в основном обслуживают то, что возможно с помощью свойств HTML и CSS, и редко уделяют много внимания специфичным для SVG функциям, таким как маркеры штрихов или фильтры.

SVGator, предназначенный исключительно для создания файлов SVG, в полной мере использует возможности этого формата, в частности. Сюда входят параметры, относящиеся к тому, как SVG обрабатывает штрихи, заливки, элементы градиента (вы слышали о spreadMethod атрибут градиентов SVG?), фильтры (например, размытие, тень или сепия) и многие другие.

Он также позволяет вам стилизовать (ваши заливки, обводки, эффекты и т. д.) с уверенностью, что конечный результат будет таким, как вы ожидаете, поскольку все эти функции были созданы специально для файлов SVG.

Изменение градиентной заливки фигуры

Изменение градиентной заливки фигуры. (Большой превью)

В нашем случае подойдет одна градиентная заливка и градиентная обводка. Я также применил фильтр Light Blur к элементу в качестве последнего штриха. Обратите внимание, что поскольку SVGator использует собственные фильтры SVG вместо CSS, он позволяет вам управлять свойствами размытия для обеих осей по отдельности. В этом случае я применил размытие только по оси X.

Добавление фильтра к выбранному объекту

Добавление фильтра к выбранному объекту. (Большой превью)

Затем мы можем продублировать каплю и снова использовать Pen Tool, чтобы создать еще две разные капли. То, как работает инструмент «Перо», позволяет очень легко изменить форму, не теряя плавной непрерывной линии.

Поиграйте с фигурами, чтобы получить несколько разных неправильных форм.

В качестве завершающего элемента иллюстрации мы добавляем несколько случайно расположенных светящихся точек. Они представляют собой не более чем круги с примененной градиентной заливкой.

Использование эллипсов с градиентной заливкой для создания светящихся блесток

Использование эллипсов с градиентной заливкой для создания светящихся блесток. (Большой превью)

Наш загрузчик в исходном состоянии готов. Теперь самое интересное: анимация!

На самом деле не имеет значения, какой элемент иллюстрации мы будем анимировать первым. В моем случае я начал с анимации блесток. Добавляя аниматор положения к каждому элементу, мы можем создавать сложные анимации пути. Анимация пути позволяет нам заставить элемент двигаться по пути любой формы с течением времени. В нашем случае это заставит блестки циркулировать по холсту, чтобы создать впечатление полета вокруг центральных элементов иллюстрации. Мы также можем использовать аниматоры «Масштаб» и «Непрозрачность», чтобы искра казалась блуждающей все дальше и ближе от зрителя и усиливала иллюзию движения в трехмерном пространстве.

Создание анимации пути для одной из блесток.

Примечание: Если вы хотите узнать больше о создании анимации пути, я бы порекомендовал посмотреть это руководство: «Анимация пути движения — анимация любого объекта вдоль произвольного пути».

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

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

Чтобы анимировать капли, можно использовать аниматор Morph. Это позволяет нам изменять форму во времени и создавать плавные переходы между этими состояниями. Чтобы добиться красивого, четкого перехода между двумя фигурами, мы добавляем ключевой кадр на временную шкалу аниматора Morph и изменяем фигуру с помощью инструмента «Перо» — точно так же, как мы делали это, когда рисовали дополнительные капли.

Создание анимации морфинга блоба.

Если вы хотите узнать больше о создании анимации морфинга, этот учебник не только познакомит вас с основами, но и поднимет его на совершенно новый уровень: «Учебник по расширенной анимации морфинга».

Важной частью каждой анимации является ее временная функция. Для блесток я в основном использовал функции синхронизации Ease In Out. Это позволяет точкам замедляться, когда они достигают узкого поворота орбиты, и ускоряться на прямых участках, помогая движению выглядеть ближе к тому, чем оно могло бы казаться в такой перспективе многомерного пространства.

Функция синхронизации, используемая для блесток

Функция синхронизации, используемая для блесток. (Большой превью)

Для BLOB-объектов я также использовал функцию Ease In Out. Вы можете заметить, что обе временные функции отличаются от функций Ease In Out по умолчанию. Я немного «заострил» их, используя интерфейс кривой Безье. Это позволило мне сделать движения плавными и естественными, без резких поворотов и икоты, но и без слишком заметных замедлений.

Функция синхронизации, используемая для больших двоичных объектов.

Функция синхронизации, используемая для больших двоичных объектов. (Большой превью)

После еще нескольких незначительных корректировок файл готов к экспорту. Новая версия SVGator сочетает в себе функции предварительного просмотра с функциями экспорта. Благодаря этому вы можете в режиме реального времени просматривать свои анимации в браузере, а также тестировать и изменять настройки экспорта.

Окно экспорта SVGator (большой предварительный просмотр)

В нашем случае мы хотим, чтобы анимация действовала как бесконечный цикл. Вы также можете управлять поведением графики, отображать ее при загрузке или при действии пользователя, например при щелчке или прокрутке.

Экспортированный файл идеально соответствует анимации, которую мы создали в приложении, и готов к использованию в Интернете.

См. перо [SVGator Loader](https://codepen.io/smashingmag/pen/wvJzWgp) Миколая.

См. загрузчик Pen SVGator от Mikołaj.

Надеюсь, вам понравилась эта статья, и она вдохновит вас на создание самых удивительных вещей с помощью SVG в вашей работе!

Куда дальше? Ниже вы можете найти несколько полезных ресурсов, которые помогут вам продолжить знакомство с SVG и SVGator:

  • Учебники по SVGator
    Серия коротких видеоуроков, которые помогут вам начать работу с SVGator.
  • Справочный центр SVGator
    Ответы на самые распространенные вопросы о SVGator, его функциях и планах членства.
  • Раскройте всю мощь анимации пути с помощью SVGator
    Подробное введение в анимацию пути и способы ее создания с помощью SVGator.
Сокрушительная редакция
(вф, иль)




Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Как создавать, редактировать и анимировать SVG в одном месте с помощью SVGator 3.0

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Краткое описание по статье Как создавать, редактировать и анимировать SVG в одном месте с помощью SVGator 3.0

Название: Как создавать, редактировать и анимировать SVG в одном месте с помощью SVGator 3.0 . Краткое описание: ⭐ Миколай До . Дата публикации: 16.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

Кнопка «Наверх»