Анимация файлов SVG с новым инструментом SVGator

Как использовать SVGator для анимации файлов SVG

Приветствуем вас! Масштабируемая векторная графика SVG фантастична и является лучшим форматом изображений в 2018 году. Файлы SVG полностью масштабируемые, легкие, и самое интересное, что вы их можете анимировать (в отличие от обычной картинки).

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

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

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

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

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

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

Плюсы использования SVG файлов

На первый взгляд, SVGs выглядит так же, как и любой другой тип изображений. Однако, этот конкретный тип файла уникален по нескольким причинам. Поговорим о самых важных:

• Они очень масштабируемые. Векторные файлы сохраняет свои качества независимо от того, какое разрешение вы используете. Это делает SVGs одним из самых удобных типов файлов для мобильных устройств.
• Они легкие. Поскольку вы имеете дело с векторами вместо пикселей, SVG-файлы, как правило, более легкие, что приводит к сокращению времени загрузки.
• Можно анимировать векторы. С Свгс, вы можете использовать CSS и JavaScript, чтобы оживить свои векторы. Конечно можно достичь подобных эффектов, используя, например, GIF, но они, как правило, невероятно тяжелые.

Несмотря на их многочисленные плюсы, SVG не всегда можно использовать. Если вы хотите отобразить сложную графику, например, фотографии, лучше использовать традиционные форматы файлов, такие как PNG или JPEG. Однако, когда дело доходит до логотипов, иконок и другой простой графики, то использование SVGs как раз кстати.

Начало работы с SVGator

SVGator — это очень простой инструмент. Он позволяет импортировать SVG-файлы и анимировать их с помощью ключевых кадров из коллекции предопределенных эффектов.

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

Ключевая характеристика

• Можно создавать SVG анимации, устанавливая ключевые кадры или просто применяя анимации пресетов
• Не требует навыков кодирования
• Само-закодированный видимый и автоматически редактируемый сгенерированный SVG код
• Преобразование, положение, поворот, масштаб и непрозрачность файлов
• Сервис с удобным и простым интерфейсом

Цена: бесплатно 7-дневный пробный план, далее начиная с $18 в месяц.

Начать работу с SVGator очень просто. Просто нажмите на кнопку «Анимировать сейчас», расположенную на главной странице.

Далее вам необходимо в самом низу страницы нажать на кнопочку «Создать учетную запись».

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

Как только ваша учетная запись будет создана, платформа перенаправит вас в панель мониторинга, где происходит все волшебство.

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

Чтобы проверить этот тест анимации, нажмите на плей в нижней левой стороне экрана.

Вы можете импортировать файлы SVG, нажав на кнопку «импорт SVG» в верхней части экрана.

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

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

По умолчанию SVGator показывает только три секунды на своей временной шкале, но вы можете изменить это, нажав на значок шестеренки рядом с таймером в левой части экрана.

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

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

Как только вы выделите элемент, нажмите на вкладку «Animators» и нажмите на эффект, который вы хотите добавить.

Например, если мы выбираем эффект непрозрачность для всего СВГ, то сможем сделать его исчезающим по мере продвижения анимации. К примеру, мы установим непрозрачность 10%.

Мы установили начальный ключевой кадр на двухсекундную отметку. Однако SVG будет начинаться с 10% непрозрачности, если мы не закроем цикл, добавив ключевой кадр со 100% непрозрачностью в начале временной шкалы.

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

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

Теперь, когда ваши два кадра готовы, нажимаем кнопку «Воспроизвести», чтобы увидеть свой секундомер в действии.

Как только вы удовлетворены вашей анимацией, вы можете экспортировать ваши файлы.

Помимо этих инструментов, SVGator имеет панель code manager, так что вы можете видеть, какой код генерируется приложением.

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

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

С уважением Вячеслав и Валерия!