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

    26.04.2018: Пресеты LR Сергей Кабанков и Анюта Рай

    25.04.2018: Обучение в мастер-группе по ударной раскрутке сайтов - Новосёлов (2018)

    25.04.2018: ИП для Интернет Предпринимателя - Авторская (2017)

    24.04.2018: Денежный магнит - Бахтиозина (2018)

    24.04.2018: Пассивная схема доход от 75 000 в месяц

    24.04.2018: Копирование крупных сайтов - Авторская (2018)

    24.04.2018: Страх подхода — решение для интровертов - Джеймс Маршалл (2018)

    24.04.2018: Магия Благополучия - Бахтиозина (2017)

    24.04.2018: Алгоритм счастливой семьи - Бахтиозина (2017)

    24.04.2018: Прибыльная стратегия продаж на Amazon – Online Arbitrage (2017)

    24.04.2018: WordPress для верстальщика - Исламов (3.2018)

    23.04.2018: Юмор Начало 2.0 Развитие чувства юмора - Павел Воля (2018)

    23.04.2018: Специалист по трафику, трафик-менеджер - Convert Monster (2018)

    23.04.2018: Еnvаtо Еlеmеnts - слив подписки 2017 [1,3 Терабайта годноты]

    22.04.2018: Нейро-мио-фасциальные манипуляции в комплексной мануальной терапии - Сапир (2017)

    22.04.2018: [SilverStone] Имитация камня

    21.04.2018: Опционы На Старт! - Пурнов (2017)

    21.04.2018: Видео Омоложение - Эрик Томпсон (обновлённая версия 2018)

    21.04.2018: [Udemy.com] Взламываем сайты / Тестирование на проникновение с нуля - Все 7 частей!

    21.04.2018: АНИМАЦИОННЫЙ ВИДЕО-ПРОРЫВ 2.0 - Сергей Панферов

    21.04.2018: Бизнес молодость "Метаморфозы" Базовый курс

    20.04.2018: [НЛП] Архетипы - Чекчурин, Парханович (2018)

    20.04.2018: Инженер тендерного отдела - Черняк на Udemy (2018)

    19.04.2018: Схема пассивного заработка от 800р в сутки с одного потока (2017)

    17.04.2018: Курс Максима Солдаткина по веб-дизайну и UX/UI с трудоустройством Дизайнер 2.0

    16.04.2018: Взламываем сайты / тестирование на проникновение с нуля - часть 2 из 7

    15.04.2018: EdmarketConf - конференция по онлайн-образованию (2018)

    14.04.2018: Монетизация Вконтакте 2.0 - Сычёв (2018)

    14.04.2018: Секреты мужской психологии - Бахтиозина Татьяна (2016)

    13.04.2018: ИНСТАКУРС 6: С НУЛЯ ДО ПРОФИ - Делай деньги (2018)

    13.04.2018: [Претекст] 70 книг: продажи, управление, влияние, бизнес, психология, маркетинг, коучинг

    12.04.2018: Введение в BlockChain и смарт-контракты. За что программистам платят 150.000 рублей в месяц+ БОНУС

    12.04.2018: Деньги (крупные суммы) из товарных дорвеев - Авторская (2018)

    11.04.2018: Как зарабатывать на картинках от 1500 руб в день (2018)

    11.04.2018: [БМ-Бизнес Молодость] - Реальный YouTube 2018

    10.04.2018: Как запустить свою онлайн-школу с доходом 100 000 - 300 000 рублей в месяц - Борисов

    06.04.2018: Курс Моделирование женского платья (fashionelement)

    06.04.2018: Технология производства изделий из каменной крошки

    06.04.2018: Дорвеи для нищебродов - Заработок без вложений (2017)

    04.04.2018: Магия сексуальности (интенсив, пакет Жрица) - Мирная (2017)

    04.04.2018: Английский. Живая Разбериха - Счастливая (2017)

    03.04.2018: Рождественская раздача - 45 вебинаров! - Бауман

    01.04.2018: Основы блокчейн - Pluralsight (Полный перевод 2018)

    30.03.2018: Сценарии жизни людей - Клод Штайнер (2018)

    30.03.2018: Mirantique 2 - Достижение цели проще - KimEvolution (2018)

    29.03.2018: Магия Влюбления - Бахтиозина Татьяна (2016)

    29.03.2018: Как создавать статейники (mfc) на копипасте - Громов (2018)

    29.03.2018: Искусство таро. Полный курс - Попов

    28.03.2018: Курс разработки на блокчейне Ethereum, создания смартконтрактов и сайтов для ICO

    28.03.2018: Как зарабатывать с одного сайта более 300К рублей в месяц - Квасов (2018)

    28.03.2018: Содание организационной политики и накопление знаний в компании - Торбосов

    28.03.2018: Пошив базового гардероба с нуля

    26.03.2018: Фитнес модель за 4 месяца - 4.0 (2017, ФМ4М)

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

    25.03.2018: MemberShip под ключ (+ транскрибация) - Юрий Черников (2018)

    23.03.2018: Выйди из зоны комфорта - Брайан Трейси (Аудиокнига + Рабочая тетрадь)

    23.03.2018: Порно - Почему оно разрушит твою сексуальную жизнь - Джеймс Маршалл (2018)

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

    22.03.2018: Руководство по быстрому запуску и продвижению магазина на etsy (2018)

    22.03.2018: [OpenCart] МегаПак 79 шаблонов от Pavothemes +200 модулей и 20 шаблонов от opencart2x

    22.03.2018: Госзаказ от теории до контракта (2017)

    22.03.2018: Как разобраться со своим гневом? Семинар - Бурхаев (2018)

    20.03.2018: Backend Интернет-Магазина (Веб Разработка, 2 четверть) - GeekUniversity (2018)

    19.03.2018: 20 Золотых процессов на все случаи жизни - Саянов (2017)

    19.03.2018: Как женщине вернуть свою силу и энергию - Бахтиозина (2017)

    15.03.2018: Обучение торговли криптовалютам - Яковенко

    10.03.2018: Поставщики [Оптовик 8.0] Бизнес с Китаем от А до Я всего за 1 месяц

    10.03.2018: Курс по личной эффективности - Сорокин aka Smart (2017)

    08.03.2018: Схема по созданию кредитной карты на гражданина USA профит от 1000$

    08.03.2018: Vip Ключ Jackpot - Клинг

    04.03.2018: Секреты современного программирования - [email protected] (2018)

    03.03.2018: Как открыть свой обменный пункт электронных денег и криптовалют - Monta

    03.03.2018: Взламываем сайты / тестирование на проникновение с нуля - часть 3 из 7

    02.03.2018: Чёрная автоматика - Корнилов ака kote.ws (2018)

    02.03.2018: Изготовление сабвуферов Стелс - Туманов (2017)

    28.02.2018: Набор иконок в разных форматах - Font Awesome 5 PRO (Line, Solid, Regular)

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

    28.02.2018: Автонаполняемый новостной портал World news [ English ]

    28.02.2018: Большой Интенсив Александра Писаревского

    24.02.2018: Криптотрейдинг от практика ( CryptoInside )

    24.02.2018: Обучение Бизнесу с Китаем от 100$ к 10.000$ за 2 месяца коучинг 21 (Версия Платинум)

    23.02.2018: Рецепт от рака из Третьего Рейха , продления жизни и 25 других серьезных заболеваний 4/6

    19.02.2018: Криптобизнес 2.0

    18.02.2018: Design GYM 4.0 Курс Данила Фимушкина

    17.02.2018: Заработок криптовалюты с помощью двух сервисов - Якупов

    17.02.2018: Курс Максима Солдаткина по веб-дизайну и UX/UI с трудоустройством Дизайнер 2.0 (2-ой месяц)

    15.02.2018: Супердоходные сайты от А до Я - Деригина (2017)

    13.02.2018: Прибыльные ниши на Etsy - Федосенко (2017)

    12.02.2018: Аналитика данных. Онлайн-курс.

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

    04.02.2018: Instagram-аккаунт для роста вашего бизнеса (2017)New!

    29.01.2018: Интернет-профессия “Мастер анимационного видео”

    28.01.2018: Программирование - Дуйко (2018)

    27.01.2018: Как новичку с нуля начать зарабатывать от 7000 рублей в день.

    27.01.2018: [Практика] Уникальный белый заработок на услуге до 90 т.р. в месяц (2017)

    25.01.2018: Крипто-портфель на 2018 год

    25.01.2018: Факультет по Веб Разработке (1: Frontend ИнтМаг) - GeekUniversity (2017)

    24.01.2018: Ликвидация склада StratoПлана 2017

    21.01.2018: Как начать майнить и получать доход (от 1500 до 5000 рублей в месяц) со своей видеокарты

    20.01.2018: Порталы Судьбы - Клинг

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

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

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

  1. Gustav

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

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