Несколько различных способов использования SVG спрайтов анимации

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

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

Техника # 1: Комплекс Отзывчивый анимации с Ан SVG Sprite

Большинство из нас уже используют спрайты для развития в течение длительного времени теперь: с помощью SVG в спрайт не новый бизнес.Это статья Илья Pukhalski 1 распадается реагирующие иконки Джо Харрисон technique 2 очень впечатляющим образом.В этом первом примере мы будем принимать еще один шаг дальше и использовать SVG спрайты не только иконографии, но для комплекса, анимация жидкости, а также .

Анимация вырос в популярности в этом году в связи с увеличением поддержки браузера для анимации и пользовательский опыт benefits 3 движения, который поддерживает содержание.Но до сих пор, у нас не думал о этой среде так же, у нас есть о так многих других концепций, которые меняют для различных размеров экрана.Даже если анимация комплекс, мы все еще можем получить максимальную отдачу от нашей деятельности доллара в то же время питание наших users’ потребностей.

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

Это то, что мы будем делать:

Смотрите Отзывчивый SVG спрайт анимации, который регулирует на основе Viewport 4 | __12 Сара Drasner ( @ sdras 27 22 5 ) на CodePen 28 23 6 .

В этом примере, я сделал современный день Книгу Келлс начальная illustration 7 показать сложную анимацию в контексте содержания страницы.Во-первых, я сделал три различных конструкций на основе малых, средних и крупных видовых.

Full Kells SVG animation design
Полный Келлс SVG дизайн анимация, показывающая конструкций для крупных, средних и малых видовых .

Я использую это как мою карту для остальной части проекта и относятся к нему часто.Другие люди планируют по-разному, работая в браузере или делает зарисовки.Выберите метод, который делает вас наиболее продуктивным.

Группировка и сушки Out

Теперь у нас есть карта, мы можем начать сокращение повторения элементов.Мы отождествляем формы, что первые и вторые версии имеют общего, поэтому мы можем использовать их.Класс может быть назначен на rect в фоновом режиме и так, что мы можем изменить заливку с помощью средств массовой информации запрос.Все объекты названы и сгруппированы для удобства, такие как “горы”, “мост” или “башни”.

Мы также поставить класс на всех подробных форм, таких как строительство мостов или окон канатов, которые будут удалены по размеру средней экранной.Любая группа, которая слишком разные, чтобы изменить, мы собрали в большой группе, что может скрыть или отобразить.Если первый иллюстрация kells_1, группа частности, второй иллюстрации является kells_2, и последнее kells_3.Для того, чтобы весь SVG же масштабируемую те же значения, контейнерных, в прошлом иллюстрация становится такой же размер, как первый .

То, что мы остались с двумя спрайты в спрайт листа, и три группы SVG.Впервые появляется немного сложным:

Grouped SVG Design ready for export
Сгруппированные SVG Дизайн готовы для экспорта .

Сейчас мы экспортируем его Питера Collingridge в SVG Editor 8 — или любой предпочтительный метод оптимизации SVG — сохранение группы, которая приносит размер файла до 18 КБ!Примечание: SVGO 9 также отлично подходит для оптимизации на основе терминалов, хотя я предпочитаю использовать редактора, потому что не толькоесть предварительный как SVG будет появляться, когда вы закончите, есть также теперь экспериментальном разделе редактирования работать.

Чтобы использовать этот инструмент, вы просто вырезать и вставить весь код SVG в текстовой, попал груз, и вы будете перенаправлены на вид оптимизируют.Я обычно стараюсь возможность выбора “Extreme”, чтобы посмотреть, если я могу уйти с ним, но, как правило, в конечном итоге, используя “Консерватор”, не снимая пробелы (из-за удобства чтения в то время как я работаю), и убедившись, что я сохраняюгруппами.Вот скриншот из настроек я обычно работаю.Пожалуйста, обратите внимание, что это зависит от проекта к проекту, и каждый имеет разные предпочтения .

svg-editor-preview-opt
Типовые настройки для комплексной экспорта SVG из SVG Editor .

Оптимизированы SVG находится встроенный в HTML (а не фон источник URL изображения), так что это легче animate __11 | | 10__10 .Принимая время, чтобы маркировать классы должным образом, мы можем теперь добавить CSS, которые будут изменять детали между крупными и средними размерами:

@media screen and ( max-width: 700px ) {
  .kells3 {
    display: block;
  }
  .background {
    fill: #93A600;
    opacity: 0.57;
  }
  .mid-hide { display: none; }
  .bridge { transform: translateX(15px); }
}

Создание Это Fluid

В этот момент ширина и высота будут удалены из SVG, и мы можем добавить в preserveAspectRatio="xMidYMid meet" (хотя это по умолчанию, так что это не является строго необходимым), чтобы сделать SVG жидкость.С этими изменениями, он будет регулировать по размеру контейнера вместо, который мы устанавливаем на основе процентах.Flex или любой другой контейнер реагировать будет работать здесь.

.initial { 
  width: 50%;
  float: left;
  margin: 0 7% 0 0;
}

Viewbox Trick

Существует одна загвоздка и вы, возможно, уже догадались.Даже если мы назначим нижний слой класса и спрятать его, будет пустой промежуток, где ViewBox по-прежнему приходится этом пространстве.Мы можем изменить Viewbox в SVG, чтобы показать только верхнюю часть:

viewBox="0 0 490 474" 

И что будет делать трюк … для двух более крупных версий.Маленький версия теперь закрыт, а ViewBox предоставляет что-то окно в другой части спрайта листа SVG, поэтому мы должны настроить его.Изменение Viewbox на основе переключения видовом, мы будем использовать немного JavaScript:

var shape = document.getElementById("svg");

// media query event handler
if (matchMedia) {
        var mq = window.matchMedia("(min-width: 500px)");
        mq.addListener(WidthChange);
        WidthChange(mq);
}
// media query change
function WidthChange(mq) {
        if (mq.matches) {
    shape.setAttribute("viewBox", "0 0 490 474");
    shape.setAttribute("enable-background", "0 0 490 474");
        }
        else {
    shape.setAttribute("viewBox", "0 490 500 500");
    shape.setAttribute("enable-background", "0 490 500 500");
        }
};

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

Время Для Animate

Если вы экспорта из Illustrator как я, это будет объяснить тот факт, что у вас есть много «гора» классы, “точечные” классы, и т.д., и количество их для вас: “гора”, “mountain_2_” итак далее.Хорошая вещь об именовании всех этих групп правильно, что мы можем последовательно использовать ту же анимацию по массивуспрайтов.Для целевой все «горных» классов, мы можем использовать CSS attributeStartsWith селектор (я изменил дефолт Иллюстратор идентификаторов классов)

[class^="mountain"], [class^="grass"] {
  animation: slant 9s ease-in-out infinite both;
  transform: skew(2deg);
}

Вы увидите здесь, что мы начинаем с transform установить на этом элементе: это держит ключевым кадрам анимации кратким.Анимация будет предположить, что 0% ключевой кадр соответствует начальному состоянию элемента;Все, что необходимо определить, чтобы создать очень сжатый цикл являются изменения в середине последовательности анимации .

@keyframes slant {
  50% { transform: skew(-2deg); }
}

Для точек и звезд, которые разделяют общую анимацию, мы заявляем, что один раз в @keyframes, но потом изменить сроки анимации для каждого из различных эффектов с минимальным кодом, как это возможно:

@keyframes blink {
  50% { opacity: 0; }
}

[class^="star"] {
  animation: blink 2s ease-in-out infinite both;
}

[class^="dot"] {
  animation: blink 5s -3s ease-in-out infinite both;
}

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

Конечно, мы также должны добавить наиболее распространенный видового мета тег:

  <meta name="viewport" content="width=device-width">

Чтобы получить наилучшую производительность и разгрузить работу в ГПУ (в частности, в Firefox), мы также должны аппаратно-ускорения любой элемент, который мы оживляющий.SCSS велика для этого, как я могу использовать подмешать:

@mixin accelerate {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000;
}

И добавить к все элементы с анимацией:

@include accelerate;

Обратная Compatibility

Если SVG или анимация не доступна, мы можем обеспечить обратную совместимость, добавив запасной вариант.В этом случае я использовал простой PNG, но вы также можете сделать что-то более сложным, если вы хотите.

<div class="fallback">
  <img src="fallback.png">
</div>

Мы добавляем в Modernizr — тонкий, пользовательские сборки для проверки SVG — и использовать крючки класса предоставляемых скрывать и отображать его в зависимости от уровня поддержки:

.svg .fallback {
  display: none;
}

.no-svg .fallback { 
  width: 50%;
  float: left;
  margin: 0 7% 0 0;
  img { width: 100%; }
}

К гнездованию изображение в div устанавливается в display:none, запасной актив не обращались, если SVG или поддержка анимации не отключена.Более подробная информация о том, что содержимое загружается в различных запросов СМИ можно найти в Тима Кадлец в блоге пост “ __38 Медиа Запрос | активами Загрузка Results 11 “.Для более детального анализа о том, как обеспечить несколько откаты для SVG с помощью picture элемент и polyfill, Сара Soueidan создал великий | resource__21 __28 | | 12__21 .

И что у вас есть: комплексный анимации с краткой код, который сдвигает на основе видового экрана .

Методы # 2 и # 3: Анимация по ключевым кадрам с Steps() и SVG Sprites

Методы 2 и 3 короче и связаны друг с другом.В этих примерах мы будем использовать SVG спрайт сделать шаг анимации.Из всех веб-методов анимации, анимации шаг наиболее близко напоминает старый ручной тяге CELанимация.Кел это сокращение от “целлулоид”, который является тип прозрачного листа.Этот материал был использован аниматоров Диснея, как и оригинальные Looney Tunes обратить на вершине своих предыдущих чертежах, тем самым определяя последовательность и создавая иллюзию движения.

Изображения были расстреляны на пленке, кадр за кадром.Каждый кадр состоит из нескольких различных слоев.Был, как правило, стационарные окрашены фон, используется статически всей сцене.Тело персонажа и соответствующие подвижные части тела были затем окрашены на отдельных слоях целлулоида, чтобы уменьшить повторение.

cel1-bk-preview-opt 13
Все фотографии чел анимационные, используемые с разрешения Джона Ганна.( Большая preview 14 )
cel2-guide-preview-opt 15
Эскиз, с гидами.( Большая preview 16 )
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Comments are closed.