Руководство по SVG-анимации

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

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

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

Масштабируемая векторная графика

SVG — это формат изображения, основанный на XML, очень похожий на то, как работает HTML. Он определяет различные элементы для ряда знакомых геометрических фигур, которые можно комбинировать в разметке для создания двухмерной графики.

Спецификация SVG — это открытый стандарт, разработанный Консорциумом World Wide Web (W3C) в 1999 году.

Все основные веб-браузеры уже некоторое время поддерживают рендеринг SVG.

Поскольку графика SVG представляет собой документ XML, веб-браузеры предоставляют API-интерфейсы на основе узлов DOM, которые можно использовать для взаимодействия с изображениями. Расскажите о том, как оживить фотографии!

SVG-пути

Если в SVG есть один перегруженный элемент, это будет элемент <path> .

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

Элемент работает, выполняя последовательность команд рисования. Он очень похож на язык программирования Logo из 1967 года, только модернизированный и предназначенный для причудливой графики. Элемент принимает эту последовательность команд рисования через атрибут d .

 <!-- A right-angled triangle --> <path d="M10 10 L75 10 L75 75 Z" />

Вы можете представить себе виртуальное перо, которое рисует на экране, а комментарии к рисованию в элементе пути просто управляют пером. В приведенном выше примере перу дается указание переместиться в положение (10, 10) ( M10 10 ), провести линию в (75, 10) ( L75 10 ), провести линию в (75, 75) L75 75 , а затем закрыть путь, вернувшись в начальную точку ( Z ).

Используя другие команды рисования, такие как дуги ( A ), квадратичные кривые Безье ( Q ), кубические кривые Безье ( C ) и т. д., вы можете создавать гораздо более сложные формы и графику в SVG.

Вы можете узнать больше об элементе path здесь.

Пути SVG и CSS

— Хорошо, Хуан, я понял. Пути сильны, но как мне их оживить?» ты говоришь.

Для нашей первой техники мы воспользуемся двумя атрибутами SVG: stroke-dasharray и stroke-dashoffset .

Атрибут stroke-dasharray управляет шаблоном штрихов и пробелов, используемых для обводки контура. Если вы хотите рисовать линии в виде группы тире и пробелов вместо одного непрерывного мазка чернил, вы должны использовать этот атрибут.

Поскольку SVG-изображения являются частью DOM веб-браузера, а stroke-dasharray — элементом презентации, этот атрибут также можно установить с помощью CSS.

Точно так же с помощью CSS можно управлять атрибутом stroke-dashoffset (указывающим, как далеко в шаблон штриха должен начинаться штрих).

Вместе эти два атрибута SVG можно использовать для анимации путей SVG, создавая у зрителя иллюзию постепенного рисования путей.

Возьмите эту квадратичную кривую Безье, например:

 <path fill="transparent" stroke="#000000" stroke-width="5" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>

Чтобы анимировать этот путь так, как если бы он рисовался на экране постепенно и плавно, нам нужно будет установить длину тире (и промежутка) с помощью атрибута stroke-dasharray, равную длине пути. Это делается для того, чтобы длина каждого штриха и пробела на пунктирной кривой равнялась длине всего пути.

Затем мы установим смещение тире, используя атрибут stroke-dashoffset, равным 0. Это заставит путь отображаться на экране в виде сплошной кривой (по сути, мы смотрим на первый тире, и мы уже сделали так, чтобы каждый тире охватывал весь длина кривой). Установив смещение штриха равным длине кривой, мы получим невидимую кривую (теперь мы смотрим на кривую, визуализируемую как весь пробел — часть, которая сразу следует за штрихом).

Теперь, анимировав свойство stroke-dashoffset, вы можете сделать так, чтобы кривая появлялась на экране постепенно.

См. Пути Pen Toptal — SVG и CSS от блога Toptal (@toptalblog) на CodePen.

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

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

См. Пути Pen Toptal — SVG и CSS от блога Toptal (@toptalblog) на CodePen.

Здесь у вас есть одна фиксированная черная кривая, красная, которая движется по пути, и еще одна черная, следующая за красной, но на 40 пикселей позади.

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

Анимация объектов вдоль путей SVG

Еще одна интересная вещь, которую вы можете сделать с помощью SVG и CSS, — это анимировать объекты или элементы, следующие по пути.

Есть 2 атрибута SVG, которые мы собираемся использовать для анимации:

• offset-path: Свойство CSS offset-path указывает путь смещения, по которому позиционируется элемент.

• offset-distance: CSS-свойство offset-distance указывает положение вдоль пути смещения.

Объединив эти два свойства, вы можете легко создать такую ​​анимацию:

См. Пути Pen Toptal — SVG и CSS от блога Toptal (@toptalblog) на CodePen.

Как видите, у нас появился новый элемент div.ball .

Этот элемент может быть чем угодно, div, изображением, текстом, чем угодно. Идея в этом примере заключается в том, что с помощью offset-path и offset-distance вы можете указать элементу путь, по которому нужно следовать, и анимировать расстояние, и элемент будет двигаться по пути.

SVG-анимация с использованием JavaScript

Если все это уже недостаточно красиво, вы всегда можете прибегнуть к JavaScript.

Анимация элементов SVG с помощью JavaScript может быть очень похожа на анимацию элементов DOM. Тем не менее, с помощью JavaScript вы можете использовать методы анимации, которые мы рассмотрели выше, но гораздо проще.

Раньше нам приходилось жестко задавать длину пути в нашем CSS. С помощью функции JavaScript path.getTotalLength() можно вычислить длину пути на лету и использовать ее по мере необходимости. Вы можете узнать больше об этом здесь.

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

Snap.svg не только упрощает рисование изображений SVG с помощью JavaScript, но и делает их анимацию такой же простой, как вызов .animate({}) .

Другая библиотека, anime.js, позволяет сделать так, чтобы элемент div следовал пути SVG всего несколькими строками кода.

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

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

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

Чтобы более подробно изучить SVG-анимацию, вы можете прочитать эту короткую статью о трех способах анимации SVG-изображений и посмотреть видео-скринкаст от CSS Tricks.

В этой статье не рассматривается анимация изображений SVG с помощью Synchronized Multimedia Integration Language (SMIL). Хотя использование CSV для SVG дает вам преимущество работы с чем-то, с чем вы уже знакомы, SMIL выводит вещи на новый уровень.

С помощью SMIL вы можете реализовать расширенные эффекты анимации, такие как преобразование формы, используя только SVG. Краткое, но эффективное руководство по использованию SMIL для таких эффектов доступно здесь.

Хотя поддержка SMIL на данный момент немного раздражает (не каламбур).

Бескомпромиссная анимация для Интернета

В этой статье вы рассмотрели несколько способов анимации элементов SVG с помощью элементов CSS или HTML в путях SVG.

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

Вот и все! Надеюсь, вы нашли этот учебник по SVG-анимации полезным и получили удовольствие от его чтения.

Дальнейшее чтение в блоге Toptal Engineering:

• Как использовать анимацию SVG в CSS