До того, як моя кар’єра перейшла до розробки, я зробив купу рухомої графіки в After Effects. Але навіть з таким фоном я все одно вважаю анімацію в Інтернеті досить незрозумілою.
Відеографічне зображення розробляється в певному співвідношенні, а потім експортується. Готово! Але в Інтернеті немає жодних «налаштувань експорту». Ми просто просуваємо код у світ, і наша анімація має адаптуватися до будь-якого пристрою, на якому вона потрапляє.
Тож давайте поговоримо про адаптивну анімацію! Як нам найкраще підійти до анімації в дикій дикій мережі? Ми розглянемо деякі загальні підходи, деякі поради щодо GSAP і деякі принципи руху. Давайте почнемо з обрамлення…
Як використовуватиметься ця анімація?
Стаття Зака Сосьє про адаптивну анімацію рекомендує зробити крок назад, щоб подумати про кінцевий результат, перш ніж переходити до коду.
Чи буде анімація модулем, який повторюється в кількох частинах вашої програми? Чи потрібно взагалі масштабувати? Пам’ятаючи про це, ви можете визначити метод масштабування анімації та уникнути марних зусиль.
Це чудова порада. А величезний Частина розробки адаптивної анімації полягає в тому, щоб знати, чи і як цю анімацію потрібно масштабувати, а потім вибрати правильний підхід із самого початку.
Більшість анімацій належать до таких категорій:
- Виправлено: Анімації для таких речей, як значки чи завантажувачі, які зберігають однаковий розмір і співвідношення сторін на всіх пристроях. Тут нема про що турбуватися! Жорстко закодуйте деякі значення пікселів і продовжуйте свій день.
- Рідина: Анімації, які мають плавно адаптуватися до різних пристроїв. Більшість анімацій макетів потрапляє до цієї категорії.
- Цільова: Анімації, які є специфічними для певного пристрою чи розміру екрана або суттєво змінюються на певній точці зупинки, як-от анімації лише для робочого столу або взаємодії, які залежать від взаємодії з пристроєм, як-от дотик або наведення курсора.
Плавні та цілеспрямовані анімації вимагають різних способів мислення та рішень. Давайте подивимось…
Плавна анімація
As Енді Белл каже: Будьте наставником веб-переглядача, а не його мікроменеджером — дайте браузеру певні правила та підказки, а потім дозвольте йому приймати правильні рішення для людей, які його відвідують.
(Тут слайди з тієї презентації.)
Плавна анімація полягає в тому, щоб дозволити браузеру виконувати важку роботу. Багато анімацій можна легко адаптувати до різних контекстів, просто використовуючи правильні одиниці з самого початку. Якщо змінити розмір цього пера, ви побачите, що анімація використовується одиниці вікна перегляду плавно масштабується в міру налаштування браузера:
Фіолетове поле навіть змінює ширину в різних контрольних точках, але оскільки ми використовуємо відсотки для його переміщення, анімація також масштабується разом з ним.
Анімація властивостей макета, наприклад left та top може спричинити перекомпонування макета та тремтливу анімацію, тому, де це можливо, дотримуйтесь трансформацій та непрозорості.
Але ми не обмежуємося лише цими одиницями — давайте подивимося на деякі інші можливості.
Одиниці SVG
Однією з речей, які мені подобаються у роботі з SVG, є те, що ми можемо використовувати користувацькі модулі SVG для анімації, які реагують із коробки. Підказка насправді в назві - Масштабованість Векторна графіка. У SVG-land усі елементи наносяться на графік у певних координатах. Простір SVG схожий на нескінченний шматок міліметрового паперу, де ми можемо розташовувати елементи. The viewBox визначає розміри міліметрового паперу, який ми можемо бачити.
viewBox="0 0 100 50”У цій наступній демонстрації наш SVG viewBox is 100 одиниці шириною і 50 одиниць заввишки. Це означає, що якщо ми анімуємо елемент за допомогою 100 одиниць уздовж осі x, він завжди буде рухатися на всю ширину свого батьківського SVG, незалежно від того, наскільки великим чи малим є цей SVG! Змініть розмір демонстрації, щоб побачити.
Анімація дочірнього елемента на основі ширини батьківського контейнера є маленькою хитрістю в HTML-землі. До цих пір нам доводилося захоплювати ширину батьківського елемента за допомогою JavaScript, що досить легко, коли ви анімуєте from змінена позиція, але трохи невибаглива під час анімації to десь, як ви можете бачити в наступній демонстрації. Якщо вашою кінцевою точкою є змінена позиція, і ви змінюєте розмір екрана, вам доведеться вручну налаштувати цю позицію. Безлад… 🤔
Якщо ви все-таки змінюєте значення під час зміни розміру, пам’ятайте про це розвінчанняабо навіть запускати функцію після завершення зміни розміру браузера. Слухачі зміни розміру запускають масу подій щосекунди, тому оновлення властивостей для кожної події є великою роботою для браузера.
Але цей анімований лежачий поліцейський незабаром піде в минуле! Барабанний дріб, будь ласка... 🥁
Контейнерні одиниці! Чудова штука. У той час, коли я це пишу, вони працюють лише в Chrome і Safari — але, можливо, коли ви це читатимете, у нас також буде Firefox. Перевірте їх у дії в цій наступній демонстрації. Подивіться, як йдуть ті маленькі хлопці! Хіба це не захоплююче, анімація відносно батьківських елементів!
Дані підтримки браузера отримані з Каніус, який містить більше деталей. Цифра вказує, що браузер підтримує цю функцію в цій версії та новішій.
робочий стіл
| Chrome | Firefox | IE | край | Safari |
|---|---|---|---|---|
| 105 | Немає | Немає | 105 | 16.0 |
Мобільний / Планшет
| android-chrome | Android Firefox | Android | IOS Safari |
|---|---|---|---|
| 106 | Немає | 106 | 16.0 |
Гнучкі переходи макета за допомогою FLIP
Як ми згадували раніше, у SVG-land кожен елемент акуратно розміщено на одній сітці, і його дуже легко переміщувати. У HTML-країні все набагато складніше. Щоб створювати адаптивні макети, ми використовуємо низку різних методів позиціонування та систем макетів. Однією з головних труднощів анімації в Інтернеті є те, що багато змін у макеті неможливо анімувати. Можливо, елементу потрібно змінити положення relative до fixed, або деякі дочірні елементи контейнера flex потрібно плавно переміщувати навколо вікна перегляду. Можливо, елемент навіть потрібно буде повторно зробити батьківським і перемістити на абсолютно нову позицію в DOM.
Хитро, га?
Ну. Техніка FLIP тут, щоб врятувати ситуацію; це дозволяє нам легко оживляти ці неможливі речі. Основна передумова:
- Перший: захоплення початкової позиції елементів, які беруть участь у переході.
- останній: перемістіть елементи та захопіть кінцеву позицію.
- Інвертувати: Опрацюйте зміни між першим і останнім станом і застосуйте перетворення, щоб повернути елементи назад у вихідне положення. Це створює враження, що елементи все ще знаходяться всередині перший позицію, але насправді це не так.
- Play: видаліть інвертовані трансформації та анімуйте їх підроблені перший держави до останній стан.
Ось демонстрація використання плагіна FLIP від GSAP, який виконує всю важку роботу за вас!
Якщо ви хочете зрозуміти трохи більше про реалізацію vanilla, перейдіть до Пола Льюїса блог — він головний мозок техніки FLIP.
Плавне масштабування SVG
Ви мене зрозуміли… це не так насправді підказка щодо анімації. Але правильна установка сцени є обов’язковою для гарної анімації! SVG надзвичайно добре масштабується за замовчуванням, але ми можемо контролювати, як він масштабується ще далі preserveAspectRatio, що дуже зручно, коли співвідношення сторін елемента SVG і viewBox співвідношення сторін різні. Він працює майже так само, як і background-position та background-size властивості в CSS. Оголошення складається зі значення вирівнювання (background-position) І Зустрічатися or Скибочка посилання (background-size).
Щодо посилань на Meet and 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, і об’єднавши його з a
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 і ScrollTriggers у цій функції повертаються автоматично. Медіа-запит, до якого з’являються анімації, виконує всю важку роботу за вас. Це в 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 */
}Деякі поради від Джейк Вайтлі:
У більшості випадків ми базуємо нашу анімацію на ширині веб-переглядача, роблячи наївне припущення, що користувачі робочого столу хочуть стани наведення курсора. У мене особисто було багато проблем у минулому, коли я перемикався на макет робочого столу >1024 пікселів, але міг виконувати виявлення дотиків у 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, тому вважаю пристрій введення основним фактором підтриманий за шириною, а не навпаки.
Поради ScrollTrigger
Якщо ви використовуєте 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!
На мобільних пристроях адресний рядок браузера зазвичай відображається та ховається під час прокручування. Це вважається подією зміни розміру та викличе a ScrollTrigger.refresh(). Це може бути не ідеальним, оскільки може спричинити стрибки у вашій анімації. Додано GSAP 3.10 ignoreMobileResize. Це не впливає на поведінку панелі браузера, але запобігає ScrollTrigger.refresh() від стрільби за невеликі вертикальні зміни розмірів на сенсорних пристроях.
ScrollTrigger.config({
ignoreMobileResize: true
});Принципи руху
Я подумав залишити вам кілька найкращих практик, які слід враховувати під час роботи з рухом в Інтернеті.
Дистанція та послаблення
Маленька, але важлива річ, про яку легко забути завдяки адаптивній анімації, — це співвідношення між швидкістю, імпульсом і відстанню! Хороша анімація має імітувати реальний світ щоб відчути себе правдоподібними, а в реальному світі потрібно більше часу, щоб подолати більшу відстань. Зверніть увагу на відстань, яку проходить ваша анімація, і переконайтеся, що використані тривалість і послаблення мають сенс у контексті інших анімацій.
Ви також можете часто застосовувати більш драматичне пом’якшення до елементів з подальшим рухом, щоб показати збільшення імпульсу:
Для певних випадків використання може бути корисним динамічніше регулювати тривалість залежно від ширини екрана. У цій наступній демонстрації ми використовуємо gsap.utils щоб зафіксувати значення, яке ми повертаємо з поточного window.innerWidth в прийнятному діапазоні, тоді ми зіставляємо це число з тривалістю.
Інтервал і кількість
Інша річ, про яку слід пам’ятати, — це відстань і кількість елементів на різних розмірах екрана. Цитування Стівен Шоу:
Якщо у вас є якась анімація навколишнього середовища (паралакс, хмари, дерева, конфетті, прикраси тощо), яка розміщена навколо вікна, переконайтеся, що вона масштабується та/або регулює кількість залежно від розміру екрана. Великі екрани, ймовірно, потребують більшої кількості елементів, розподілених по всьому простору, тоді як маленькі екрани потребують лише кількох для того самого ефекту.
Я люблю як Офер Вишня думає про анімацію як про сцену. Додавання та видалення елементів не повинно бути просто формальністю, це може бути частиною загальної хореографії.
При розробці адаптивної анімації завдання полягає не в тому, як втиснути той самий вміст у вікно перегляду, щоб він «підходив», а скоріше в тому, як підібрати набір наявного вмісту, щоб він передавав ті самі наміри. Це означає свідомий вибір того, які частини вмісту додати, а які видалити. Зазвичай у світі анімації речі не просто з’являються в кадрі чи виходять із нього. Має сенс думати про елементи як про вхід або вихід зі «сцени», анімуючи цей перехід у спосіб, який має візуальний і тематичний сенс.
І це багато. Якщо у вас є ще поради щодо адаптивної анімації, додайте їх у розділі коментарів. Якщо є щось дуже корисне, я додам це до цього збірника інформації!
Доповнення
Ще одна замітка від Том Міллер коли я готував цю статтю:
Можливо, я запізнився з цією порадою для вашої статті про адаптивну анімацію, але я настійно рекомендую «завершити всі анімації перед створенням». Зараз я модернізую деякі анімації сайту за допомогою «мобільних версій». Слава Богу за
gsap.matchMedia…але я б хотів, щоб ми з самого початку знали, що будуть окремі мобільні макети/анімації.
Думаю, ми всі розуміємо, що ця порада «планувати наперед» прийшла в останню хвилину. Дякую, Томе, і бажаю успіхів у цих модернізаціях.
