Содержание
- SVG-спрайты и CSS-анимация
- Сложное движение
- Отзывчивый UX
- Меньше пикантности на мобильном телефоне
- Заключение
Анимация в Интернете отличается особенными нюансами, так как мы должны корректировать нашу работу с учетом пропускной способности, совместимости кода и дизайна продукта. В этой статье я объясню рекомендуемые настройки для действительно отзывчивой масштабируемой анимации. Я также расскажу о различных способах работы с анимацией, чтобы добиться положительных впечатлений от пользователей и обеспечить равенство в нашем мире, где много устройств.
Я расскажу о нескольких ключевых вариантах использования: добавление CSS-анимации к SVG-спрайтам, работа с автономной графикой, требующей сложного движения, создание адаптивного интерфейса, адаптирующегося к области просмотра, и упрощение анимации для мобильных устройств.
Я настоятельно рекомендую использовать SVG (масштабируемая векторная графика) для графики с адаптивной анимацией. Они не зависят от разрешения, поэтому вам не придется загружать дополнительные HTTP-запросы или увлекаться заменой медиа-запросов изображений.
В качестве альтернативы атрибуту img элемент изображения довольно хорошо обрабатывает замену изображения, но при работе с движущимися изображениями разного размера становится намного сложнее поддерживать согласованность анимации. В этом отношении SVG намного превосходит другие: мы можем написать код один раз и продолжить регулировать визуальную сложность нашего изображения.
SVG также предоставляет DOM с возможностью навигации, поэтому становится проще проникать внутрь сложной графики и анимировать элементы по отдельности. Как следует из названия, SVG масштабируется. Настроить размер SVG невероятно просто и интуитивно понятно.
Однако даже с этими ключевыми функциями единицы измерения и даже то, как мы воспринимаем изображения, будут меняться от размера экрана к размеру экрана. Не волнуйтесь; Я тебя прикрыл! Давайте рассмотрим несколько способов работы с адаптивной анимацией.
SVG-спрайты и CSS-анимация
Этот первый метод особенно хорошо работает для адаптивной автономной анимации - например, при иллюстрации текста. Мы начинаем с типичного отзывчивого спрайта и адаптируем не только размер изображения, но и его сложность. Это имеет большой смысл, если подумать о том, что мы можем визуально интерпретировать на меньшем экране. Чтобы графика нашей анимации оставалась четкой, мы также должны учитывать площадь экрана.
Взгляните на иллюстрацию выше. Слева вы можете видеть, что мы разработали для настольных компьютеров, планшетов и мобильных устройств. Справа мы сделали две вещи, чтобы подготовиться к экспорту.
Первый - убрать повторение. Мы ясно видим, что представления на рабочем столе и на планшете достаточно похожи, поэтому мы можем либо изменить свойства, либо заменить их медиазапросами CSS. Примером такого изменения может быть настройка фона так, чтобы он стал зеленым, а не синим. Что касается гор, то изменение дизайна между устройствами разных размеров достаточно значимо, поэтому нам нужно будет применить класс к элементу, чтобы скрыть или показать его.
Самая важная часть этого метода заключается в том, как мы обрабатываем атрибут viewBox. Вы можете думать о viewBox как о маленьком окошке, в котором мы просматриваем SVG. Сам SVG может выходить за пределы viewBox, но будет видна только область внутри него. Остальные будут обрезаны.
Для настольных и планшетных версий мы хотим, чтобы отображалась только первая плитка, поэтому изначально мы устанавливаем viewBox inline в SVG, чтобы покрывать только верхнюю часть спрайта: viewBox = "0 0 490 474". Затем мы смещаем видимую область с помощью JavaScript на ’0 490 500 500’.
Сложное движение
Каждый раз, когда у вас есть отдельная графика с более сложным движением, я предлагаю переключиться на платформу анимации GreenSock (GSAP) вместо использования CSS. Хотя GSAP может предложить множество интересных вещей, основные преимущества в этом случае двоякие.
Во-первых, это кроссбраузерность.
Благодаря всем нашим браузерам и системам, фронтенд-разработка означает большую матрицу тестирования. Когда мы включаем мобильные устройства, все становится экспоненциально сложнее. Старые браузеры Safari на старых устройствах Apple могут иметь некоторую поддержку перемещения SVG, и на Android также есть много ошибок. GSAP предлагает действительно стабильное движение без ущерба для скорости.
Второе преимущество - это сроки. Это позволяет совмещать анимации движения и даже эффекты в шахматном порядке с упрощенным и интуитивно понятным кодом. Для остальных примеров в этой статье я объединю GSAP и SVG.
Давайте сначала установим, что анимация элементов с помощью преобразований и непрозрачности является наиболее эффективным подходом. Браузеру проще оптимизировать, потому что он сокращает количество перерисовок, что является наиболее важным аспектом для анимации без рывков и заиканий.
Кроме того, если мы используем атрибуты в SVG DOM, они будут масштабироваться вместе со всем SVG, потому что они учитывают пространство внутри viewBox. Поэтому, если вы масштабируете сложный SVG с помощью процентов, гибкого бокса или других методов, ваша анимация также будет масштабироваться соответствующим образом. Это означает, что вам не нужно ничего настраивать; вы можете сосредоточиться на правильном написании кода всего один раз. И это довольно большое благо.
Например, давайте рассмотрим действительно сложную анимацию, подобную показанной на изображении выше. Обычно я сначала создаю все элементы, которые мне нужны, и постепенно раскрываю их. Это позволяет мне планировать вещи заранее, что приводит к более чистому и разборчивому коду.
Готовая анимация полностью масштабируема - вы можете произвольно настраивать кнопку во время ее работы, и все это настраивается на новый процент (см. Изображение ниже).
Отзывчивый UX
Создание адаптивного интерфейса, адаптирующегося к области просмотра, зависит от некоторого планирования на этапе проектирования. Вы можете думать об этом как о маленьких взаимосвязанных блоках Lego: мы проходим этапы проектирования, сборки и разработки, оценивая каждую конкретную область для себя, но в конечном итоге пользователь получает полное (но совершенно другое) представление о каждом окне просмотра.
Мы использовали этот подход для нашей анимации Huggy Laser Panda. Взгляните на него, посетив netm.ag/demo3-278. Мы разработали это тщательно, учитывая единицы, которые придется переключать и складывать.
На мобильном устройстве, чтобы части правильно сцепились, мы настраиваем положение правой части (для ясности выделено пурпурным цветом) и переворачиваем ее, чтобы она могла складываться должным образом.
Мы следим за тем, чтобы каждая часть, показанная в секциях в рамке, была экспортирована в отдельные SVG и правильно названа, включая меньшие единицы или группы. Это означает, что в наших настройках экспорта (я использую SVGOMG Джейка Арчибальда) мы не удаляем ненужные идентификаторы или группы.
Затем мы используем несколько функций. Каждый раздел имеет независимую область видимости, и существует одна повторяющаяся функция для всех циклических анимаций.
функция revolve () {var tl = new TimelineMax (); tl.to (шестерня, 4, {transformOrigin: "50% 50%", вращение: 360, повторение: -1, легкость: Linear.easeNone}, "начало"); ... вернуть tl; }
Это значительно упрощает построение дизайна и размышления над ним. Мы даже можем изначально приостановить каждую анимацию, чтобы она могла быть вызвана событием щелчка пользователя. Теперь все отнесено к своему обязательному разделу, от дизайна до готового продукта, и теперь легко понять, что делать для корректировок.
Мы разделяем эти сборки и настраиваем каждую деталь, похожую на Lego, в процентном соотношении, и она прекрасно масштабируется. В качестве альтернативы flexbox будет работать одинаково хорошо, в зависимости от уровня поддержки.
Меньше пикантности на мобильном телефоне
Посмотрим правде в глаза, мобильная связь (особенно в менее развитых странах) может быть довольно медленной. Независимо от того, есть ли у вас всего несколько ключевых анимационных взаимодействий на вашем сайте или большой опыт работы с WebGL, иногда анимация, которая красиво выглядит на рабочем столе, не нуждается в масштабировании до мобильной версии.
В случае большой анимации холста или даже действительно сложной SVG-анимации, которая не критична для пользовательского опыта, иногда лучшее, что вы можете сделать, - это уменьшить или отключить ее для небольших устройств.
Сайт Active Theory прекрасно справляется с этой задачей (см. Изображение ниже), показывая вам полную анимацию холста частиц на рабочем столе, которая заменена простым многоугольным фоном на мобильном устройстве. Взаимодействие на мобильных устройствах по-прежнему очень актуально, превосходя даже то, что мы ожидаем от нативных.
Команда по-прежнему демонстрирует свое мастерство взаимодействия при навигации по сайту, что, возможно, более впечатляюще на мобильных устройствах, чем анимированный фон. Дизайн экономит полосу пропускания для того, что имеет значение.
Заключение
Независимо от того, проектируете ли вы адаптивно от начала до конца или просто отключаете анимацию на мобильных устройствах, жизненно важно иметь конкретный план того, что ваши зрители будут испытывать от устройства к устройству. Это особенно актуально для ландшафта, где главное - мобильность. Контент, тип изображения и пропускная способность пользователя - все это помогает выбрать анимацию для адаптивного дизайна.
