Создаем 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 формат, это воспользоваться возможностями Adobe Illustrator. Я уже создал SVG иконку и текст в illustrator, которые мы будем использовать в процессе урока. Экспортируем файлы в SVG , формат файла выбираем SVG.plant (вазу), следующим шагом будет выбор имени и SVG формата. В этом примере я буду использовать File->Save As(Файл->Сохранить как)Чтобы экспортировать Ваши файлы Adobe Illustrator в SVG, просто зайдите в Используем SVG в HTML OK., она находится в нижней части окна. Чтобы закончить процесс, экспорта необходимо нажать на кнопку «SVG Show code»(Просмотр кода SVG). Если вам необходимо проверить SVG код, то вам нужно нажать на кнопку В CSS properties(CSS свойствах) выбираем Style Elements(Элементы стиля).location(местоположение):link(ссылка), после выберите SVG version(версии 1.1)Затем всплывет окно, удостоверьтесь, что у вас выбран Анимация SVG иконок при наведении Примечание: даже если для анимации используются CSS и JavaScript, это не гарантирует то, что она будет работать во всех браузерах, особенно в IE9 и ниже.Код: . Для нашего обучающего урока мы будем использовать этот метод. Для примера посмотрите код ниже: наряду с Это один из предпочтительнеших способов импортирования SVG в код. Используя тэг 3. Используем тэг objectКод: . Это тот же самый способ импортирования обычного изображения, однако этот способ иногда может не работать, также его довольно сложно стилизовать через CSS.

Пример можете просмотреть ниже:Второй способ, которым можно воспользоваться, чтобы включить SVG в ваш HTML код, это использовать тэг 2. Вставляем SVG как изображениеКод:.st0{fill:none;stroke:#FFFFFF;stroke-width:9;stroke-miterlimit:10;}.st1{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:9;stroke-miterlimit:10;} Это самый быстрый способ вставить SVG в ваш HTML файл.

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

Для примера посмотрите код ниже: 1. Вставляем целый SVG код в HTML SVG, как указано выше, основывается на XML, и некоторые браузеры позволяют вам вставлять изображение SVG в HTML. Есть различные способы включать SVG в документы HTML. Анимация SVG текста . Чтобы создать эффект плавности, мы используем различные свойства CSS3, управляя масштабом и изменяя цвет заливки.border-color, и добавим цвет рамке, используя свойство background-color. Также, после мы зальем изображение, используя свойство transitionИспользуя дефолтные классы, которые появились при экспортировании изображений, мы добавили плавности перехода, используя свойство Код:.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);}

Теперь пришло время использовать CSS для стилизации SVG при наведении на них.

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

Первое, что нам необходимо сделать, это вставить их в HTML код, используя тэг Код:.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-animationash 2s linear forwards;-moz-animationash 2s linear forwards;animationash 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-animationash 2s linear forwards;-moz-animationash 2s linear forwards;animationash 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-animationash 1.5s linear forwards;-moz-animationash 1.5s linear forwards;animationash 1.5s linear forwards;} Мы будем использовать @keyframes из CSS3, чтобы достигнуть данного эффекта и затем настроить задержку мультипликации st1 класса, который является фактическим классом текста SVG. , чтобы создать плавный эффект рисования линий.

Stroke-dasharray в основном настраивает поток прорисовки линий и сгладит движение, в то время как stroke-dashoffset определяет расстояние между чертами.stroke-dashoffset и stroke-dasharrayВ CSS мы собираемся использовать свойство Код: , чтобы вставить наш SVG файл в код. и Мы снова используем тег «. Наша цель — это сделать границу которая будет «бегать» вне текста, затем остановить анимацию и «нарисовать» текст.TEXT SVG содержит фразу «text.svgСледующей нашей анимацией будет «рисование» текста в SVG формате. Файл Векторная анимация SVG с использованием CSS и JavaScrpt В то время как вы можете преобразить SVG, используя CSS и JavaScript, есть некоторые хорошие библиотеки, которые помогут вам оживить SVG. JavaScript библиотеки для SVGКод: . Пример вы можете посмотреть ниже:srcи href написал небольшую хитрость по этой теме и как можно немного укоротить наш код. Это значит, что мы можем одновременно использовать атрибутАлексей Тен, чтобы вставить наше изображение в код HTML, разработчик вместе с Пару советов Хотя мы можем использовать Код: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 = «»;}};

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

Используем событие Код: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;}}

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

Сначала мы создадим функцию, чтобы было возможно работать с документом SVG.

Это также проверит, есть ли у нас данный документ, если его нет, то функция вернет нам значение null.

Это также позволит менять наш курсор, при наведении на вазу.Код:#plantobj.grow {-moz-transform: scale(2, 2);-webkit-transform: scale(2, 2);transform: scale(2, 2);}



Затем мы добавим CSS свойства для нашего класса grow, который должен изменить размер изображения в отношении 200 по осям X и Y. Смысл от этих действий мы увидим позже, когда будем писать JavaScript код.Код:#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;}

. В основном стили, которые мы будем добавлять здесь будут являться настройкой наших элементов.

Тогда для нашего цветка мы настроим масштаб, а затем добавим некий переход, чтобы добавить плавности.plantobjи vaseobj Затем стилизуем Код:#container {position: relative;margin: 0px auto;display: block;width: 300px;height: 350px} Теперь в нашем CSS мы должны настроить свойства id container и задать им свойства width и hight.Код: .vaseobj и plantobj а затем зададим plant.svg id id container,, чтобы определить путь к файлам. Это необходимо так как data мы будем использовать для достижения необходимого эффекта по средствам JavaScript. Мы также обернем все в div и дадим ему data использую src. Вы скорее всего заметили, что я вместо plant.svg и vase.svg, мы вставим два файла Используя тег Для последнего этапа нашего урока, я использую два векторных элемента. Первым из которых является ваза, а вторым цветок. Цель анимации состоит в том, чтобы при наведении мышки на вазу вырастал цветок.

• 
  snapsvg
  svgjs
  Raphael

Итог

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

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

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