1. Получи максимум инфопродуктов, оформи подписку всего за 295 рублей!
    Скрыть объявление

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

Тема в разделе "Интернет, Компьютеры и IT-новости", создана пользователем Gustav, 13 мар 2016.

  1. Gustav

    Gustav Команда форума Администратор

    Сообщения:
    9.427
    Симпатии:
    5.704
    Создаем SVG анимацию, используя CSS и JavaScript

    SVG.jpg

    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, которые мы будем использовать в процессе урока.

    save-as.jpg

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

    save-as2.png

    Затем всплывет окно, удостоверьтесь, что у вас выбран 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’ы.

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

    .
     
    Последнее редактирование: 13 мар 2016
    wakariio и skipper47 нравится это.

Загрузка...
Похожие темы Форум Дата
Скачать Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5. 4-е издание - Никсон Книги, литература 26 ноя 2016
Скачать Создаём аккаунт вк БЕЗ ПРИВЯЗКИ НОМЕРА! (Работает) Социальные сети 17 ноя 2016
Скачать ФОРМУЛА ИНФО-ХИТА - Создаем собственный инфопродукт - Загородников Бизнес, маркетинг и менеджмент 28 авг 2016
Чтиво Создаем очень много почт (mail.ru) Разное 19 июн 2016
Скачать Моя жизнь мои правила. Создаём себя заново. Марафон - Новикова Психология 28 май 2016
Скачать Создаем адаптивные сайты как ГУРУ-WEBFLOW Создание сайтов 20 май 2016
Скачать Вебинар «Node.js Express: Создаём веб-приложение быстро» (2016) Администрирование и программирование 14 май 2016