Создание интерактивной инфографики при помощи SVG и CSS анимаций

На сегодняшний день, многие современные браузеры имеют поддержку формата SVG. Если вы еще незнакомы с SVG, он расшифровывается как Scalable Vector Graphics (масштабируемая векторная графика). В отличие от форматов растровых изображений таких как PNG, JPG или GIF, векторная графика, в файлах SVG, полностью масштабируется для любого размера экрана и при любом разрешении без потери качества. В большинстве случаях, SVG файлы будут иметь меньший размер, это сопутствует более быстрой загрузке.

Сложность

Но одна из действительно интересных вещей, которые не понимают некоторые разработчики, то что SVG основан на спецификации XML, а это -  очень простая разметка. Это означает, что мы можем получить доступ и управлять графикой и элементами в SVG файле, используя технологии CSS и JavaScript, с которыми веб-разработчики уже знакомы.

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

Подготовка SVG файлов

Есть множество способов создать инфографику, например можно написать SVG графику "вручную", для более сложной графики мы будем использовать специальное программное обеспечение для редактирования векторной графики, с экспортом SVG формата. Одна из самых популярных программ среди разработчиков это - Adobe Illustrator, но есть и другие бесплатные программы с открытым исходным кодом, такие как Inkscape, который возможно, даже больше подойдет для реализации ваших целей.

Выбор программного обеспечения я оставлю на ваше усмотрение, только убедитесь, чтобы была возможность работать с группами объектов, а также была функция именования группы (присвоение идентификатора). Это позволяет нам организовывать наш SVG в надлежащую иерархию, чтобы мы могли позже получить доступ по мере необходимости использования CSS и/или JavaScript. У и Illustrator и Inkscape есть все необходимые функции, выбор нескольких графических элементов и добавление их в группы из главного меню.

Любому объекту или группе можно присвоить уникальное имя. Оно будет служить в качестве идентификатора группы или объекта, поэтому избегайте пробелов или специальных символов.

В Illustrator менять названия элементов можно при помощи палитры слоев. Просто выберете объект в палитре, который хотите назвать, дважды щелкните по нему и введите идентификатор. В Inkscape используйте панель Object > Object Properties, чтобы присвоить идентификатор объекту или группе. Также это можно сделать в панели Edit > XML Editor, которая имеет еще больший функционал и даже имеет возможность присвоить классы, а не просто идентификаторы.

В нашем примере, после того как мы сохраним SVG файл и откроем его в текстовом редакторе, у него будет следующая структура:

<g id="background"> 
      <g id="bg-lines-left"> <!-- левые фоновые линии --> </g> 
      <g id="bg-lines-right"> <!-- правые фоновые линии -->  </g> 
  </g> 
  <g id="logo">  <!-- логотип -->  </g> 
  <g id="quote"> 
      <g id="quote-left-brace"> <!-- левая фигурная скобка -->  </g> 
      <g id="quote-right-brace"> <!-- правая фигурная скобка --> </g> 
      <g id="quote-text"> <!-- текст в скобках --> </g> 
  </g> 
  <g id="timeline"> 
      <g id="coffee"> 
          <rect id="coffee-bar" /> 
          <polyline id="coffee-arrow" /> 
          <g id="coffee-time"> <!-- временной текст--> </g> 
          <g id="coffee-badge"> 
              <circle id="coffee-circle" /> 
              <g id="coffee-title">  <!-- заголовок --> </g> 
              <g id="coffee-details">  <!-- иконка, описание --> </g> 
          </g> 
      </g> 
      <g id="design"> 
          <rect id="design-bar" /> 
          <polyline id="design-arrow" /> 
          <g id="design-time">  <!-- временной текст--> </g> 
          <g id="design-badge"> 
              <circle id="design-circle" /> 
              <g id="design-title">  <!-- заголовок --> </g> 
              <g id="design-details">  <!-- иконка, описание --> </g> 
          </g> 
      </g> 
      <g id="build"> 
          <rect id="build-bar" /> 
          <polyline id="build-arrow" /> 
          <g id="build-time"> <!-- временной текст--> </g> 
          <g id="build-badge"> 
              <circle id="build-circle" /> 
              <g id="build-title">  <!-- заголовок --> </g> 
              <g id="build-details">  <!-- иконка, описание --> </g> 
          </g> 
      </g> 
      <g id="complain"> 
          <rect id="complain-bar" /> 
          <polyline id="complain-arrow" /> 
          <g id="complain-time">  <!-- временной текст--> </g> 
          <g id="complain-badge"> 
              <circle id="complain-circle" /> 
              <g id="complain-title">  <!-- заголовок --> </g> 
              <g id="complain-details">  <!-- иконка, описание --> </g> 
          </g> 
      </g> 
      <g id="beer"> 
          <rect id="beer-bar" /> 
          <polyline id="beer-arrow" /> 
          <g id="beer-time"> <!-- временной текст--> </g> 
          <g id="beer-badge"> 
              <circle id="beer-circle" /> 
              <g id="beer-title">  <!-- заголовок --> </g> 
              <g id="beer-details">  <!-- иконка, описание --> </g> 
          </g> 
      </g> 
</g> 

Как мы видим в разметке SVG, каждый тег g указывает на новую группу объектов, которые могут использоваться в других группах. Конечно, при создании SVG, необходимо присвоить идентификатор каждому объекту/группе, благодаря этому у вас будет удобный доступ в CSS или JavaScript, а также будет проще распознать при разборе разметки.

Загрузка SVG в HTML при помощи JavaScript

HTML

Есть несколько способов встроить SVG в HTML. Используя тег img, embed, или при помощи CSS свойства background-image. В нашем проекте, нам будет нужен доступ DOM в SVG, таким образом, чтобы встроить SVG мы используем возможности HTML5 и загрузим его непосредственно на нашу страницу, используя jQuery.

Во-первых, создадим основной контейнер в HTML документе:

<div id="stage">  <!-- Fallback Text Content can go here --> </div>

JavaScript

Затем используя jQuery.load, мы загрузим SVG файл в контейнер #stage и зададим для него класс svgLoaded, который мы будем использовать позже, чтобы инициировать нашу вводную анимацию:

$(function(){
 
    $("#stage").load('interactive.svg',function(response){
 
        $(this).addClass("svgLoaded");
         
        if(!response){
            // Ошибка загрузки SVG!
            // Убедитесь, что работаете на веб-сервере или localhost!
        }
 
    });
});

Важно: Мы загружаем SVG используя JavaScript, чтобы получить доступ к его DOM. Chrome (и возможно другие браузеры) не позволяет сделать это локально, а только из протокола HTTP для соображений безопасности. Таким образом, если у Вас есть проблемы с загрузкой SVG, убедитесь, что тестируете на веб-сервере или работаете на localhost.

CSS

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

#stage {
    width: 1024px;
    height: 1386px;
}

Моделирование элементов SVG: Установка transform-origins

Кадры анимации элементов SVG, будут находится в свойстве transform-origin. По умолчанию все преобразования к любому элементу в нашем SVG происходят от (0px, 0px). Для всех элементов SVG, которые мы хотим преобразовать, мы должны установить свойство transform-origin относительно холста SVG. Источник будет отличаться для каждого элемента в зависимости от требуемого эффекта/анимации, но в большинстве случаев он будет равен центральной точке, в которой расположен сам элемент. Это покажется довольно утомительным процессом, но достаточно простым в исполнении, копируя координаты из векторного редактора.

#coffee { 
    transform-origin: 517px 484px;
}
#coffee-badge { 
    transform-origin: 445px 488px;
}
#coffee-title { 
    transform-origin: 310px 396px;
}
#coffee-details { 
    transform-origin: 311px 489px;
}
 
#design { 
    transform-origin: 514px 603px;
}
#design-badge { 
    transform-origin: 580px 606px;
}
#design-title { 
    transform-origin: 712px 513px;
}
#design-details { 
    transform-origin: 710px 620px;
}
 
#build { 
    transform-origin: 511px 769px;
}
#build-badge { 
    transform-origin: 445px 775px;
}
#build-title { 
    transform-origin: 312px 680px;
}
#build-details { 
    transform-origin: 310px 790px;
}
 
#complain { 
    transform-origin: 512px 1002px;
}
#complain-badge { 
    transform-origin: 586px 1000px;
}
#complain-title { 
    transform-origin: 718px 921px;
}
#complain-details { 
    transform-origin: 717px 1021px;
}
 
#beer { 
    transform-origin: 513px 1199px;
}
#beer-badge { 
    transform-origin: 444px 1193px;
}
#beer-title { 
    transform-origin: 313px 1097px;
}
#beer-details { 
    transform-origin: 316px 1202px;
}

Применение основных преобразований

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

[id$=badge] { /* любой элемент имеющий в конце идентификатор “badge” */
    transform: scale(0.5, 0.5);
}
[id$=title] { 
    transform: scale(1.8) translate(0px, 48px);
}
[id$=details] { 
    transform: scale(0, 0);
}

Добавление эффектов при наведении

Мы выбираем элементы в группе на временной шкале, которые имеют суффиксы badge и details, преобразуем их назад к исходной позиции. Установим transition 0.25s для красивого анимированного эффекта.

#timeline > g:hover [id$=badge], #timeline > g:hover [id$=details] {
    transform: scale(1, 1);
}
#timeline > g:hover [id$=title] {
    transform: scale(1) translate(0px, 0px);
}
[id$=badge], [id$=title], [id$=details] {
    transition: transform 0.25s ease-in-out;
}

Вводная анимация

Для начала создадим некоторые ключевые кадры, которые позволят нам анимировать различные свойства CSS:

@keyframes left-brace-intro {
    0% { 
        transform: translateX(220px);
        opacity: 0;
    }
    50% { 
        opacity: 1;
        transform: translateX(220px);
    }
    100% { 
        transform: translateX(0px);
    }
}
@keyframes right-brace-intro {
    0% { 
        transform: translateX(-220px);
        opacity: 0;
    }
    50% { 
        opacity: 1;
        transform: translateX(-220px);
    }
    100% { 
        transform: translateX(0px);
    }
}
@keyframes fade-in {
    0% { 
        opacity: 0;
    }
    100% { 
        opacity: 1;
    }
}
@keyframes grow-y {
    0% { 
        transform: scaleY(0);
    }
    100% { 
        transform: scaleY(1);
    }
}
@keyframes grow-x {
    0% { 
        transform: scaleX(0);
    }
    100% { 
        transform: scaleX(1);
    }
}
@keyframes grow {
    0% { 
        transform: scale(0, 0);
    }
    100% { 
        transform: scale(1, 1);
    }
}

Создание анимации

Так как необходимо, чтобы наша анимация запускалась после загрузки SVG, мы используем селекторы на основе класса svgLoaded.

Чтобы разместить хорошую последовательность анимации, мы скорректируем задержку анимации и установим режим animation-fill-mode: backwards так, чтобы анимация была приостановлена на 0% ключевом кадре во время задержки анимации.

.svgLoaded #logo { 
    animation: fade-in 0.5s ease-in-out; 
}
.svgLoaded #quote-text { 
    animation: fade-in 0.5s ease-in-out 0.75s;
    animation-fill-mode: backwards; 
}
.svgLoaded #quote-left-brace { 
    animation: left-brace-intro 1s ease-in-out 0.25s;
    animation-fill-mode: backwards; 
}
.svgLoaded #quote-right-brace { 
    animation: right-brace-intro 1s ease-in-out 0.25s;
    animation-fill-mode: backwards; 
}
.svgLoaded #background { 
    animation: grow-y 0.5s ease-in-out 1.25s;
    transform-origin: 512px 300px;
    animation-fill-mode: backwards; 
}
.svgLoaded #background > g { 
    animation: grow-x 0.25s ease-in-out 1.75s;
    animation-fill-mode: backwards; 
}
.svgLoaded #background > g:last-of-type { 
    transform-origin: 458px 877px; 
}
.svgLoaded #background > g:first-of-type { 
    transform-origin: 563px 877px; 
}
.svgLoaded #coffee, .svgLoaded #design, .svgLoaded #build, .svgLoaded #complain, .svgLoaded #beer { 
    animation: grow 0.25s ease-in-out;
    animation-fill-mode: backwards; 
}
.svgLoaded #coffee { 
    animation-delay: 2s; 
}
.svgLoaded #design { 
    animation-delay: 2.25s; 
}
.svgLoaded #build { 
    animation-delay: 2.5s; 
}
.svgLoaded #complain { 
    animation-delay: 2.75s; 
}
.svgLoaded #beer { 
    animation-delay: 3s; 
}

Веб шрифты

Так как мы используем нестандартные шрифты в нашем SVG, мы должны подключить их в нашу веб-страницу, чтобы вывести на экран должным образом. Для добавления важно ввести корректное имя шрифта, которое использовалось в SVG. Откроем наш файл SVG файл в текстовом редакторе и найдем текстовый слой и найдите свойство font-family:

<!-- ... --> 
  <text font-family="'LeagueGothic'" font-size="28">12PM</text> 
<!-- ... -->

В нашем демонстрационном SVG мы использовали шрифт ‘LeagueGothic’. Таким образом, мы должны определить webfont в нашем CSS.

@font-face {
    font-family: 'LeagueGothic';
    url("../fonts/league-gothic/league-gothic.eot.woff") format("woff");
 }
ДЕМО СКАЧАТЬ

 

Перевод статьи Interactive Infographic with SVG and CSS Animations

Тэги: transitiontransformSVG

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.