Просмотр анимированных svg на пк. Как использовать SVG для создания веб-анимации под все типы устройств. SVG для мобильных
- Tutorial
Думаю многие видели обзоры игровых консолей нового поколения от Polygon (Vox Media) . Это те, где консоли отрисовывались в стиле blueprint"ов:
Обзоры выглядели круто, довольно необычно и ново. О том как реализована основная фишка обзоров - SVG анимация, как сделать нечто подобное самому, и какие ещё «секретные» возможности скрывает старый добрый SVG в плане анимации элемента path - можно узнать под катом.
Stroke-dasharray interpolation, теория
Вообще техника подобной анимации линий не нова, просто до недавнего времени SVG и всё, что с ним связано, на мой взгляд, было несправедливо предано забвению, но к счастью ситуация меняется. Итак, трюк с анимацией элемента path возможен благодаря свойству stroke-dasharray элемента path . Это свойство позволяет задавать параметры пунктирной линии, а именно длину штриха и промежутка между штрихами. Если задать длину штриха равной всей длине линии, то получим обыкновенную сплошную линию. Если же задать длину штриха равной нулю, а длину промежутка опять-таки равной всей длине линии, то получим невидимую линию. А постепенно увеличивая длину штриха при длине промежутка, равной длине всей линии, мы можем имитировать её отрисовку. При таком подходе отрисовка будет происходить от начала линии. Если же вдруг необходимо отрисовывать с конца, то нужно использовать ещё одно свойство: stroke-dashoffset . Это свойство определяет смещение для первого штриха. Таким образом, уменьшая смещение и увеличивая длину штриха, получим отрисовку с конца линии.Ребята из Vox Media использовали гибридный вариант (который, на мой взгляд, избыточен), кстати почитать о том, как они это делали, можно (и нужно) в их блоге: Polygon feature design: SVG animations for fun and profit .
Реализация SVG анимации
В Vox Media предлагают использовать requestAnimationFrame для плавности анимации, но у нас немного другие цели, так что мы пойдём более простым путём, воспользуемся библиотекой D3.js и реализованной в ней анимацией на основе длительности.Вот собственно рабочий код, использовавшийся для анимации консоли из начала статьи.
Queue() .defer(d3.xml, "PS4.svg", "image/svg+xml") .await(ready); function ready(error, xml) { //Adding our svg file to HTML document var importedNode = document.importNode(xml.documentElement, true); d3.select("#pathAnimation").node().appendChild(importedNode); var svg = d3.select("svg"), svgWidth = svg.attr("width"), svgHeight = svg.attr("height"); var paths = svg.selectAll("path") .call(transition); function transition(path) { path.transition() .duration(5000) .attrTween("stroke-dasharray", tweenDash) .each("end", function() { d3.select(this).call(transition); }); // infinite loop } function tweenDash() { var l = this.getTotalLength(), i = d3.interpolateString("0," + l, l + "," + l); // interpolation of stroke-dasharray attr return function(t) { return i(t); }; } }
Начнём просто с движения вдоль линии, пока без вращения.
Queue()
.defer(d3.xml, "wiggle.svg", "image/svg+xml")
.await(ready);
function ready(error, xml) {
//Adding our svg file to HTML document
var importedNode = document.importNode(xml.documentElement, true);
d3.select("#pathAnimation").node().appendChild(importedNode);
var svg = d3.select("svg");
var path = svg.select("path#wiggle"),
startPoint = pathStartPoint(path);
var marker = svg.append("circle");
marker.attr("r", 7)
.attr("transform", "translate(" + startPoint + ")");
transition();
//Get path start point for placing marker
function pathStartPoint(path) {
var d = path.attr("d"),
dsplitted = d.split(" ");
return dsplitted.split(",");
}
function transition() {
marker.transition()
.duration(7500)
.attrTween("transform", translateAlong(path.node()))
.each("end", transition);// infinite loop
}
function translateAlong(path) {
var l = path.getTotalLength();
return function(i) {
return function(t) {
var p = path.getPointAtLength(t * l);
return "translate(" + p.x + "," + p.y + ")";//Move marker
}
}
}
}
Здесь pathStartPoint(path) вытаскивает координаты начала линии из атрибута элемента path . В translateAlong(path) с помощью интерполятора задаются координаты нашего маркера. Пример можно посмотреть здесь: Marker animation along SVG path element with D3.js . А ещё можно объединить анимацию отрисовки линии и движение маркера, выглядеть это может следующим образом: Marker animation along SVG path element with D3.js II .
Усложним задачу, добавим вращение (ну и поменяем маркер с круга на что-нибудь поинтереснее). В качестве маркера у нас будет ракета с шириной 48 и длиной 24 . Поскольку по умолчанию точкой привязки маркера является левый верхний угол, нам необходимо смещать его, чтобы привязка была к центру маркера. Также необходимо учитывать это при вращении, ведь оно тоже по умолчанию происходит вокруг левого верхнего угла. Со смещением вроде разобрались. Теперь перейдём непосредственно к вращению, здесь нам поможет определение касательной , угол будем определять с помощью арктангенса.
Функция translateAlong(path) , определяющая интерполятор будет выглядеть следующим образом:
Function translateAlong(path) {
var l = path.getTotalLength();
var t0 = 0;
return function(i) {
return function(t) {
var p0 = path.getPointAtLength(t0 * l);//previous point
var p = path.getPointAtLength(t * l);////current point
var angle = Math.atan2(p.y - p0.y, p.x - p0.x) * 180 / Math.PI;//angle for tangent
t0 = t;
//Shifting center to center of rocket
var centerX = p.x - 24,
centerY = p.y - 12;
return "translate(" + centerX + "," + centerY + ")rotate(" + angle + " 24" + " 12" +")";
}
}
}
Реализацию можно посмотреть здесь.
В современном веб-дизайне нельзя не заметить популярность анимации средствами CSS и SVG. Действительно, анимация элементов сайта сегодня переживает второе рождение. многие применяемые эффекты стали полезнее для пользователя и выглядят правильней с точки зрения юзабилити веб-ресурса и UX. Технологии упростили сложные задачи анимирования графики и элементов не жертвуя производительностью сайтов (как это было с Flash). К тому же не требует усложнять что-либо и даже легкой анимацией страниц можно достичь впечатляющих результатов, сделать сайт эффектнее.
Анимация в дизайнерском творчестве всегда занимала особое место и привлекала как новичков, так и профессионалов-разработчиков. Сейчас, когда в тренде индивидуальность и уникальность спецэффектов, самое время обратить внимание на современные возможности CSS, а также SVG. При возросшем разрешении экранов всевозможных устройств, вполне объясним интерес к масштабированию веб-элементов без потери качества. Самое интересное в современном веб-креативе то, что стильные анимационные эффекты вполне возможно создавать самостоятельно.
В подборке красивых и современных SVG/CSS анимаций кратко описаны основные моменты реализации. Для наглядного примера и вдохновения: сайты использующие эти эффекты.
01. Всплывающие пузырьки
Пример применения на сайте: 7UP
Полный код на CodePen
CSS анимация пузырьков на сайте 7UP – это великолепный . Процесс анимации состоит из нескольких частей: SVG отрисовка, затем анимирование каждого пузырька в два этапа.
Первая анимация изменяет прозрачность и поднимает пузырьки наверх в окне просмотра, а вторая добавляет реалистичные колебания. Выброс и движение происходят хаотично с разными задержками и продолжительностью. При помощи SVG создается два слоя – для больших и маленьких пузырьков.
Метод такого раздельного анимирования на SVG потребует поэлементной анимации. Элемент в SVG может быть использован подобно DIV в HTML; нам нужно обернуть каждый пузырек в группирующий тег.
CSS дает мощные возможности для анимирования, его реально простой код создает сложные эффекты. Для продвигающихся вверх по экрану пузырьков, мы меняем прозрачность до полного их исчезновения.
@keyframes up { 0% { opacity : 0; } 10%, 90% { opacity : 1; } 100% { opacity : 0; transform : translateY (-1024px) ; } }Для создания колебания нужно просто добавить движение влево и вправо – достаточное для заметности эффекта, но не более того.
@keyframes wobble { 33% { transform : translateX (-50px) ; } 66% { transform : translateX (50px) ; } }Анимирование пузырьков потребует использовать применяемые ранее группы и nth-of-type для идентификации отдельных групп. Ради аппаратного ускорения, мы задействуем значение прозрачности и свойство will-change .
.bubbles-large > g { opacity : 0; will-change : transform, opacity; } { ...} ... .bubbles-small g:nth-of-type(10) { ...}Для задания времени анимирования и задержек ограничится лучше парой секунд, а повторять бесконечно. Кроме того, используем тайминг функцию ease-in-out , чтобы приблизить вид к естественному.
.bubbles-large g:nth-of-type(1) { animation : up 6.5s infinite; } .bubbles-large g:nth-of-type(1) circle { animation : wobble 3s infinite ease-in-out; } ... bubbles-small g:nth-of-type(9) circle { animation : wobble 3s 275ms infinite ease-in-out; } .bubbles-small g:nth-of-type(10) { animation : up 6s 900ms infinite; }02. Значок скроллинга
Пример применения на сайте: Baltic Training
Код на CodePen
Посетителю надо показать, что ниже есть контент. Приглашение к скроллингу реализуем легкой анимацией значка мыши. Хотя это решаемо HTML-элементами, мы используем наиболее подходящие SVG-конструкции. Создаем прямоугольник с закругленными углами и круговой элемент, который мы будем анимировать. Плюс SVG в возможности масштабирования.
К созданной SVG-иконке применяются стили, чтобы задать размер и место в контейнере. Привязываем ссылку и помещаем значок вниз экрана.
Начинаем анимирование иконки. Задаем начало движению: от 0 и до 20 процентов. Для своего промежутка 20% применяется бесконечным повторением.
@keyframes scroll { 0%, 20% { transform : translateY (0) scaleY (1) ; } }Добавляем прозрачность по Y-вертикали, используя 100% в конечной точке анимированного движения для исчезновения кружка.
@keyframes scroll { ... 10% { opacity : 1; } 100% { transform : translateY (36px) scaleY (2) ; opacity : 0.01; } }В завершение, мы применяем анимацию достаточно понятным кодом. Функция тайминга cubic-bezier используется чтобы вернуть кружок наверх.
.scroll { animation-name : scroll; animation-duration : 1.5s; animation-timing-function : cubic-bezier (0.650, -0.550, 0.250, 1.500) ; animation-iteration-count : infinite; transform-origin : 50% 20.5px; will-change : transform; }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;
В предыдущих уроках серии мы разбирались использованием векторной графики 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 к элементу
Также все действует и для элемента
Анимация нескольких атрибутов
Конечно, в элементе
Здесь мы анимируем для атрибута для элемента
От автора: что если я скажу вам, что существует формат изображений, работающий как GIF, но только с векторной графикой? А что если я скажу вам, что в этом формате можно менять направление анимации? А если так, вы можете взять за основу одно изображение и анимировать различные его части отдельно и с разной скоростью? Да, такой формат уже существует и это SVG. Просто нужно проявить немного смелости.
В этой статье я смешаю старое с новым, взяв за основу что-то примитивное и вдохнув в это новую жизнь. Sass поможет оптимизировать рабочий процесс и, возможно, поможет продемонстрировать автоматизацию. Иногда автоматизация может стоять на службе творчества.
Анимация, старые подходы
Я далеко не эксперт в анимации, зато я знаю, что мне действительно нравится: когда все двигается. Все очень просто, я веб-дизайнер, а веб-анимация является частью моей работы. Поддержка анимации уже настолько повсеместна, что мы можем переключить свое внимание на более возвышенные вещи, как цели и значение анимации.
Хоть анимация по своей природе задумывалась, как что-то выразительное и гибкое, не все так гладко. То, что анимация, о которой пойдет речь в статье, стала крайне популярна еще задолго до моего рождения слегка удручает.
Долговечное очарование
«Делайте все собственными руками, даже когда используете компьютер.» — Хаяо Миядзаки
Студия Гибли Хайо Миядзаки, которая выпустила массу замечательных произведений, среди которых Унесенные призраками, Ходячий замок и Принцесса Мононоке, придерживается традиционных ручных методов анимации, слоистой анимации . В отличие от CGI или keyframe анимации с помощью CSS данный подход занимает гораздо больше времени.
Миядзаки также известен тем, что лично готовит лапшу рамен для своих работников-аниматоров поздними ночами, и все ради успеха.
Однако студия Гибли работает вручную не потому, что это какой-то фетиш прошлого. Причина того, что анимационные работы не теряют своей популярности после изобретения камеры в том, что вы можете взглянуть на жизнь с помощью пары мазков. Все это применимо и к анимации, где каждый кадр рисуется художником полностью, а не является артефактом векторной графики. Конечный продукт намного богаче. Существует негласная традиция рисовать вручную, так каждый кадр передает какую-то информацию.
Левая, гладкая анимация сделана при помощи keyframe трансформаций, в то время как в основе правой лежат три независимых кадра, один за другим. Пользователи Firefix могли заметить, что для анимации выше не применилось свойство transform-origin, все дело в баге .
Неудобный SMIL
Если сказать, что в интернете не существует технологии для создания веб слоистой анимации, это будет ложь. Громоздкое название Синхронизированный язык мультимедийных интеграций (SMIL), этот язык предназначен для создания анимации. У Jonathan Ingram есть замечательный урок по использованию SMIL для создания слоистой и зацикленной анимации на примере персонажей Mortal Kombat:
< animate id = "frame2" attributeName = "display" values = "none;inline;none;none" keyTimes = "0;0.33;0.66;1" dur = "1s" begin = "0s" repeatCount = "indefinite" / > |
Элемент animate используется для определения состояния анимации для родительского элемента.
Однако не обходится и без серьезных проблем. Несмотря на довольно старую классификацию, SMIL все же не поддерживается в IE. Более того, поддержка также не планируется ни в IE12, 15 или даже в 38. В то же самое время язык устаревает, а поддержка в Chrome падает. Paul Kinlan из Google рассказал, что в бета-версии Chrome 45 фактически закрыли глаза на предупреждения об устаревании SMIL.
Поддержка SMIL продолжает уменьшаться, и я нахожу немного странным использование XML разметки для создания анимации. Я привык, что моя анимация находится в отдельном файле стилей, и думаю ей там самое место. В конце концов, анимируя элемент, мы меняем только его визуальное положение, но не затрагиваем разметку. Это можно только в JavaScript.
К сожалению, в CSS нет явного или быстрого способа создания слоистой анимации, однако я опишу способ на основе редко используемых keyframe свойств CSS.
Начнем
@keyframe анимация работает с помощью свойства animation-timing-function, вы должны знать о некоторых временных функциях . К примеру, свойство ease-in уменьшает скорость анимации, когда та подходит к завершению.
Редко используемая функция steps() также представляет интерес для нас, так как она имитирует эффект подергивания, анимация будто бы состоит из отдельных слоев, проигрываемых один за другим. К примеру, steps(5) выполнит довольно плавную анимацию из пяти отдельных слоев.
Все значения функции steps() имитируют keyframe анимацию; нету какого-то магического переключения кадров. Но, если воспользоваться steps(1), то можно просто переключаться между кадрами без какой-либо анимации. Изменяя свойство opacity от 1 до 0, мы можем показывать и прятать анимируемый элемент за один шаг: вот он есть, а вот и нет. Это очень важный этап построения слоистой анимации, которую я собираюсь создать.
Элементы, как отдельные слои
Пока что, меня тревожит только один элемент, или слой, который сам по себе не делает никакой анимации и не заслуживает той самой лапши Миядзаки. Это когда картинка просто появляется и исчезает.
Для создания полноценной анимации нам придется создать больше изображений: набор слоев, которые и будут составлять анимацию. Этот этап очень долгий и не из легких, но я не буду жаловаться на это: прорисовка каждого отдельного слоя, вот что делает данный тип анимации особенным. Позже мне понадобится помощь с написанием логики анимации.
Разметка
Для этого мне понадобится SVG. Технически слоев может быть сколько угодно, но в SVG мы можем с легкостью определить набор элементов path и наложить их друг на друга. В примере ниже я создал контейнер для анимации с помощью SVG элемента
< g class = "animation-name" > < path d = "" > < / path > < path d = > < / path > < path d = "" > < / path > < / g > |
Создание слоев
Существует масса графических редакторов для работы с SVG, но Inkscape был создан специально для работы с этим форматом, а также включает в себя встроенную панель редактирования XML. Он нам сильно облегчит жизнь. А еще он бесплатный. Чтобы продемонстрировать механику, быстро пробежимся по SVG. Создайте новый документ Inkscape и нарисуйте три фигуры, как на рисунке ниже. Не обязательно, чтобы они были точно такие же.
Разместите все фигуры одна над другой и подгоните размер документа под размер фигур. Чтобы сделать это выберите File->Document Properties а затем Resize page to drawing or selection. Проследите, чтобы не была выбрана какая-то отдельная фигура, иначе размер документа будет подобран под эту конкретную фигуру.
Затем выберите все фигуры и кликните Object->Group, создастся элемент группы
Отлично, теперь сохраните SVG файл. Из списка выберите Optimized SVG и поставьте галочку напротив Enable viewboxing. Теперь наш SVG полностью готов к анимированию.
Замечания по оптимизации
Используя такие простые формы, как у нас, SVG данные сводятся к минимуму. В данном случае размер анимированного SVG (вместе с CSS, который мы еще напишем) будет всего 2.3 Кб. Проще говоря, чем проще фигура на каждом слое, тем больше слоев можно себе позволить. Для анимирования более сложных изображений, как каракули, которые мы будем использовать в данной статье, я рекомендую использовать инструмент от Jake Archibald SVGOMG .
Наложение слоев
Как я писал выше при помощи steps(1) можно переключать видимость элемента с помощью непрозрачности. Нельзя добиться такого же эффекта со свойством display, так как оно принимает только конкретные значения (нечего анимировать). Для начала установим все слои в контейнере в opacity:0.
Shapes > * { opacity: 0; animation-duration: 0.75s; animation-iteration-count: infinite; animation-timing-function: steps(1); }
Shapes > * { opacity : 0 ; animation - duration : 0.75s ; animation - iteration - count : infinite ; animation - timing - function : steps (1 ) ; |
Как и при настройке пошаговых временных функций, я выбрал бесконечное число итераций, длительность анимации 0.75s. Так как каждый кадр появляется на одинаковое количество времени, а кадров у нас три, то каждый кадр должен появляться на 0.25s, или 4 кадра в секунду.
Итак, как и говорилось, каждый кадр появляется за другим? Каждому элементу необходимо задать длительность анимации 0.75s, а затем запустить все кадры одновременно, плавно показывая один поверх другого. При трех слоях каждый должен быть виден треть времени. Я использовал проценты (в @keyframe синтаксисе) и применил для каждого nth-child свою анимацию.
@keyframes shape-1 { 0% { opacity: 1; } 33.33333% { opacity: 0; } } .shapes > :nth-child(1) { animation-name: shapes-1; } @keyframes shapes-2 { 33.33333% { opacity: 1; } 66.66667% { opacity: 0; } } .shapes > :nth-child(2) { animation-name: shapes-2; } @keyframes shapes-3 { 66.66667% { opacity: 1; } 100% { opacity: 0; } } .shapes > :nth-child(3) { animation-name: shapes-3; }
@ keyframes shape - 1 { 0 % { opacity : 1 ; 33.33333 % { opacity : 0 ; Shapes > : nth - child (1 ) { animation - name : shapes - 1 ; @ keyframes shapes - 2 { 33.33333 % { opacity : 1 ; 66.66667 % { opacity : 0 ; Shapes > : nth - child (2 ) { animation - name : shapes - 2 ; @ keyframes shapes - 3 { 66.66667 % { opacity : 1 ; 100 % { opacity : 0 ; Shapes > : nth - child (3 ) { animation - name : shapes - 3 ; |
Встраивание и подключение
Теперь, чтобы создать мою масштабируемую GIF анимацию, я, наконец, могу добавить в SVG файл стили. Так как у меня не стоит на компьютере таск раннер, я использовал онлайн версию autoprefixer для автоматического добавления вендорных префиксов.
< 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}; } }
Очень хорошо вписываются в современный веб-дизайн своей легкостью и , качественно отображаются на 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
Очень сильная библиотека для рисования линий . Позволяет выбирать стиль анимации линий: с задержкой, асинхронно или одна за другой. Посмотрите пример на сайте библиотеки и вы все поймете. Для более сложных изображений позволяет задать сценарий рисования.