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

    23.06.2018: Доходные инвестиции в автомобили - Ракша (2018)

    23.06.2018: Мастер группа 8: Бизнес на Amazon - Перезагрузка 2018

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

    23.06.2018: Финансовое благополучие - Гесс (2017)

    23.06.2018: Интенсив "Флиппинг на Amazon" - Данильченко (2018)

    22.06.2018: Ягдары – живые заготовки ягод на зиму - Мицкевич (2018)

    22.06.2018: Полный курс по Google AdWords - Сентищев (2018)

    22.06.2018: Система Профит Бандит (2018)

    22.06.2018: Методика "Хитёр бобёр" или как за сутки сделать 3 000 руб - Ларсан (2018)

    22.06.2018: Инфобизнес по Сапычу. Сотни тысяч на лучшем товаре в интернете.

    22.06.2018: Фабрика 2.0: обучающая on line программа по бизнесу с Китаем (Пакет ELITE) - Ковпак (2018)

    22.06.2018: Мастер-группа 7: Бизнес на Amazon - Перезагрузка (новый поток) 2017

    22.06.2018: Анонимность и безопасность в сети - Келевра (2018)

    21.06.2018: Марафон "Начало" - Пузат (март 2018)

    21.06.2018: Блогер: Быстрый старт - Бизнес Молодость (2018)

    20.06.2018: Совместный доступ к Joomla складчине

    20.06.2018: 900+ Премиальных Текстовых Эффектов для Photoshop - Gowasome (2018)

    20.06.2018: CPA Secret - американская система заработка на трафике - Васильев (2018)

    20.06.2018: Коучинг «Миллион на недвижимости без вложений!» - CheapHome, Якимова (2018)

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

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

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

    19.06.2018: Формула денег - Бахтиозина (2017)

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

    19.06.2018: Возвращение в здоровье и молодость - Бахтиозина (2016)

    19.06.2018: Автоматизированная воронка продаж - Тимофеев, Genius marketing

    19.06.2018: Быстрый набор клиентов из нового Яндекса (2018)

    19.06.2018: #SMM Как выжимать максимум из социальных сетей - Халилов (2018)

    19.06.2018: Системное СЕО продвижение в топ 10 за 3 месяца (2018)

    19.06.2018: Секреты и особенности SEO-оптимизации от эксперта - Кокшаров (2018)

    19.06.2018: Автоворонка в мессенджерах за 5 дней (2018)

    19.06.2018: Техника спиртовых чернил - Саша Рощин (2018)

    18.06.2018: Digital Downloads Pro - магазин цифровых товаров

    18.06.2018: Заработок от 15 000 рублей в месяц из дома - Филатова (2018)

    18.06.2018: Как продавать свои услуги - Рубштейн (2018)

    18.06.2018: Чат-боты как специальность - СмотриУчись (2018)

    18.06.2018: Разработчик чат ботов и архитектор продаж через мессенджеры - Ходченков (2018)

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

    18.06.2018: Оптовый бизнес под ключ: Картофель - Бахтин, Зайцев (2018)

    18.06.2018: Истинная магия - Матвеева (2018)

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

    18.06.2018: Друг, проснись! Ты - творец своей жизни - Шнейдеров-Детин (2017)

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

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

    18.06.2018: Ключ к реальному, ощущение энергий, как это было - kovarstvo (2018)

    18.06.2018: Пожизненная активация продуктов от Adobe

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

    17.06.2018: Заработок на ClickBank: от $50 в день на бесплатной рекламе - Максеев (2018)

    17.06.2018: Подписка на Creativemarket PRO (1 месяц)

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

    17.06.2018: Администрирование сетей Cisco: освоение за месяц - Пайпер (2018)

    17.06.2018: Простое создание анимационных видео для бизнеса - Home (2018)

    16.06.2018: Как внедрить СверхЭффективную систему оплаты труда, чтобы персонал трудился так же как и вы! - Граль

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

    15.06.2018: 5000 рублей на досках объявлений - Солнцева (2018)

    15.06.2018: Речь и воздействие - Гагин (2018)

    15.06.2018: Зарабатываем от 150 000 рублей в месяц на баунти кампаниях - Захарченко (2018)

    14.06.2018: Денежная машина ETSY. Бизнес на продаже цифровых товаров 2018

    14.06.2018: И снова про здоровье

    14.06.2018: Создание несокрушимой уверенности - Сибирцев (2018)

    13.06.2018: Убойный Ютуб зарабатываем 70$ в день на зарубежном трафике - Одэго (2018)

    13.06.2018: Star Passive Lead зарабаток - Сухомлин (2018)

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

    12.06.2018: Woocommerce пошагово (31+ МК как создать магазин)

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

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

    12.06.2018: Turbo кодинг - Авторская (2018)

    12.06.2018: Курс по заработку на малостраничных сайтах (2018)

    12.06.2018: Копирайтинг - Парабеллум, Крючков (2018)

    11.06.2018: Круиз к Деньгам от 1000 до 5000 рублей в день на полном автомате - Орлова (2018)

    11.06.2018: Реальный Директ 2.0 - Бизнес молодость (2018)

    11.06.2018: Твои 100000 рублей в месяц. Личное обучение заработку в соц. сетях - Котов, Пересыпкин (2018)

    11.06.2018: Как обольстить мужчину без слов - Родник (2017)

    10.06.2018: Исцеление с помощью осознаности - Самойлова (2018)

    10.06.2018: Все секреты успешного продвижения малостраничных инфо сайтов

    10.06.2018: Мастер рисованного видео - Преснецова (2018)

    10.06.2018: Текст, который продает товар, услугу или бренд - Шуст (2018)

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

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

    09.06.2018: Seo семантика для сайта - Пятко (2018)

    09.06.2018: Эволюция понимания денег 2.0 - Похабов, Сафронов (2018)

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

    08.06.2018: Хватайся и действуй: Как победить злую тётку под названием «Лень» и устроить самодисциплину

    07.06.2018: Коллекция из 1800 Премиальных Иконок - Becris (2017)

    07.06.2018: Все о тендерах 44-ФЗ и 223-ФЗ - Контур (2018)

    07.06.2018: WP AutoContent PRO - создайте полностью автоматические блоги на WP + 18 источников - Ankur (2018)

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

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

    06.06.2018: ТОП-5+5: Быстрые способы для летнего заработка - Максеев (2018)

    05.06.2018: Реальный способ зарабатывать на рассылках до 100 000 рублей в месяц - Flixmail (2018)

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

    04.06.2018: Властелин Ютуба или как получить свой процент от чужих видео на Ютубе - Уильямс (2018)

    03.06.2018: Merch by Amazon - Прибыльный бизнес на футболках с мин. вложениями

    02.06.2018: Как выгодно заказать iphone на Ebay - Авторская (2018)

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

    01.06.2018: Как покупать акции. Практическое руководство - Хачатрян (2018)

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

    01.06.2018: Женщина на миллион - Родник (2017)

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

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

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

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

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

  1. Gustav

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

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