Адаптивная анимация для любого размера экрана и устройства

До того, как моя карьера перешла в разработку, я много работал с моушн-графикой в ​​After Effects. Но даже с таким фоном я все еще находил анимацию в Интернете довольно непонятной.

Видеографика создается в определенном соотношении, а затем экспортируется. Сделанный! Но в сети нет никаких «настроек экспорта». Мы просто выкладываем код в мир, и наши анимации должны адаптироваться к любому устройству, на которое они приземляются.

Итак, давайте поговорим об адаптивной анимации! Как нам лучше всего подойти к анимации в дикой дикой паутине? Мы рассмотрим некоторые общие подходы, некоторые советы, относящиеся к GSAP, и некоторые принципы движения. Начнем с оформления…

Как будет использоваться эта анимация?

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

Будет ли анимация модулем, который повторяется в нескольких частях вашего приложения? Нужно ли вообще масштабироваться? Помня об этом, вы сможете определить метод масштабирования анимации и не будете тратить усилия впустую.

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

Большинство анимаций относятся к следующим категориям:

• Исправлена: Анимации для таких вещей, как значки или загрузчики, которые сохраняют одинаковый размер и соотношение сторон на всех устройствах. Здесь не о чем беспокоиться! Жестко закодируйте некоторые значения пикселей и продолжайте свой день.
• Жидкость: Анимации, которые должны плавно адаптироваться к различным устройствам. Большинство анимаций макета попадают в эту категорию.
• Целевые: Анимации, которые относятся к определенному устройству или размеру экрана или существенно изменяются в определенной точке останова, например анимация только для рабочего стола или взаимодействия, основанные на взаимодействии с конкретным устройством, например касание или наведение.

Плавная и целенаправленная анимация требует разных способов мышления и решений. Давайте взглянем…

Плавная анимация

As Энди Белл говорит: Будьте наставником браузера, а не его микроменеджером — дайте браузеру несколько твердых правил и подсказок, а затем позвольте ему принимать правильные решения для людей, которые его посещают. (Здесь слайды из этой презентации)

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

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

Анимация свойств макета, таких как left и top может вызвать перекомпоновку макета и дрожащую анимацию, поэтому по возможности придерживайтесь преобразований и непрозрачности.

Однако мы не ограничиваемся только этими юнитами — давайте взглянем на некоторые другие возможности.

SVG-единицы

Одна из вещей, которые мне нравятся в работе с SVG, заключается в том, что мы можем использовать пользовательские единицы SVG для анимации, которая сразу реагирует. Подсказка в названии на самом деле - Масштабируемость Векторная графика. В SVG-land все элементы отображаются в определенных координатах. Пространство SVG похоже на бесконечный кусок миллиметровой бумаги, на котором мы можем размещать элементы. viewBox определяет размеры миллиметровки, которую мы видим.

viewBox="0 0 100 50”

В следующей демонстрации наш SVG viewBox is 100 единицы ширины и 50 единиц высоты. Это означает, что если мы анимируем элемент с помощью 100 единиц по оси x, он всегда будет перемещаться на всю ширину своего родительского SVG, независимо от того, насколько велик или мал этот SVG! Дайте демо изменить размер, чтобы увидеть.

Анимация дочернего элемента на основе ширины родительского контейнера немного сложнее в HTML-стране. До сих пор нам приходилось получать ширину родителя с помощью JavaScript, что достаточно просто при анимации. from трансформированное положение, но немного сложнее, когда вы анимируете to где-то, как вы можете видеть в следующей демонстрации. Если вашей конечной точкой является преобразованное положение, и вы изменяете размер экрана, вам придется вручную настроить это положение. Грязный… 🤔

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

Но этот анимационный лежачий полицейский скоро уйдет в прошлое! Барабанная дробь, пожалуйста… 🥁

Спустя почти 15 лет после того, как очень востребованная (невозможная !?) функция, контейнерные запросы и единицы измерения на основе размера появились как в Chrome/Edge 105, так и в Safari 16! Firefox не сильно отстает.

(также: есть прототип стилевых запросов!)https://t.co/A2zgd9l4FC

— Миа (@TerribleMia) 15 сентября, 2022

Контейнерные блоки! Прекрасные вещи. В то время, когда я пишу это, они работают только в Chrome и Safari, но, возможно, к тому времени, когда вы будете это читать, у нас будет и Firefox. Проверьте их в действии в следующей демонстрации. Посмотрите, как идут эти мальчишки! Разве это не захватывающе, анимация относительно родительских элементов!

Плавные переходы макета с помощью FLIP

Как мы упоминали ранее, в SVG-ландии каждый элемент аккуратно размещен на одной сетке, и его действительно легко перемещать. В HTML-стране все гораздо сложнее. Чтобы создавать адаптивные макеты, мы используем множество различных методов позиционирования и систем макетов. Одна из основных трудностей анимации в Интернете заключается в том, что много изменений в макете невозможно анимировать. Возможно, элементу нужно переместиться из позиции relative в fixed, или некоторые дочерние элементы гибкого контейнера должны плавно перемещаться по области просмотра. Возможно, элементу даже нужно изменить родитель и переместиться в совершенно новую позицию в DOM.

Сложно, да?

Что ж. Техника FLIP здесь, чтобы спасти положение; это позволяет нам легко анимировать эти невозможные вещи. Основная предпосылка:

• First: захватить начальное положение элементов, участвующих в переходе.
• Фамилия: Переместите элементы и зафиксируйте конечное положение.
• Инвертировать: проработайте изменения между первым и последним состоянием и примените преобразования, чтобы вернуть элементы в исходное положение. Это создает впечатление, что элементы все еще находятся в первый положение, но на самом деле это не так.
• Играть: Удалите инвертированные преобразования и анимируйте их. фальшивый первый заявить последний состоянии.

Вот демонстрация использования плагина FLIP от GSAP, который делает всю тяжелую работу за вас!

Если вы хотите узнать немного больше о реализации vanilla, перейдите к Полу Льюису. блоге — он автор техники FLIP.

Плавное масштабирование SVG

Ты меня понял ... это не на самом деле совет по анимации. Но правильная установка сцены необходима для хорошей анимации! SVG очень хорошо масштабируется по умолчанию, но мы можем контролировать его дальнейшее масштабирование с помощью preserveAspectRatio, что очень удобно, когда соотношение сторон элемента SVG и viewBox соотношение сторон разное. Он работает примерно так же, как background-position и background-size свойства в CSS. Объявление состоит из значения выравнивания (background-position) И Встречайте or Ломтик Справка (background-size).

Что касается упоминаний Meet и Slice — slice , как background size: coverкачества meet , как background-size: contain.

• preserveAspectRatio="MidYMax slice" — Выровняйте по середине оси X, внизу оси Y и увеличьте масштаб, чтобы покрыть все окно просмотра.
• preserveAspectRatio="MinYMin meet" — Выровняйте по левому краю оси X, по верхней части оси Y и увеличьте масштаб, сохраняя все viewBox видимый.

Том Миллер делает еще один шаг вперед, используя overflow: visible в CSS и содержащий элемент, чтобы показать «сцену слева» и «сцену справа», сохраняя ограничение по высоте:

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

Плавное масштабирование холста

Canvas гораздо более эффективен для сложных анимаций с много движущихся частей, чем анимация SVG или HTML DOM, но это по своей сути также более сложно. Вы должны работать для этих приростов производительности! В отличие от SVG, который имеет прекрасные отзывчивые единицы и масштабирование из коробки, нужно командовать и немного управлять.

мне нравится настраивать так что он работает почти так же, как SVG (я могу быть предвзятым), с прекрасной системой единиц для работы и фиксированным соотношением сторон. также необходимо перерисовывать каждый раз, когда что-то меняется, поэтому не забудьте отложить перерисовку до тех пор, пока браузер не закончит изменение размера, или устраните дребезг!

Джордж Френсис тоже собрал это прекрасная маленькая библиотека который позволяет вам определить Canvas viewBox атрибут и preserveAspectRatio — в точности как SVG!

Целевая анимация

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

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

Чтобы сделать это, мы можем использовать медиа-запросы для таргетинга на определенные размеры области просмотра, точно так же, как мы делаем это, когда стилизуем с помощью CSS! Вот простая демонстрация, показывающая, как анимация CSS обрабатывается с помощью медиа-запросов, а анимация GSAP обрабатывается с помощью gsap.matchMedia():

За простотой этой демонстрации скрывается куча волшебства! Анимации JavaScript требуют немного большей настройки и очистки, чтобы правильно работать только на одном конкретном размере экрана. Я видел ужасы в прошлом, когда люди просто скрывали анимацию от просмотра в CSS с помощью opacity: 0, но анимация все еще работает в фоновом режиме, используя ресурсы. 😱

Если размер экрана больше не соответствует, анимацию необходимо остановить и выпустить для сборки мусора, а элементы, затронутые анимацией, должны быть очищены от любых встроенных стилей, введенных движением, чтобы предотвратить конфликты с другими стилями. До gsap.matchMedia(), это был кропотливый процесс. Приходилось следить за каждой анимацией и управлять всем этим вручную.

gsap.matchMedia() вместо этого позволяет легко встроить код анимации в функцию, которая выполняется только тогда, когда медиа-запрос Спички. Затем, когда он больше не соответствует, все анимации GSAP и Триггеры прокрутки в этой функции автоматически возвращаются. Медиа-запрос, в который вставляются анимации, делает всю тяжелую работу за вас. Это в GSAP 3.11.0, и это меняет правила игры!

Мы не просто ограничены размерами экрана. Есть тонна медиа-функций там зацепиться!

(prefers-reduced-motion) /* find out if the user would prefer less animation */

(orientation: portrait) /* check the user's device orientation */

(max-resolution: 300dpi) /* check the pixel density of the device */

В следующей демонстрации мы добавили проверку на prefers-reduced-motion так что любые пользователи, которые находят анимацию дезориентирующей, не будут обеспокоены крутящимися вокруг предметами.

И посмотрите другую забавную демонстрацию Тома Миллера, где он использует соотношение сторон устройства для настройки анимации:

Нестандартное мышление, помимо размеров экрана

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

@media (hover: hover) {
 /* CSS hover state here */
}

Некоторые советы от Джейк Уайтли:

Большую часть времени мы основываем нашу анимацию на ширине браузера, делая наивное предположение, что пользователям настольных компьютеров нужны состояния наведения. У меня лично было много проблем в прошлом, когда я переключался на макет рабочего стола> 1024px, но мог использовать обнаружение касания в JS — что приводило к несоответствию, когда макет был для настольных компьютеров, а JS был для мобильных устройств. В эти дни я опираюсь на наведение и указатель, чтобы обеспечить четность и обрабатывать поверхности iPad Pro или Windows (которые могут изменять тип указателя в зависимости от того, опущена крышка или нет).

/* any touch device: */
(hover: none) and (pointer: coarse)
/* iPad Pro */
(hover: none) and (pointer: coarse) and (min-width: 1024px)

Затем я объединяю свои запросы макета CSS и запросы JavaScript, поэтому я рассматриваю устройство ввода как основной фактор. поддержал по ширине, а не наоборот.

Советы по триггерам прокрутки

Если вы используете GSAP Плагин ScrollTrigger, есть небольшая удобная утилита, к которой вы можете подключиться, чтобы легко распознать сенсорные возможности устройства: ScrollTrigger.isTouch.

• 0 – без касаний (только указатель/мышь)
• 1 – сенсорный устройство (например, телефон)
• 2 - устройство может принять трогать вход и указатель мыши (например, планшеты Windows)

if (ScrollTrigger.isTouch) {
  // any touch-capable device...
}

// or get more specific: 
if (ScrollTrigger.isTouch === 1) {
  // touch-only device
}

Еще один совет по адаптивной анимации, запускаемой прокруткой…

Следующая демонстрация ниже перемещает галерею изображений по горизонтали, но ширина изменяется в зависимости от размера экрана. Если вы измените размер экрана на полпути к очищенной анимации, вы можете получить сломанную анимацию и устаревшие значения. Это обычная «лежачая полицейская», но она легко решается! Вставьте вычисление, зависящее от размера экрана, в функциональное значение и установите invalidateOnRefresh:true. Таким образом, ScrollTrigger будет пересчитывать это значение для вас при изменении размера браузера.

Бонусный совет ботаника GSAP!

На мобильных устройствах адресная строка браузера обычно отображается и скрывается при прокрутке. Это считается событием изменения размера и запускает ScrollTrigger.refresh(). Это может быть не идеально, так как это может вызвать скачки в вашей анимации. Добавлен GSAP 3.10 ignoreMobileResize. Это не влияет на поведение панели браузера, но предотвращает ScrollTrigger.refresh() от стрельбы по небольшие вертикальные изменения размеров на сенсорных устройствах.

ScrollTrigger.config({
  ignoreMobileResize: true
});

Принципы движения

Я решил оставить вас с некоторыми рекомендациями, которые следует учитывать при работе с движением в Интернете.

Расстояние и смягчение

Небольшая, но важная вещь, о которой легко забыть в адаптивной анимации, — это взаимосвязь между скоростью, импульсом и расстоянием! Хорошая анимация должен имитировать реальный мир чтобы чувствовать себя правдоподобно, и в реальном мире требуется больше времени, чтобы преодолеть большее расстояние. Обратите внимание на расстояние, на которое перемещается ваша анимация, и убедитесь, что используемая продолжительность и замедление имеют смысл в контексте с другими анимациями.

Вы также можете часто применять более резкое смягчение к элементам с дальнейшим перемещением, чтобы показать увеличенный импульс:

В некоторых случаях может быть полезно более динамично настраивать продолжительность в зависимости от ширины экрана. В следующей демонстрации мы используем gsap.utils чтобы зафиксировать значение, которое мы получаем от текущего window.innerWidth в разумный диапазон, затем мы сопоставляем это число с продолжительностью.

Расстояние и количество

Еще одна вещь, о которой следует помнить, — это интервалы и количество элементов при разных размерах экрана. Цитирование Стивен Шоу:

Если у вас есть какая-то анимация окружающей среды (параллакс, облака, деревья, конфетти, декорации и т. д.), которые расположены вокруг окна, убедитесь, что они масштабируются и/или регулируют количество в зависимости от размера экрана. Большим экранам, вероятно, нужно больше элементов, разбросанных повсюду, в то время как маленьким экранам нужно всего несколько для того же эффекта.

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

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

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

добавление

Еще одна заметка от Том Миллер как я готовил эту статью:

Я, вероятно, слишком поздно с этим советом для вашей статьи об адаптивных анимациях, но я настоятельно рекомендую «доработать все анимации перед сборкой». В настоящее время я дооснащаю некоторые анимации сайта «мобильными версиями». Слава Богу за gsap.matchMedia… но я бы хотел, чтобы мы с самого начала знали, что будут отдельные мобильные макеты/анимации.

Я думаю, мы все ценим, что этот совет «планировать заранее» пришел в самую последнюю минуту. Спасибо, Том, и удачи с этими модификациями.