Чтиво Создаем SVG анимацию, используя CSS и JavaScript

[Gustav]

Создаем SVG анимацию, используя CSS и JavaScript

SVG или Масштабируемая Векторная Графика (Scalable Vector Graphics) применяет XML, дабы предоставлять вектору графическую информацию в легкой форме. В отличие от другого растеризированного формата изображения, такого как PNG и JPEG, SVG может быть изменен без потери качества изображения. Создавать SVG можно при помощи Adobe Illustrator, а также используя другие различные графические редакторы. Но еще возможно сделать это и вручную, используя XML/SVG DOM теги и настройки создания элементов. Так как это графика XML, возможно создавать некую анимацию SVG, путем использования возможностей CSS, JavaScript и SMIL (Синхронизированный Мультимедийный Язык Интеграции). В сегодняшнем уроке я покажу вам, как анимировать SVG с помощью CSS и JavaScript. А использовать мы будем изображение, текст и векторную графику.

Скачать:

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Для сегодняшнего урока нам понадобится:

• SVG иконка
• SVG текст
• SVG ваза и цветок
• Знание HTML и CSS
• Время и чуточку терпения

Экспортируем файлы в SVG

Лучший способ экспортировать изображение в SVG формат, это воспользоваться возможностями Adobe Illustrator. Я уже создал SVG иконку и текст в illustrator, которые мы будем использовать в процессе урока.

Чтобы экспортировать Ваши файлы Adobe Illustrator в SVG, просто зайдите в File->Save As(Файл->Сохранить как), следующим шагом будет выбор имени и SVG формата. В этом примере я буду использовать plant (вазу), формат файла выбираем SVG.

Затем всплывет окно, удостоверьтесь, что у вас выбран SVG version(версии 1.1), после выберите location(местоположение):link(ссылка). В CSS properties(CSS свойствах) выбираем Style Elements(Элементы стиля). Если вам необходимо проверить SVG код, то вам нужно нажать на кнопку «SVG Show code»(Просмотр кода SVG), она находится в нижней части окна. Чтобы закончить процесс, экспорта необходимо нажать на кнопку OK.

Используем SVG в HTML
SVG, как указано выше, основывается на XML, и некоторые браузеры позволяют вам вставлять изображение SVG в HTML. Есть различные способы включать SVG в документы HTML.

1. Вставляем целый SVG код в HTML

Это самый быстрый способ вставить SVG в ваш HTML файл. SVG код необходимо вставлять в HTML между тегами <svg>. Если вы хотите вставить больше одного SVG файла, то у вас могут возникнуть трудности, особенно если вы только начинаете использовать SVG. Для примера посмотрите код ниже:

<svg version=»1.1″ xmlns=»http://www.w3.org/2000/svg» xmlns:xlink=»http://www.w3.org/1999/xlink» x=»0px» y=»0px»
width=»300px» height=»300px» viewBox=»0 0 300 300″ style=»enable-background:new 0 0 300 300;» xml:space=»preserve»>
<style type=»text/css»>
.st0{fill:none;stroke:#FFFFFF;
stroke-width:9;
stroke-miterlimit:10;
}
.st1{
fill:#FFFFFF;
stroke:#FFFFFF;
stroke-width:9;
stroke-miterlimit:10;
}
</style>
<g id=»Layer_1″>
</g>
<g id=»container»>
<polygon class=»st0″ points=»41.463,278.637 117.698,269.803 217.926,143.304 240.204,140.724 237.852,120.427 260.871,117.76 258.403,96.473 275.582,74.792 200.042,14.94 182.974,36.483 164.371,36.13 166.952,58.407 146.655,60.758 149.122,82.045 42.548,216.555 «/>
</g>
<g id=»details»>
<line class=»st0″ x1=»200.115″ y1=»123.796″ x2=»106.014″ y2=»242.563″/>
<line class=»st0″ x1=»42.517″ y1=»218.346″ x2=»108.766″ y2=»270.838″/>
<polyline class=»st0″ points=»151.503,85.281 154.817,87.907 177.467,105.852 «/>
<polyline class=»st0″ points=»175.181,64.477 170.761,60.975 199.499,83.745 «/>
</g>
</svg>

2. Вставляем SVG как изображение

Второй способ, которым можно воспользоваться, чтобы включить SVG в ваш HTML код, это использовать тэг <img>. Это тот же самый способ импортирования обычного изображения, однако этот способ иногда может не работать, также его довольно сложно стилизовать через CSS. Пример можете просмотреть ниже:

<img src=»images/text-svg.svg» alt=»text svg»>

3. Используем тэг object

Это один из предпочтительнеших способов импортирования SVG в код. Используя тэг <object> наряду с <embed>. Для нашего обучающего урока мы будем использовать этот метод. Для примера посмотрите код ниже:

<object>
<embedsrc=»images/text-svg.svg»>
</object>

Примечание: даже если для анимации используются CSS и JavaScript, это не гарантирует то, что она будет работать во всех браузерах, особенно в IE9 и ниже.

Анимация SVG иконок при наведении

Для этой части урока я буду использовать три плоских иконки SVG, с которыми мы в дальнейшем будем работать. Первое, что нам необходимо сделать, это вставить их в HTML код, используя тэг <embed>, и обернуть все это в тэг <object>.

<object>
<embed src=»images/icon-magnifying-glass.svg»>
</object>
<object>
<embed src=»images/icon-list.svg»>
</object>
<object>
<embed src=»images/icon-envelope.svg»>
</object>

Теперь пришло время использовать CSS для стилизации SVG при наведении на них. Чтобы сделать это, нам необходимо применить CSS для каждого изображения через внутренние стили.

.st0 {
fill:none;
stroke:#F2F2F2;
stroke-width:4;
stroke-miterlimit:10;
}
.icon .st0
{ -webkit-transition: .5s;
-moz-transition: .5s; transition: .5s;
}
.icon .fill {
-webkit-transition: .5s;
-moz-transition: .5s;
transition: .5s;
fill: #ffffff;
}
.icon:hover {
cursor: pointer;
}
.icon:hover .st0{
stroke: #1f8a4c;
}
.icon:hover .fill {
-webkit-transform: scale(893, 893);
-moz-transform: scale(893, 893);
transform: scale(893, 893);
}

Используя дефолтные классы, которые появились при экспортировании изображений, мы добавили плавности перехода, используя свойство transition. Также, после мы зальем изображение, используя свойство background-color, и добавим цвет рамке, используя свойство border-color. Чтобы создать эффект плавности, мы используем различные свойства CSS3, управляя масштабом и изменяя цвет заливки.

Анимация SVG текста

Следующей нашей анимацией будет «рисование» текста в SVG формате. Файл text.svg содержит фразу «TEXT SVG«. Наша цель — это сделать границу которая будет «бегать» вне текста, затем остановить анимацию и «нарисовать» текст.

Мы снова используем тег <object> и <embed>, чтобы вставить наш SVG файл в код.

<object>
<embed src=»images/text-svg.svg»>
</object>

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

Мы будем использовать @keyframes из CSS3, чтобы достигнуть данного эффекта и затем настроить задержку мультипликации st1 класса, который является фактическим классом текста SVG.

.st0 {
font-family:’Lato-Light';
}
.st1 { font-size:181.2018px;
}
.st2 {
display:none
}
.st3 {
fill:none;
stroke:#FFF;
stroke-width:3;
stroke-miterlimit:10;
}
.st0 {
stroke-dasharray:800;
stroke-dashoffset:0;
-webkit-animation:dash 2s linear forwards;
-moz-animation:dash 2s linear forwards;
animation:dash 2s linear forwards;
opacity:0
}
@-webkit-keyframes dash {
from {
stroke-dashoffset:800;
}
to{
stroke-dashoffset:1;
opacity:1;
} }
@-moz-keyframes dash
{
from {
stroke-dashoffset:800;
}
to {
stroke-dashoffset:1; opacity:1;
}
}
@keyframes dash {
from {
stroke-dashoffset:800;
}
to {
stroke-dashoffset:1;
opacity:1; }
}
.st1 {
stroke-dasharray:800;
stroke-dashoffset:0;
-webkit-animation:dash 2s linear forwards;
-moz-animation:dash 2s linear forwards;
animation:dash 2s linear forwards;
-webkit-animation-delay:1.6s;
-moz-animation-delay:1.6s;
animation-delay:1.6s;
}
#container { stroke-dasharray:50;
stroke-dashoffset:0;
-webkit-animation:dash 1.5s linear forwards;
-moz-animation:dash 1.5s linear forwards;
animation:dash 1.5s linear forwards;
}

Векторная анимация SVG с использованием CSS и JavaScrpt

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

Используя тег <object>, мы вставим два файла vase.svg и plant.svg. Вы скорее всего заметили, что я вместо src использую data, чтобы определить путь к файлам. Это необходимо так как data мы будем использовать для достижения необходимого эффекта по средствам JavaScript. Мы также обернем все в div и дадим ему id container, а затем зададим plant.svg id plantobj и vaseobj.

<div id="container" style="margin: 0px auto; display: block; width: 300px; height: 350px"><
object
data
=
"images/plant.svg"
id
=
"plantobj"
type
=
"image/svg+xml"
>
</
object
>
<
object
data
=
"images/vase.svg"
id
=
"vaseobj"
type
=
"image/svg+xml"
>
</
object
>
</
div
>

Теперь в нашем CSS мы должны настроить свойства id container и задать им свойства width и hight.

#container {
position: relative;
margin: 0px auto;
display: block;
width: 300px;
height: 350px
}

Затем стилизуем vaseobj и plantobj. В основном стили, которые мы будем добавлять здесь будут являться настройкой наших элементов. Тогда для нашего цветка мы настроим масштаб, а затем добавим некий переход, чтобы добавить плавности.

#vaseobj {
position: absolute;
bottom: 20px;
left: 70px;
}
#plantobj {
position: absolute;
bottom: 127px;
left: 130px;
-moz-transform: scale(0, 0);
-webkit-transform: scale(0, 0);
transform: scale(0, 0);
-moz-transform-origin: 20%, 100%;
-webkit-transform-origin: 20% 100%;
transform-origin: 20% 100%;
-moz-transition: all 1.5s ease;
-webkit-transition: all 1.5s ease;
transition: all 1.5s ease;
}

Затем мы добавим CSS свойства для нашего класса grow, который должен изменить размер изображения в отношении 200 по осям X и Y. Смысл от этих действий мы увидим позже, когда будем писать JavaScript код.

#plantobj.grow {
-moz-transform: scale(2, 2);
-webkit-transform: scale(2, 2);
transform: scale(2, 2);
}

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

function getSubDocument(embedding_element) {
if (embedding_element.contentDocument) {
return embedding_element.contentDocument;
} else
{
var subdoc = null;
try {
subdoc = embedding_element.getSVGDocument();
} catch(e) {} return subdoc;
}}

Теперь давайте добавим главную часть. Используем событие window.onload мы используем ids, чтобы задать значения различным переменным. Далее мы используем onmouseover и onmouseout, чтобы добавить класс к вазе для плавного эффекта роста цветка.

window.onload = function () {
var vaseobj = document.getElementById(‘vaseobj’);
var vasedoc = getSubDocument(vaseobj);
var vs = vasedoc.getElementById(‘vase’);
vs.style.cursor = ‘pointer';
var plantobj = document.getElementById(‘plantobj’);
vaseobj.onmouseover = function(){
plantobj.className = «grow»;
} ;
vaseobj.onmouseout = function() {
plantobj.className = «»;
}};

Пару советов Хотя мы можем использовать <object> вместе с <embed>, чтобы вставить наше изображение в код HTML, разработчик Алексей Тен написал небольшую хитрость по этой теме и как можно немного укоротить наш код. Это значит, что мы можем одновременно использовать атрибут href и src. Пример вы можете посмотреть ниже:

<svg width=»300″ height=»300″>
<image xlink:href=»images/icon-magnifying-glass.svg» src=»images/icon-magnifying-glass.png» width=»300″ height=»300″/>
</svg>

JavaScript библиотеки для SVG
В то время как вы можете преобразить SVG, используя CSS и JavaScript, есть некоторые хорошие библиотеки, которые помогут вам оживить SVG.

• snapsvg
• svgjs
• Raphael

Итог

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

Если вас заинтересовала тема «оживления» SVG, вы можете почитать об этом подробнее на сайте Mozilla’ы.

Поэтому экспериментируйте и создавайте больше крутых анимаций!

.