CSS-спрайты не новы. С тех пор, как в 2004 году он был популяризирован в A List Apart , скромный спрайт стал основным приемом во многих инструментах веб-разработчика. Но хотя преимущества скорости, предоставляемые спрайтами, хорошо понятны, их использование в современной веб-анимации редко обсуждается. Принцип остается тем же: объединить несколько изображений в одну «основную» графику, из которой одновременно отображаются только выбранные части.
В этой статье мы рассмотрим простой способ создания адаптивных анимаций CSS-спрайтов, которые являются легкими, удобными для мобильных устройств и даже интерактивными. Вам не нужно никакого специального графического программного обеспечения, только немного ноу-хау CSS и JavaScript. Давайте начнем.
Здание Спрайт
Спрайты происходят из мира видеоигр, поэтому мы отдадим должное их наследию и оживим Рю из Street Fighter . Излишне говорить, что все произведения искусства принадлежат Capcom .
Нам нужно объединить каждый кадр нашей анимации в одно изображение. Существуют десятки инструментов, помогающих создавать спрайты, многие из которых даже создадут для вас сопроводительную таблицу стилей. Встроенные в Compass функции спрайтов невероятно мощны, и SpritePad является хорошим примером веб-генератора. Для наших целей, однако, простой подход командной строки работает отлично.
ImageMagick , «швейцарский армейский нож» обработки изображений, является бесплатным инструментом с открытым исходным кодом для манипулирования изображениями, который идеально подходит для автоматизации задач, которые могут стать трудоемкими, например, комбинирование изображений. ImageMagick также доступен практически для каждой операционной системы. Пользователи Mac могут установить его через Homebrew , приверженцы Windows могут загрузить исполняемый установщик с официального сайта, а преданным Linux, вероятно, не нужно, чтобы я что-то объяснил.
Сохраните кадры анимации одинакового размера в папке в виде последовательности PNG. Разбейте терминал командной строки, перейдите ( cd ) в каталог, где хранятся ваши изображения, и выполните следующую команду:
convert *.png -append result-sprite.png
Эта команда указывает ImageMagick на вертикальную конкатенацию всех файлов .PNG в нашем каталоге (поскольку ‘*’ по сути является символом подстановки) в один полный спрайт с именем «result-sprite.png». Это рисунок, который мы будем применять в качестве background-image в CSS к элементу, который мы хотим анимировать, изменяя его положение для последовательного циклического перемещения по каждому кадру.
Чистая CSS анимация
Мы начнем просто и оживим наш спрайт с помощью анимации ключевых кадров CSS3. Если вы не знакомы с основным синтаксисом, статья Луиса Лазариса о Smashing Magazine — очень хорошее введение. Мы собираемся анимировать вертикальное background-position нашего элемента от 0% до 100% (сверху вниз), открывая каждый кадр по очереди.
Разрешение анимации запускаться в одной непрерывной последовательности в соответствии с поведением по умолчанию выставит промежуточные кадры нашего спрайта и разрушит иллюзию. Однако с помощью функции steps() мы можем контролировать количество отображаемых ключевых кадров. Из-за того, что background-position работает при определении в процентах , нам нужно установить количество шагов на единицу меньше, чем общее количество кадров в нашей анимации.
Поэкспериментируйте со следующим CodePen, чтобы получить идею:
Обратите внимание, что мы определили width и height нашего элемента, чтобы точно соответствовать width одного кадра, чтобы избежать какого-либо кровотечения предыдущих или последующих кадров. Мы использовали сокращенную запись, чтобы установить для animation-iteration-count «бесконечное», а для animation-duration 3,5 секунды, в результате чего Рю будет выполнять свою комбинацию punch-kick-hadoken до конца времени.
Однако это далеко не идеально. Попробуйте изменить height элемента Ryu или применить к background-size спрайта, и эффект будет нарушен. Наш анимированный элемент еще не адаптивен и зависит от жестких пиксельных измерений.
Делать это Отзывчивым
Если мы хотим свободно изменить размер нашего анимированного спрайта, у нас есть два варианта. Ключом к обоим вариантам является зависимость нашего спрайта от согласованного соотношения сторон , а не от конкретного размера. Мы должны сохранить его пропорции для правильного масштабирования.
Первый вариант — установить background-size нашего спрайта равным 100% ширины нашего элемента, преобразовать width и height нашего элемента из пикселей в ems, а затем изменить базовый font-size как требуется. Это позволит достичь желаемого эффекта и может быть подходящим для большинства целей, но не приведет к истинной текучести.
Наш второй вариант заключается в том, чтобы воспользоваться преимуществами техники фиксированного соотношения сторон CSS от Marc Hinse , которая использует процентное заполнение псевдоэлемента для поддержания пропорций элемента в любом размере. Этот прием используется в демонстрации ниже, чтобы дать нашему спрайту ширину жидкости 70%. Отзывчивый Рю.
Это легкий и удобный для мобильных устройств метод достижения эффекта покадровой анимации. Поддержка браузером CSS-анимации превосходна, единственным ограничивающим фактором является синтаксис ключевого кадра CSS3. Включите соответствующий префикс -webkit- vendor, и эффект работает во всех современных браузерах, включая IE10 и выше.
JavaScript анимация
Что если нам нужно более точное управление нашей анимацией, чем это обычно возможно с помощью синтаксиса ключевых кадров CSS3? Допустим, что вместо одной зацикливающейся анимации мы хотим включить несколько спрайтов в сложную сцену и связать триггеры и функции синхронизации с положением полосы прокрутки?
Чтобы это было возможно, нам нужно будет анимировать наши спрайты с помощью JavaScript, используя всю мощь анимационной платформы GreenSock, используя превосходную библиотеку Яна Паепке ScrollMagic . Для тех, кто не знаком с этой мощной комбинацией, официальные демоверсии ScrollMagic — отличное место для начала.
Это мощные инструменты, на которых написана целая серия руководств. Таким образом, вместо того, чтобы вдаваться в подробности работы со ScrollMagic, мы вместо этого продемонстрируем некоторые из мощных функций синхронизации, доступных нам сейчас. Основные принципы спрайта остаются идентичными нашей более ранней анимации чистого CSS.
Во-первых, давайте запустим анимацию продолжительностью 2 секунды в определенной позиции прокрутки. Он должен заканчиваться в последнем кадре и воспроизводиться в обратном порядке, когда пользователь прокручивает назад (даже если это происходит в середине воспроизведения). Мы будем придерживаться темы видеоигр и будем использовать спрайт из классической стратегии Westwood Studios Red Alert , который теперь выпущен в качестве бесплатного программного обеспечения.
Обратите внимание, что мы используем вышеупомянутый метод определения размера на основе em; попробуйте изменить font-size чтобы масштабировать спрайт вверх и вниз. Мы определили анимацию TweenMax.to , установив целевое значение вертикальной background-position нашего элемента на 100%, и использовали метод SteppedEase для достижения требуемого покадрового эффекта.
Давайте сделаем еще один шаг вперед. Мы синхронизируем нашу анимацию с позицией прокрутки, используя полосу прокрутки, как элемент управления очистки воспроизведения.
Спрайт остается в фиксированной позиции на время анимации, которая теперь контролируется поведением прокрутки пользователя. Чтобы добиться этого эффекта, мы дали нашему ScrollMagic.Scene duration 1500px и использовали метод setPin чтобы исправить родительский элемент для всей сцены. Для более подробного ознакомления с этими методами обязательно ознакомьтесь с превосходной документацией на веб-сайте ScrollMagic.
Поддержка браузером этих спрайтовых анимаций на основе JavaScript даже лучше, чем в нашей версии с чистым CSS. ScrollMagic и GreenSock поддерживаются во всех современных браузерах, включая IE 9+ , с префиксами и несоответствиями браузера, которые обрабатываются автоматически. Мобильная поддержка тоже хороша; эти методы работают на iOS 8+ без особых обходных путей, включая перерисовку на лету и без потерь в скорости прокрутки.
Вывод
Мы еле поцарапали поверхность того, что стало возможным благодаря сочетанию адаптивных CSS-спрайтов с продвинутой анимацией прокрутки, но я надеюсь вдохновить других начать эксперименты. Я хотел бы видеть любые сайты, которые используют варианты методов, описанных выше. Вы можете взглянуть на личный проект, который первым побудил меня исследовать спрайт-анимацию — поклонники видеоигр могут заметить закономерность.
Наконец, по словам Рэйчел Нэборс , «пожалуйста, анимируйте ответственно». То, что что-то можно оживить, не обязательно означает, что так и должно быть. И если вы решите оживить, делайте это осознанно, красиво и целенаправленно.
Спасибо за прочтение!