Обзор SVGator: Экспертная анимация векторной графики

Мир анимации онлайн-контента сильно изменился за последние годы. Flash (и подобные технологии, такие как Macromind Director) стали основой современного интернета, но после прекращения поддержки Flash формат SWF канул в лету. Переносимся в наше время, когда на сцену выходит SVGator. С SVG, современным векторным форматом, SVGator предоставляет один из лучших и простейших способов анимации этого формата. Давайте подробнее рассмотрим его в нашем обзоре.

Это спонсированная статья и была возможна благодаря SVGator. Самое содержание и мнения соблюдают независимость автора, даже когда пост спонсирован.

Онлайн-анимация возможностей

SVGator — это онлайн-редактор анимации SVG, созданный с использованием VueJS и предназначенный для упрощения процесса анимации масштабируемой векторной графики (или SVG). Заявленная цель компании, базирующейся в Сан-Франциско, — «сделать анимации SVG доступными даже для нетехнических пользователей, тем самым способствуя широкому использованию анимаций SVG в интернете».

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

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

Ностальгический векторный двигатель

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

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

Вы можете импортировать свои собственные SVG-файлы (созданные с помощью любой векторной программы, такой как Illustrator или Inkscape) или нарисовать собственные формы с нуля.

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

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

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

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

По мере продвижения по уровням планов платежей, вы получаете больше действий для выполнения с вашими формами. Они называют эти действия “аниматорами”. На бесплатном уровне вы можете позиционировать, масштабировать, закреплять и поворачивать ваши формы и изменять их непрозрачность. Это базовая анимация. На уровне Lite вы также можете искажать, наклонять, заполнять и обводить, и все эти настройки подлежат анимации. Это добавляет больше гибкости вашим анимациям. Наконец, на уровне Pro вы можете делать все, что было упомянуто, и добавлять интерактивные функции к вашим анимациям, что делает возможным выполнение операций мыши в ваших анимациях для построения интерфейсов или динамической визуализации данных и подобного.

Также на уровне Pro у вас есть доступ к библиотеке активов с графическими активами, которые помогут вам сделать ваши собственные анимации с стилем и быстротой.

Единственный недостаток, который я вижу в данном программном обеспечении, заключается в том, что бесплатные и низкие уровни ограничены в видах операций, которые вы можете выполнять, но это не обязательно является проблемой по двум причинам. Во-первых, вы можете сделать ОЧЕНЬ много с базовыми операциями и немного креативности, и, во-вторых, уровни на самом деле не такие уж дорогие, если учесть, что вы получаете.

Уровни доступа

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

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

Далее идет так называемый уровень Lite, который за 11 долларов в месяц (132 доллара, начисляемые раз в год) позволяет вам экспортировать продукт продвинутых аниматоров, неограниченные статические экспорты, 10 анимационных экспортов в месяц и длительность анимации до одной минуты. У вас также есть базовые и продвинутые помощники анимации. Наконец, есть Pro, который за 19 долларов в месяц (или 228 долларов в год) предоставляет вам все возможности, все в бесплатной и LITE версиях, а также неограниченные анимационные экспорты длительностью до пяти минут, доступ к библиотеке активов, все интерактивные опции и управление скоростью анимации и гиперссылками.

Для получения полной информации о SVGator и регистрации бесплатного аккаунта перейдите на сайт SVGator.