Создание слоистой анимации на SVG.
Очень хорошо вписываются в современный веб-дизайн своей легкостью и , качественно отображаются на Retina мониторах
.
Один из способов эффективного создания SVG графики и анимации - это использование библиотек
. Они позволяют создавать простую и сложную SVG анимацию
начиная от вращения объектов, изменения их размеров и форм до создания полноценного анимационного сюжета. Объектами векторной анимации
могут выступать текст, изображения, пользовательский интерфейс, логотип и др. Ниже рассмотрены библиотеки, которые позволяют облегчить работу с SVG анимацией.
Подписывайтесь на , группу и следите за обновлениями.
Velocity
Одна из самых популярных библиотек, которая воплощает графику в жизнь. Основной упор Velocity на быстрое воспроизведение анимации . Для тех, кто знаком с анимацией в , библиотека не вызовет никаких трудностей в использовании. Библиотека использует API как в jQuery $.animate () .Особенность библиотеки в том, что она полностью поддерживает анимацию SVG элементов, включая такие свойства, как x, rx, stroke-width и др. Также поддерживается работа с цветом.
SVG.JS
Легкая библиотека для работы с векторной графикой . Поддерживает анимацию с позицией, размером, цветом и трансформацией. SVG.JS также включает возможность привязать события к элементам, создать динамический градиент, задать прозрачность и настроить анимацию текста.
Walkway
Легкая библиотека для рисования линий и полигонов . Walkway поддерживает элементы path, line и polyline . Имея столь узкое направление, она хорошо выполняет свою функцию.
Raphael.JS
Небольшая библиотека для упрощения работы с векторной графикой . Следуя рекомендациям W3C SVG, каждый графический объект становится также DOM-объектом, что позволяет позже изменять его с помощью JavaScript. Очень хорошая поддержка браузеров, включая версии IE6 и выше.
Snap.Svg
Snap.Svg имеет простой JavaScript API для создания анимации и делает содержимое более привлекательным. Библиотеку можно использовать для SVG анимации , созданной при помощи графических программ, таких как Illustrator, Inkscape или Sketch. Snap.svg имеет открытый исходный код и распространяется с лицензией Apache 2.
Bonsai
Bonsai включает в себя полный набор инструментов для работы с графикой и анимацией . Имеет графический API позволяющий легко создать SVG анимацию.Можно посмотреть все функции Bonsai в онлайн редакторе. Очень мощная библиотека с которой интересно работать.
Lazy Line Painter
Маленький плагин для SVG анимации рисования линий . Хорошо и со стилем выполняет свою задачу. Необходимо пройти три этапа для получения готовой анимации: экспортируем линейную анимацию с Illustrator"а как svg файл, вставляем его в конвертер на сайте, получаем готовый JS код.
Vivus
Очень сильная библиотека для рисования линий . Позволяет выбирать стиль анимации линий: с задержкой, асинхронно или одна за другой. Посмотрите пример на сайте библиотеки и вы все поймете. Для более сложных изображений позволяет задать сценарий рисования.
В предыдущих уроках серии мы разбирались использованием векторной графики SVG в HTML. Теперь пришел черед рассмотреть анимацию SVG .
Основы
Анимация SVG выполняется с помощью элемента
Мы добавляем элемент
attributeName : здесь определяется атрибут, который будет участвовать в анимации.
from : опциональный атрибут. Определяет стартовое значение, по умолчанию используется текущее значение.
to : данный атрибут определяет направление анимации. В зависимости от заданного в атрибуте attributeName значения результат может различаться. В приведенном примере будет изменяться высота элемента.
dur : определяется длительность анимации. Значение нужно задавать в формате Clock Value Syntax . Например, 02:33 соответствует 2 минутам и 33 секундам, а 3h соответствует 3 часам. Для нашего примера мы определяем длительность анимации в 3 секунды.
То же самое мы проделываем с элементом
Перемещение элементов
Для перемещения SVG элементов нужно только указать координаты x и y:
В примере мы перемещаем прямоугольник с 0 до 200 за 3 секунды. Также мы добавляем атрибут fill к элементу
Также все действует и для элемента
Анимация нескольких атрибутов
Конечно, в элементе
Здесь мы анимируем для атрибута для элемента
В предыдущих уроках серии мы разбирались использованием векторной графики SVG в HTML. Теперь пришел черед рассмотреть анимацию SVG .
Основы
Анимация SVG выполняется с помощью элемента
Мы добавляем элемент
attributeName : здесь определяется атрибут, который будет участвовать в анимации.
from : опциональный атрибут. Определяет стартовое значение, по умолчанию используется текущее значение.
to : данный атрибут определяет направление анимации. В зависимости от заданного в атрибуте attributeName значения результат может различаться. В приведенном примере будет изменяться высота элемента.
dur : определяется длительность анимации. Значение нужно задавать в формате Clock Value Syntax . Например, 02:33 соответствует 2 минутам и 33 секундам, а 3h соответствует 3 часам. Для нашего примера мы определяем длительность анимации в 3 секунды.
То же самое мы проделываем с элементом
Перемещение элементов
Для перемещения SVG элементов нужно только указать координаты x и y:
В примере мы перемещаем прямоугольник с 0 до 200 за 3 секунды. Также мы добавляем атрибут fill к элементу
Также все действует и для элемента
Анимация нескольких атрибутов
Конечно, в элементе
Здесь мы анимируем для атрибута для элемента
SVG графику можно анимировать, УРА, с помощью известного и горячо любимого CSS. Плюс к этому есть возможности самого svg описанные в спецификации SMIL Animation . Не забываем что возможности анимации зависят от способа, которым встроен svg на страницу. Наиболее полная поддержка идёт если встраиваете код непосредственно в html страницу или используя тег
- <object type = "image/svg+xml" data = "image.svg" >
- Your browser does not support SVGs
- </ object >
Трансформация SVG с помощью CSS
С помощью CSS можно менять цвет, размер, поворачивать, управлять временем анимации. Делать всё то, что делаем с элементами HTML страницы. Стили пишем в svg файл внутри тега
< svg viewBox = "0 0 100 100" >
< g class = "animation-name" > < path d = "" > < / path > < path d = "" > < / path > < path d = "" > < / path > < / g > < / svg > |
Некоторые, но не все браузеры будут проигрывать анимацию, даже если подключить SVG через тег img. Более надежно использовать object.
< object type = "image/svg+xml" data = "path_to/shapes.svg" role = "img" aria - label = "shapes animation" > < div role = "img" class = "shapes-fallback" aria - label = "shapes animation" > < / div > < / object > |
Заметьте, что WAI-ARIA роль со значением img и атрибут aria-label как для объекта (object), так и для элемента DIV используются для семантической точности. Я не стал делать фоллбэк для старых браузеров с помощью img, так как некоторые браузеры загружают этот тег в дополнении к SVG. Но вам, конечно, необходимо добавить статичное фоновое изображение через CSS с помощью свойства background-image для элемента.shapes-fallback.
Одно изображение, много анимаций
Кроме масштабируемости в SVG есть еще одно преимущество над GIF, и это возможность анимировать отдельные части одного изображения – разные скорости анимации и разная длительность. В моем примере ниже с акулой хвост и глаза анимируются с разной скоростью и разным количеством слоев.
Математически говоря, тут происходит что-то интересное: если у вас есть две отдельные анимации в составе одного файла, то общая продолжительность анимации будет больше, чем у отдельных составляющих. Итак, если одна анимация состоит из трех кадров, а другая из четырех, то общая длина будет 12 кадров – в три раза длиннее, чем самая продолжительная из двух отдельных анимаций.
В GIF, где каждый кадр непосредственно связан со слоем, добиться такого эффекта можно только, добавив новые изображения. Соответственно и размер файла увеличивается.
Переменная анимация
В моем примере shark.svg и виляющий хвост, и мигающие глаза используют чередующуюся, симметричную анимацию, где все слои проигрываются сначала вперед, потом назад, и так бесконечно. Каждый элемент слоистой анимации начинает двигаться одновременно, создавая эффект бесконечной анимации с помощью свойства animation-direction: alternate для каждого слоя:
Tail > * { animation-direction: alternate; }
Tail > * { animation - direction : alternate ; |
Данный подход экономит вес. Чтобы добиться такого же эффекта в GIF, необходимо добавить изображения дважды: сначала в обычном порядке, потом в обратном.
По-настоящему слоистая анимация
Я начал свою статью с заключения, что традиционная слоистая анимация трудно сравнима с современной keyframe анимацией. До появления слоистой анимации каждый кадр рисовался полностью – не только анимируемая часть изображения. Если на слоях рисовать только анимируемые части, статичные фоны можно использовать повторно. Кроме экономии времени такой подход также повышает плавность.
SVG это формат изображений на основе текста, данный формат делится на множество «поддеревьев» разметки. Это делает данный формат идеальным для объединения статичных и анимированных изображений.
Автоматизация с помощью Sass
Моя анимация становится все более изощренной, а создание отдельных классов анимаций для каждого слоя слегка утомительно. Для выполнения тяжелой работы я подключил Sass. С помощью директивы @for и некоторых вычислений мне удалось сгенерировать анимацию автоматически:
$cels: 6; $fraction: 100 / $cels; @for $i from 1 through $cels { $name: shapes; $start: ($fraction * $i) - $fraction; @keyframes #{$name}-#{$i} { #{$start * 1%} { opacity: 1; } #{($start + $fraction) * 1%} { opacity: 0; } } > :nth-child(#{$i}) { animation-name: #{$name}-#{$i}; } }