1. Новые покупки

    21.07.2017: Как за 8 недель запустить Бизнес на Амазоне с помощью AliExpress - ALI Academy

    21.07.2017: Отборная Информатика - Computer Science Distilled

    20.07.2017: Быстрые деньги на Дропшиппинге - Валеев

    20.07.2017: Секреты хакеров! Полный курс по кибербезопасности - Udemy (2017)

    19.07.2017: INSTASOFT 4.0.9.5

    19.07.2017: Фотошоп за 7 дней. Дизайн и реклама в малом бизнесе - Степаненко (2015)

    18.07.2017: Невероятно эффективная работа с VKPRO закрытый онлайн тренинг от Алексея Евстропова

    17.07.2017: Абсолютно белая тема постоянного заработка от 40к в месяц

    15.07.2017: InstaTool Pro 1.6.9.7

    14.07.2017: От 130 000 Зарабатывай сидя! (белая схема)

    13.07.2017: Key Collector 3.7.4.2

    12.07.2017: Самурай WordPress SEO: Rocket Edition (Новинка)

    12.07.2017: Обучающий видеокурс по Slider Revolution

    12.07.2017: [Muse] Доступ на год к сайту шаблонов Qooqee.com

    12.07.2017: Основы дизайна интерьеров - Highlights (2017)

    12.07.2017: Дизайн вконтакте

    11.07.2017: Трёхдневный воркшоп по настройке авторассылок ВК - Ходченков (2017)

    10.07.2017: Инвесторантье. Покупка конфискованного имущества

    09.07.2017: Обучающий и интенсивный онлайн курс от ведущей иммиграционной компании Канады

    08.07.2017: Запасные части. Энциклопедия бизнеса Волгин В.В

    07.07.2017: Подписка на субботние выпуски газеты Коммерсант (с объявлениями о банкротстве) на 1 год

    05.07.2017: TheBrain - ваша персональная база знаний

    01.07.2017: Торги по банкротству по методу Шерлока Холмса 2016, 2017

    24.06.2017: [Бизнес Молодость] Выбор ниши 2017

    24.06.2017: Вебинар по инфосайтам

    21.06.2017: Базовый курс по стёбу [Второй Поток] - klinsman96 (2017)

    13.06.2017: Как уличить жену в измене - Женские секреты

    08.06.2017: сервис по лендингу

    07.06.2017: Финансовая грамотность - Станислав и Глеб Хрянины (2017)

    05.06.2017: Контрактные автозапчасти - Гордеев

    02.06.2017: Pro Context 2017. Convert Monster.

    28.05.2017: Белая схема. заработок полностью на автомате!

    17.05.2017: Музыка для видео и слайд-шоу + переводы уроков по видео

    07.05.2017: Самый Легкий И В Тоже Время Самый Сложный Бот Для Понимания Соцсетью Вконтакте Vkontakte Superbot

    06.05.2017: Как зарабатывать от 50000 руб. сидя 4 часа в неделю в ВКонтакте - Жуковский (2017)

    03.05.2017: Пассивная схема заработка

    28.04.2017: ЖИВОЙ МАРАФОН! 10 Денежных Дней С Ксенией Шокиной-Шокина (2017)

    09.04.2017: Эффективное бизнес-планирование

    08.04.2017: Виртуальная ШКОЛА СКАЗКОТЕРАПИИ

    27.03.2017: [Lynda]Основы композитинга в After Effects: Ротоскопирование и обработка краев

    24.03.2017: Методика слива трафика. Арбитраж (Бурж и Ру)

    17.03.2017: Perfex CRM - мощнейшая crm и erp система на Codecanyon (1.6.2)

    14.03.2017: Поток клиентов из Инстаграм: Интенсив - Александра Гуреева (2016)

    06.03.2017: Как полностью раскрыть потенциал растений - Курдюмов

    03.03.2017: Закрытый профкурс кратчайший путь к профессионализму в трейдинге

    25.02.2017: Travelling with Hugh. Курс о путешествиях. Уроки с нейтивом

    21.02.2017: Бизнес форсаж. Н. Закхайм (2015)

    21.02.2017: Конструктор адаптивных email сообщений

    21.02.2017: Видео курс PRO 2.0. Партизанский маркетинг. 2017.

    21.02.2017: [Digital Tutors] Sculpting Male and Female Faces in ZBrush [ENG-RUS]

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

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

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

  1. Gustav

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

    Сообщения:
    4.307
    Симпатии:
    14.980
    Создаем 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 нравится это.