Раскройте всю мощь анимации пути с помощью SVGator

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

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

Примечание . Аниматор пути — это дополнительная функция SVGator, которая недоступна для пробных пользователей. Во время семидневной пробной версии вы можете увидеть, как работает Path Animator, в примере проекта, который вы найдете в приложении, но вы не сможете применить его к своим собственным SVG, если не выбрали платную версию. строить планы. SVGator — это сервис на основе подписки. В настоящее время вы можете выбирать между месячным планом (18 долларов США в месяц) и годовым планом (всего 144 доллара США, 12 долларов США в месяц). Для более длительных проектов мы рекомендуем рассмотреть годовой вариант.

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

Очарование анимации пути

Анимация пути SVG ни в коем случае не является чем-то новым. В последние несколько лет этот способ обогащения векторной графики активно использовался во всей сети:

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

Как работает анимация пути?

Вы можете подумать, что анимация пути SVG требует чрезвычайно сложных функций рисования и преобразования. Но это намного проще, чем кажется. Для достижения эффектов, подобных приведенному выше примеру, вам не нужно генерировать, рисовать или анимировать фактические пути — вы просто анимируете их штрихи. Эта блестящая концепция позволяет создавать, казалось бы, сложные анимации, анимируя один атрибут SVG: stroke-dashoffset .

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

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

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

Кроме того, иногда вы можете предпочесть не трогать необработанные файлы SVG. Или, может быть, вы вообще не любите писать код. Тогда SVGator поможет вам. С новым Path Animator вы можете создавать даже самые сложные SVG-анимации пути, не затрагивая ни строчки кода. Вы также можете комбинировать кодирование с использованием SVGator.

Чтобы лучше понять возможности, которые дает нам Path Animator, мы рассмотрим три отдельных примера, представляющих различные варианты использования анимации пути.

Пример №1: Анимированный текст

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

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

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

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

Подготовка файла

Вместо того, чтобы начинать с существующего шрифта, мы начнем с простого наброска, нарисованного от руки:

Теперь пришло время перерисовать эскиз в инструменте дизайна. Я использовал Figma, но вы можете использовать любое приложение, поддерживающее экспорт SVG, например Sketch, Adobe XD или Adobe Illustrator.

Обычно я начинаю с инструмента «Перо» и примерно следую эскизу, импортированному как слой под ним:

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

В этом примере у нас есть четыре таких пути. Первая — буква «Н»; вторая — три средние буквы «элл»; а «о» — третье. Четвертый путь — это строка восклицательного знака.

Точка «!» является исключением — это единственный слой, который мы будем стилизовать с помощью заливки, а не обводки. Он будет анимирован иначе, чем другие слои, без использования Path Animator.

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

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

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

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

Создание анимации

Как только вы будете довольны структурой и названием ваших слоев, импортируйте их в SVGator. Затем добавьте первый путь на временную шкалу и примените к нему Path Animator, выбрав его из списка Animators или нажав Shift + T.

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

SVGator делает это очень удобным для нас, автоматически предоставляя длину пути. Все, что нам нужно сделать, это скопировать его одним щелчком мыши и вставить в два параметра, которые требует SVGator: Dashes и Offset . Вставка значения в Dashes превращает обводку в пунктирную линию. Вы не можете увидеть это сразу, так как первая черточка линии покрывает весь путь. Установка смещения изменит смещение stroke-dashoffset , чтобы зазор затем перекрыл путь.

После этого давайте создадим анимацию, добавив новый ключевой кадр дальше по временной шкале. Верните Offset обратно к нулю и… та-да! Вы только что создали анимацию саморисующейся буквы.

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

Давайте изменим значение Dashes, чтобы путь начинался с пробела, за которым следовал тире (по умолчанию пунктирные линии всегда начинаются с тире). Затем измените значения анимации смещения. Это анимирует линию в противоположном направлении.

Теперь, когда мы закончили с «H», мы можем перейти к анимации всех остальных путей таким же образом. В конце концов, мы заканчиваем анимацией точки восклицательного знака. Поскольку это круг с заливкой, а не контур, мы не будем использовать Path Animator. Вместо этого мы используем Scale Animator, чтобы сделать точку всплывающей в конце анимации.

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

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

В данном случае мы хотим создать впечатление, что текст пишется одним непрерывным движением руки. Поэтому я применил функцию Ease-in к первой букве и функцию Ease-out к последней букве, оставив для средних букв линейную функцию по умолчанию. В SVGator функции синхронизации можно применять на временной шкале рядом с параметрами Animator:

После применения той же логики к восклицательному знаку наша анимация готова и готова к экспорту!

Пример №2: Анимированная иконка

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

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

Подготовка файла

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

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

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

Создание анимации

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

Затем установите длину следующего промежутка на значение, превышающее оставшуюся длину пути, чтобы он стал прозрачным.

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

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

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

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

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

После этого не забудьте настроить функции синхронизации. Здесь я решил использовать эффект Ease-in-out для всех элементов. Наша иконка готова к действию.

Реализация

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

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

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

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

Когда мы будем готовы, мы можем экспортировать значок в SVG и открыть его в текстовом редакторе.

Элементы, которые вы видите в теле документа, являются компонентами вашей графики. Вы также должны заметить, что первая строка кода исключительно длинная. Сразу после открывающего <svg> есть элемент <style> с большим количеством уменьшенного CSS внутри. Вот где вся анимация происходит.

 <svg viewBox="0 0 600 450" fill="none" xmlns="https://www.w3.org/2000/svg"><style>@-webkit-keyframes kf_el_VqluQuq4la_an_DAlSHvvzUV… </style> <!-- a very long line of code that contains all the animations --> <g> <g data-animator-group="true" data-animator-type="0"><g> <g data-animator-group="true" data-animator-type="1"><path d="M244 263H356" stroke-linecap="round"/></g> <g data-animator-group="true" data-animator-type="1"><path d="M244 187H356" stroke-linecap="round"/></g> </g></g> <path d="M244 225H355.5C369 225 387.5 216.4 387.5 192C387.5 161.5 352 137 300 137C251.399 137 212 176.399 212 225C212 273.601 251.399 313 300 313C348.601 313 388 273.601 388 225C388 176.399 349.601 137 301 137" stroke-linecap="round"/> </g> </svg>

Очень приятно, что SVGator минимизирует код для нас. Однако нам придется его отменить. Как только код CSS будет написан полностью (вы можете сделать это в инструментах разработки вашего браузера или в одном из многих форматировщиков кода в Интернете), вы увидите, что это длинный список @keyframes , за которым следует список правил id с использованием @keyframes в свойствах animation .

Код может выглядеть нечитаемым (даже если он хорошо отформатирован), но, скорее, он очень повторяющийся. Как только вы поймете основное правило, следовать ему уже не так сложно. Во-первых, у нас есть @keyframes . Каждый анимированный элемент имеет собственное @-правило @keyframes . Они сортируются в том же порядке, что и элементы в SVGator. Поэтому в нашем случае первое @-правило относится к средней полосе значка гамбургера, второе — к верхней и так далее. Ключевые кадры внутри также соответствуют порядку ключевых кадров, созданных в SVGator:

 @keyframes kf_el_VqluQuq4la_an_DAlSHvvzUV{ /* middle bar animation */ 0%{ stroke-dasharray: 112, 2000; /* initial state */ } 25%{ stroke-dasharray: 112, 2000; } 50%{ stroke-dasharray: 600, 2000; /* turns into a circle */ } 75%{ stroke-dasharray: 600, 2000; /* back at initial state */ } 100%{ stroke-dasharray: 112, 2000; } }

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

Что будет дальше, это уже другая история. Однако, если вам интересно увидеть пример того, как эта анимация может работать на практике, вот небольшой CodePen для вас:

Пример создан с помощью React и использует состояния для переключения классов CSS и запуска переходов между соответствующими значениями CSS. Поэтому нет необходимости в свойствах animation и @ @keyframes @keyframes.

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

Пример №3: анимированная иллюстрация

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

Пунктирные линии и пунктирные линии

В двух предыдущих примерах мы воспользовались пунктирными путями SVG. Пунктирные линии — это круто, но знаете ли вы, что SVG также поддерживает пунктирные линии? Пунктирная линия в SVG — это не больше и не меньше пунктира с круглыми заглавиями, а длина штрихов равна нулю.

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

Подготовка файла

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

Примечание . На момент написания статьи создание пунктирных линий в Figma было сложной задачей. Вы не только не можете установить длину тире равной нулю, но и не можете создать промежуток между тире, достаточно длинный, чтобы покрыть весь путь. А когда дело доходит до экспорта, все ваши настройки все равно пропадают. Тем не менее, если вы работаете с Figma, не расстраивайтесь. Мы легко исправим все эти проблемы в SVGator. И если вы работаете в Sketch, Illustrator или подобных, у вас вообще не должно возникнуть этих проблем.

Создание анимации

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

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

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

В качестве последнего штриха я добавил немного отскока всей графике.

Теперь анимация готова и ее можно использовать, возможно, как загрузочную графику.

Коротко о доступности

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

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

Заключение

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

Дальнейшее чтение

• «Как работает линейная анимация SVG», Крис Койер . Иллюстрированное руководство по анимации путей SVG, в котором прекрасно объясняется, как они работают на самом деле.
• «Практическое руководство по SVG и инструментам дизайна», Николай Добруцкий Подробное руководство по основам SVG, которое поможет вам понять, как SVG генерируется инструментами дизайна, и как использовать его для собственной выгоды.
• «Пересматривая Prefers-Reduced-Motion, The Reduced Motion Media Query», Эрик Бейли . Отличное введение в тему анимации и специальных возможностей.
• «Как создать анимацию пути», SVGator Короткий и приятный видеоурок на YouTube о Path Animator.

Полезные ресурсы

• SVGator Path Animations Узнайте больше о Path Animator на исходной целевой странице.
• SVGator Tutorials Серия видеоруководств, объясняющих основные функции SVGator.
• Справочный центр SVGator Ответы на наиболее распространенные вопросы о SVGator, его функциях и планах членства.