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

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

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

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

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

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

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

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

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

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

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

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

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

Что у нас остается два спрайты в спрайт листа, и три SVG группы.На первый взгляд немного сложным:

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

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

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

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

Making It 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 мы хотим, чтобы разоблачить.Наш код теперь загрунтовать и готовы к анимации .

Time To Animate

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

[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 или поддержка анимации не будет отключена.Более подробная информация о том, что содержимое загружается в различных запросов СМИ можно найти в Тима Kadlec в дневнике Сообщение “ __36 Медиа Запрос | Asset Загрузка Results ¹¹ “.Для более детального анализа о том, как обеспечить несколько откаты для SVG с помощью picture элемент и polyfill, Сара Soueidan создал великий resource ¹² .

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

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

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

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

¹³

¹⁵

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → 17.03.2015 by coding.smashingmagazine.com