Как создать анимацию SVG с помощью CSS

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

Прежде чем мы углубимся в руководство, вы должны быть знакомы с переходами и преобразованиями CSS. (Если нет, ознакомьтесь с этой статьей!) Некоторые из тех же концепций будут использоваться с SVG.

Основы SVG

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

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

Поддержка браузерами графики SVG довольно универсальна; IE8 может вызвать некоторые проблемы, но современные браузеры прекрасно справляются с SVG. Здесь или там могут быть небольшие ошибки, но обычно все проходит гладко.

Как создать SVG-графику

Adobe Illustrator — моя любимая программа при создании SVG. На самом деле их можно создать с нуля, так как это все XML, но, вероятно, проще использовать программу проектирования, особенно для более сложных SVG.

Советы по дизайну в Adobe Illustrator

Как и в любом другом проекте Adobe Illustrator, ограничивающая рамка — это место, где создается иллюстрация, поэтому важно убедиться, что все включено. Лучший способ сделать это — выбрать рисунок, который вы хотите использовать в SVG, а затем перейти в «Объект» > «Монтажные области» > «Подогнать к границам рисунка».

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

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

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

В этом файле вы увидите, что внешняя часть колеса называется «внешнее колесо», а внутренняя часть имеет имя «внутреннее колесо». Это просто, но это работает.

Это необязательно, но полезно запустить его через оптимизатор CSS. Есть хороший шанс, что вы можете уменьшить размер файла, сделав это. Одним из отличных вариантов является SVG Optimizer Питера Коллингриджа. SVG OMG также стоит рассмотреть.

Экспорт графики SVG в Adobe Illustrator

Теперь, когда у вас есть окончательное изображение SVG, его необходимо экспортировать, чтобы его можно было использовать в Интернете. Выберите Файл > Сохранить как > SVG. Вы также можете выбрать «Файл», «Экспорт», «.SVG» в зависимости от используемой версии Illustrator. Это будет сохранено как flyweel_wheel.

Как только вы это сделаете, появится диалоговое окно с несколькими параметрами (если вы не видите все из следующего, перейдите в «Дополнительные параметры»):

Профиль: SVG 1.1

Тип: определяет, как вы хотите обрабатывать любые шрифты в своем дизайне, и встраивает шрифты в виде SVG. У нас их нет, поэтому мы оставим этот набор как SVG.

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

Местоположение изображения: управляет информацией, которая может храниться для данных растрового изображения внутри файла SVG в виде URI данных с опцией «Встроенный». (В данном случае это не очень актуально, но это позволяет использовать ссылку или встроенные изображения, что увеличит размер файла.)

Свойства CSS: атрибуты представления позволяют при необходимости размещать стили CSS прямо в SVG. В зависимости от вашего варианта использования это может быть или не быть оптимальным. Атрибуты представления определяют такие вещи, как fill: blue; а не то, что традиционно наблюдается со встроенными стилями: . Атрибуты представления обычно легче переопределить в CSS.

Дополнительные параметры. Эта группа флажков позволяет изменять различные параметры, в том числе количество знаков после запятой в различных числах. Здесь должно быть достаточно одного. Расширенные параметры в основном необходимы, если в вашем файле много текста. Возможность вывода меньшего количества элементов <tspan> может значительно уменьшить размер экспортируемого SVG.

В некоторых случаях текст может быть отрисован по заданному пути. С опцией «Использовать элемент <textPath> для текста на пути» он экспортируется как текст на пути. Параметр «Отзывчивый» также важен. Если этот флажок не установлен, ширина и высота файла SVG будут жестко закодированы.

Как анимировать SVG с помощью CSS

Теперь, когда у нас есть настоящий SVG для работы, мы можем создать простую анимацию, чтобы увидеть, как все это работает. Свойство преобразования CSS и метод перевода помогут колесу двигаться. Анимация с помощью CSS — это здорово, потому что нет необходимости устанавливать какие-либо плагины или библиотеки; все, что вам нужно, это HTML и CSS, чтобы начать.

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

Базовая анимация

Ниже приведена простая анимация, которая заставляет колесо увеличиваться при наведении:

svg {
   height: 20%;
   width: 20%;
   fill: #50c6db;
}

svg:hover {
   transform: scale(1.25);
   transition-duration: 1.5s;
}

Анимация вращающегося колеса

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

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

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

Основы преобразования происхождения

Свойство transform-origin используется для изменения положения начала преобразования элемента. Начало преобразования HTML-элемента находится в точке (50%, 50%), которая является центром элемента.

Исходная точка преобразования элемента SVG расположена в точке (0, 0), которая является левым верхним углом холста.

Как элемент SVG вращается вокруг своего центра? Необходима корректировка свойства transform-origin. Это может быть установлено с использованием либо процентного значения, либо абсолютного значения (пиксели, ems или rems). Это значение будет установлено относительно ограничивающей рамки элемента.

Если бы мы установили начало преобразования <rect> в центр, используя процентные значения, это было бы сделано следующим образом:

rect {
  transform-origin: 50% 50%;
}

Изготовление колеса

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

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

@keyframes fadeIn {
    0% {
        opacity: .35;
    }

    50% {
        opacity: .5;
    }

    75% {
        opacity: .75;
    }

    100% {
        opacity: .25;
    }
}

Далее важно создать оболочку SVG.

.svg-container {
  height:100%;
  width:100%;
  max-height:15cm;
  max-width:15cm;
  margin: 0 auto;
}

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

svg {
  top: 50%;
  left: 50%;
  position: absolute;
  max-height:15cm;
  max-width:15cm;
  width: 20%;
  height: 20%;
  fill: #50c6db;
  transform: translate(50%, 50%);
}

Именование слоев становится очень полезным. Анимация вращения применяется ко всей SVG-графике, поскольку она была указана в #outer-wheel , но внутреннее колесо имеет эффект затухания, предназначенный только для этой внутренней части графики. При нацеливании только на #inner-wheel была применена анимация затухания.

#outer-wheel {
  animation: spin 4s infinite linear;
}

#inner-wheel {
  animation: fadeIn 2s infinite linear;
}

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

Что дальше: Дизайн
сайты быстрее!

В этом руководстве мы дадим советы о том, как работать быстрее и ускорить рабочий процесс WordPress. От первоначальной настройки сайта до его запуска — узнайте, как вы можете сократить время своей повседневной работы!

Бесплатно скачать здесь.

Эта статья была первоначально опубликована 01.06.2017. Последнее обновление было 16.02.2019.