CSS спрайты не новинка. С момента популяризации в A List Apart в 2004 году, скромный спрайт стал основным методом во многих инструментариях веб-разработчиков. Но в то время как преимущества скорости, обеспечиваемые спрайтами понятны, их использование в современной веб-анимации редко обсуждается. Принцип остается тем же: объединить несколько изображений в одну «главную» графику, из которой только отобранные участки отображаются одновременно.
В этой статье мы рассмотрим простой способ создания адаптивных анимационных CSS спрайтов, которые мало весят, подходят для мобильных устройств, а также являются интерактивными. Вам не нужно никакого специального графического программного обеспечения, только немного CSS и JavaScript ноу-хау. Давайте начнем.
Создание спрайта
Спрайты возникли из мира видеоигр, так что нужно отдать должное их наследию и анимации Рю из Street Fighter. Излишне говорить, что все произведения искусства принадлежит Capcom.
Нам необходимо объединить каждый кадр нашей анимации в одно изображение. Есть десятки инструментов для помощи создания спрайтов, многие из которых даже образуют сопутствующую таблицу стилей для вас. Встроенные спрайтинг функции компаса – мощные, и 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 keyframe animation. Если вы не знакомы с основным синтаксисом, статья Луи Лазарис на Smashing Magazine введет вас в курс дела. Мы собираемся анимировать background-position нашего элемента от 0% до 100% (сверху вниз), выставляя каждый кадр поочередно.
Позволив анимации стать одной непрерывной последовательностью, как по умолчанию, появятся промежуточные кадры спрайтов и иллюзия разрушится. Однако, помощью функции steps(), мы можем контролировать количество изображенных ключевых кадров. Из-за способа работы background-position, при определенных в процентах, мы должны установить ряд действий, чтобы получилось на один кадр меньше, чем общее количество кадров в нашей анимации.
Эксперимент со следующим CodePen, чтобы получить представление:
Обратите внимание, что мы определили width и height нашего элемента для точного совпадения с данными одного кадра, чтобы избежать просочения предшествующих или последующих кадров. Мы использовали сокращенное обозначение для установки animation-iteration-count до “бесконечный” и animation-duration до 3,5 секунд, в результате чего Рю будет проводить сво удар со комбинацию ударов до конца времен.
Это далеко от совершенства, однако. Попробуйте изменить height нашего элемента Рю, или применить background-size к нашему спрайту, и эффект будет ломаться. Наш анимированный элемент не адаптирован, и зависит от стойких пиксельных размеров.
Адаптирование
Если мы хотим свободно изменять размер анимированного спрайта, у нас есть два варианта. Ключ к обоим вариантам – зависимость нашего спрайта от постоянной пропорции, а не конкретного размера. Мы должны сохранять пропорции для правильного масштабирования.
Первый вариант – установить background-size нашего спрайта до 100% от ширины нашего элемента, конвертировать width и height нашего элемента из пикселей в ems, а затем изменить базовый font-size, как требуется. Это позволит достичь желаемого эффекта, и может быть пригодно для большинства целей, но не приведет к истинной текучести.
Наш второй вариант – воспользоваться фиксированными пропорциями чистого CSS Marc Hinse. Этот трюк используется в демо ниже, чтобы дать нашему спрайту ширину жидкости 70%.
Это легкий метод и он подходит для мобильных устройств, помогает достичь адаптивного покадрового эффекта анимации. Поддержка браузеров для анимации CSS отличная, с единственным ограничивающим фактором – синтаксис CSS keyframe. Включая в себя соответствующий -webkit- vendor prefix, а эффект работает во всех современных браузерах, включая Internet Explorer 10 и выше.
Анимация JavaScript
Что делать, если мы хотим более точный контроль над нашей анимацией, что обычно возможно с синтаксисом CSS3 keyframe? Давайте предположим, что вместо одной циклической анимации, мы хотим объединить несколько спрайтов и связать триггеры и функции синхронизации в положение полосы прокрутки?
Для осуществления этого, нам нужно будет анимировать наши спрайты с JavaScript, используя мощь анимационной платформы GreenSock с прекрасной библиотекой Яна Паепке в ScrollMagic. Для тех, кто незнаком с этой мощной комбинацией, официальные демо ScrollMagic являются прекрасным местом для начала.
Они являются мощными инструментами, на которых были написаны целые серии учебных пособий. Таким образом, вместо того, погрузиться в детали о том, как работать с ScrollMagic, мы продемонстрируем некоторые из мощных функций синхронизации теперь доступных для нас. Основные спрайт принципы остаются такими же, как и в описанной нами чистой CSS анимации.
Во-первых, давайте протриггеруем двух секундную анимацию в определенном положении прокрутки. Она должна закончиться на последнем кадре, и играть в обратном направлении, когда пользователь прокручивает ее назад (даже если это происходит в середине воспроизведения). Мы будем придерживаться темы видеоигры и использовать спрайт из Westwood Studios’ strategy classic 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 с продвинутой анимационной прокруткой, но я надеюсь вдохновить других начать экспериментировать. Мне бы хотелось видеть какие-нибудь сайты, которые используют вариации методов, описанных выше. Вы можете взглянуть на личный проект, который в первую очередь побудил меня исследовать спрайт анимации – поклонники видеоигр могут заметить образец.
Как сказала Рейчел Наборс, «пожалуйста, анимируйте отвественно». Только потому, что что-то может быть анимировано – не означает, что нужно это сделать. И если вы решите заниматься анимацией, делайте это сознательно, красиво, и с целью.
