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

Velocity

SVG.JS

Walkway

Raphael.JS

Snap.Svg

Bonsai

Lazy Line Painter

Vivus

В предыдущих уроках серии мы разбирались использованием векторной графики SVG в HTML. Теперь пришел черед рассмотреть анимацию SVG .

Основы

Анимация SVG выполняется с помощью элемента :

Мы добавляем элемент внутрь элемента

attributeName : здесь определяется атрибут, который будет участвовать в анимации.

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

to : данный атрибут определяет направление анимации. В зависимости от заданного в атрибуте attributeName значения результат может различаться. В приведенном примере будет изменяться высота элемента.

dur : определяется длительность анимации. Значение нужно задавать в формате Clock Value Syntax . Например, 02:33 соответствует 2 минутам и 33 секундам, а 3h соответствует 3 часам. Для нашего примера мы определяем длительность анимации в 3 секунды.

То же самое мы проделываем с элементом , но для него будет анимировать атрибут радиуса (r).

Перемещение элементов

Для перемещения SVG элементов нужно только указать координаты x и y:

В примере мы перемещаем прямоугольник с 0 до 200 за 3 секунды. Также мы добавляем атрибут fill к элементу . Данный атрибут определяет как анимация будет действовать после завершения. В примере значение freeze вынуждает элемент оставаться там, где завершается анимация.

Также все действует и для элемента , но для него будем изменять атрибуты cx или cy:

Анимация нескольких атрибутов

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

Здесь мы анимируем для атрибута для элемента - радиус и ширину обводки.

В современном веб-дизайне нельзя не заметить популярность анимации средствами CSS и SVG. Действительно, анимация элементов сайта сегодня переживает второе рождение. многие применяемые эффекты стали полезнее для пользователя и выглядят правильней с точки зрения юзабилити веб-ресурса и UX. Технологии упростили сложные задачи анимирования графики и элементов не жертвуя производительностью сайтов (как это было с Flash). К тому же не требует усложнять что-либо и даже легкой анимацией страниц можно достичь впечатляющих результатов, сделать сайт эффектнее.

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

В подборке красивых и современных SVG/CSS анимаций кратко описаны основные моменты реализации. Для наглядного примера и вдохновения: сайты использующие эти эффекты.

01. Всплывающие пузырьки

Пример применения на сайте: 7UP
Полный код на CodePen

CSS анимация пузырьков на сайте 7UP – это великолепный . Процесс анимации состоит из нескольких частей: SVG отрисовка, затем анимирование каждого пузырька в два этапа.

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

... ...

Метод такого раздельного анимирования на SVG потребует поэлементной анимации. Элемент в SVG может быть использован подобно DIV в HTML; нам нужно обернуть каждый пузырек в группирующий тег.

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

Для создания колебания нужно просто добавить движение влево и вправо – достаточное для заметности эффекта, но не более того.

Анимирование пузырьков потребует использовать применяемые ранее группы и nth-of-type для идентификации отдельных групп. Ради аппаратного ускорения, мы задействуем значение прозрачности и свойство will-change .

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

02. Значок скроллинга

Пример применения на сайте: Baltic Training
Код на CodePen

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

К созданной SVG-иконке применяются стили, чтобы задать размер и место в контейнере. Привязываем ссылку и помещаем значок вниз экрана.

Начинаем анимирование иконки. Задаем начало движению: от 0 и до 20 процентов. Для своего промежутка 20% применяется бесконечным повторением.

Добавляем прозрачность по Y-вертикали, используя 100% в конечной точке анимированного движения для исчезновения кружка.

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

03. Постепенно появляющаяся надпись

Анимированной предзагрузкой Toy Fight демонстрирует свое , применяя эффект постепенно появляющихся рукописных букв. Рассматриваем реализацию эффекта средствами SVG. Есть два варианта: анимирование надписи и использование SVG-текста. У каждого метода свои плюсы-минусы.

Создание keyframe-анимации происходит с использованием stroke-dashoffset , stroke-dasharray . Получаем эффект написания «от руки». Тут мы обращаемся к Sass/SCSS и nth-of-type .

Masking { transform: scale(0); transform-origin: 50% 50%; will-change: transform; }

И снова SVG язык применяется для создания форм, паттернов и масок. Как только это сделано, мы используем CSS и подготавливаем все для анимации.

@keyframes scale { 0%, 50% { opacity: 1; } 80% { opacity: 0; } 100% { transform: scale(1.4); opacity: 0; } } Lastly we need to apply the animation to the mask; .masking { ... animation: scale 4s linear infinite; }

05. Летящие птицы

Пример применения на сайте: Père et Fils
Варианты с одиночной птицей и стаей птиц

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

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

Мы используем наш SVG как фон div’а птицы и выбираем размеры форм. Ширину используем для приблизительного вычисления позиционирования в бэкграунде. Увеличиваем ширину десятикратно, затем подгоняем цифру под размер.

Bird { background-image: url("bird.svg"); background-size: auto 100%; width: 88px; height: 125px; will-change: background-position; } @keyframes fly-cycle { 100% { background-position: -900px 0; } }

Для анимирования – пара трюков на CSS, возможно не знакомых вам. Используется animation-timing-function для пошагового отображения – вроде того, как в блокноте пролистывают страницы с картинкой для ее «оживления».

Animation-name: fly-cycle; animation-timing-function: steps(10); animation-iteration-count: infinite; animation-duration: 1s; animation-delay: -0.5s;

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

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

Благодаря характерным особенностям анимирования, код для SVG изменился не намного – техники те же самые. Для начала нужно задействовать четыре элемента: spans в случае с div, либо paths в случае применения SVG. При использовании spans, позиционирование внутри div решается средствами CSS (в SVG этот вопрос уже решен).

Располагаем линии 2 и 3 в центре – одну поверх другой, а линии 1 и 4 – сверху и снизу. Тут применяются два свойства: opacity и rotation. Прежде всего, нам нужно чтобы исчезали линии 1 и 4 – для этого воспользуемся селектором:nth-child .

Menu-icon.is-active {element-type}:nth-child(1), .menu-icon.is-active {element-type}:nth-child(4) { opacity: 0; }

Осталось повернуть линии друг к другу на 45 градусов.

Menu-icon.is-active {element-type}:nth-child(2) { transform: rotate(45deg); } .menu-icon.is-active {element-type}:nth-child(3) { transform: rotate(-45deg); }

07. Прелоадер загрузки

Иконка предзагрузки состоит из четырех чередующихся по цвету окружностей.

В CSS к окружностям применяются базовые стили, затем используем:nth-of-type селектор для различных значений stroke-dasharray каждого круга. С ‘ease-in-out’ анимация предзагрузки будет выглядеть повеселей.

Circle:nth-of-type(1) { stroke-dasharray: 550; } circle:nth-of-type(2) { stroke-dasharray: 500; } circle:nth-of-type(3) { stroke-dasharray: 450;} circle:nth-of-type(4) { stroke-dasharray: 300; }

Теперь нужна keyframe-анимация. Она проста: требуется лишь поворачивать окружность на 360 градусов. Применяем анимацию на 50% и возвращаем окружность на исходную позицию.

@keyframes preloader { 50% { transform: rotate(360deg); } }

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

Animation-name: preloader; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out;

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

@for $i from 1 through 4 { &:nth-of-type(#{$i}) { animation-delay: #{$i * 0.15}s; } }

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

Animation-delay: -#{$i * 0.15}s;

Внутри этих элементов помещаются атрибуты, определяющие тип анимации. В табл. 11.2 приводится их описание.

Для создания анимации следует определить, свойства объекта, которые будут изменяться, их результирующий вид, а также начало и продолжительность всех изменений. Описание представляет собой последовательную запись пар " атрибут – значение атрибута". Для создания заданной анимации, например, перемещения объекта, следует указать необходимый набор, без которого анимация просто не будет воспроизводиться. Однако кроме необходимого набора можно указывать дополнительные пары атрибутов, описывающих анимацию детальным образом или придавая ей ряд новых свойств. В табл. 11.3 приводится описание атрибутов анимации. Это общие атрибуты для всех элементов анимации.

Элемент animate

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

Внутри тега rect элемента прямоугольник помещен элемент animate . В течении анимации будет изменяться координата по горизонтали прямоугольника – на это указывает атрибут attributeName="x" . Границы изменения (в пикселях) устанавливаются от нуля (from="0" ) до двухсот (to="200" ). По умолчанию, анимация начнется сразу после загрузки в браузер , и будет продолжаться в течении 10 секунд (dur="10s" ). По истечении заданного времени прямоугольник вернется в точку 0 и анимация начнется снова, поскольку задано бесконечное повторение (repeatCount=" indefinite " ). В табл. 11.4 приводятся примеры с использованием элемента animate.

№	Код	Вид в браузере
11.4.1	Листинг 11.4.1. Пример animate1.svg
	Описание
	Изменение абсциссы прямоугольника
№	Код	Вид в браузере
11.4.2	Листинг 11.4.2. Пример animate2.svg
	Описание
	Изменение ординаты прямоугольника.
№	Код	Вид в браузере
11.4.3	Листинг 11.4.3. Пример animate3.svg
	Описание
	Одновременное увеличение абсциссы и ординаты, в результате чего прямоугольник будет двигаться по диагонали.
№	Код	Вид в браузере
11.4.4	Листинг 11.4.4. Пример animate4.svg
	Описание
	Одновременное увеличение ширины и высоты прямоугольника.

В рассмотренных примерах мы видели изменение простейших свойств объекта – его координат, ширины и высоты.

Мы давно обещали сделать ролик про анимацию SVG элементов на страницах, но все как-то не удавалось. Сегодня мы наконец-то рады вам представить первый ролик из серии, в котором расскажем про варианты анимации SVG: с помощью CSS, SMIL и JavaScript (на примере Snap.svg).

На самом деле у нас с этим роликом было как с Мистралями. Не сложились обстоятельства для записи. Ну вот теперь наконец-то сложились.

SVG анимации

Попробуем еще разок собрать все вместе со ссылками. Существуют три способа анимации SVG элементов на странице, два из которых применимы и для HTML элементов. Я, конечно же, говорю про CSS и JavaScript анимации. Но для SVG можно еще использовать SMIL (Synchronized Multimedia Integration Language) анимации.

SMIL анимации

Это очень крутая технология если нам нужно анимировать path-ы и при этом хранить это все в одном SVG файле. Да, CSS анимации тоже можно включать в файл, но с их помощью нельзя анимировать атрибут d у path-ов, поэтому SMIL оказывается намного более интересной технологией. Собственно JavaScript тоже можно включать прямо в SVG файлы, но поддержка браузеров немного разная, поэтому нужно обязательно думать что и как использовать.

SMIL поддерживается во всех браузерах с незапамятных времен (с ранних версий), кроме Internet Explorer, который не поддерживает эти анимации до сих пор.

CSS анимации

Здесь все предельно ясно, мы уже давно привыкли использовать CSS для небольших анимаций HTML элементов. Тоже самое можно делать и с SVG: большинство атрибутов можно анимировать и поддержка браузеров значительно лучше . Ну потому что хотя бы Internet Exporer 10 узнал про такое явление, как CSS анимации.

JavaScript анимации

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

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