Responsywne animacje dla każdego rozmiaru ekranu i urządzenia

Zanim moja kariera zaczęła się rozwijać, wykonałem kilka prac związanych z grafiką ruchową w programie After Effects. Ale nawet na tym tle nadal uważałem, że animacja w Internecie jest dość zaskakująca.

Grafiki wideo są projektowane w określonych proporcjach, a następnie eksportowane. Gotowe! Ale w sieci nie ma żadnych „ustawień eksportu”. Po prostu wysyłamy kod w świat, a nasze animacje muszą dostosować się do dowolnego urządzenia, na którym wylądują.

Porozmawiajmy więc o animacji responsywnej! Jak najlepiej podejść do animacji w dzikiej sieci? Zamierzamy omówić kilka ogólnych podejść, kilka wskazówek dotyczących GSAP i kilka zasad ruchu. Zacznijmy od kadrowania…

Jak zostanie wykorzystana ta animacja?

Artykuł Zacha Sauciera na temat animacji responsywnej zaleca cofnięcie się, aby pomyśleć o ostatecznym wyniku przed przejściem do kodu.

Czy animacja będzie modułem powtarzającym się w wielu częściach Twojej aplikacji? Czy w ogóle musi się skalować? Pamiętanie o tym może pomóc w określeniu metody skalowania animacji i uchronić Cię przed marnowaniem wysiłku.

To świetna rada. A olbrzymi Częścią projektowania responsywnej animacji jest wiedza o tym, czy i jak ta animacja musi się skalować, a następnie wybranie odpowiedniego podejścia od samego początku.

Większość animacji należy do następujących kategorii:

• Naprawiony: Animacje elementów takich jak ikony lub programy ładujące, które zachowują ten sam rozmiar i proporcje na wszystkich urządzeniach. Nie ma się czym martwić! Zakoduj tam na stałe niektóre wartości pikseli i rób codzienną pracę.
• Płyn: Animacje, które muszą płynnie dostosowywać się do różnych urządzeń. Większość animacji układu należy do tej kategorii.
• Ukierunkowane: Animacje, które są specyficzne dla określonego urządzenia lub rozmiaru ekranu albo zmieniają się znacząco w określonym punkcie przerwania, takie jak animacje tylko na pulpicie lub interakcje oparte na interakcji specyficznej dla urządzenia, takie jak dotyk lub najechanie kursorem.

Płynne i ukierunkowane animacje wymagają różnych sposobów myślenia i rozwiązań. Spójrzmy…

Płynna animacja

As Andy dzwonek mówi: Bądź mentorem przeglądarki, a nie jej mikromenedżerem — daj przeglądarce solidne zasady i wskazówki, a następnie pozwól jej podejmować właściwe decyzje dla osób, które ją odwiedzają. (Tu są slajdy z tej prezentacji).

Płynna animacja polega na tym, aby przeglądarka wykonała ciężką pracę. Wiele animacji można łatwo dostosować do różnych kontekstów, po prostu używając odpowiednich jednostek od samego początku. Jeśli zmienisz rozmiar tego pióra, zobaczysz, że animacja za pomocą jednostki rzutni skaluje się płynnie w miarę dostosowywania przeglądarki:

Fioletowa ramka zmienia nawet szerokość w różnych punktach przerwania, ale ponieważ używamy wartości procentowych do jej przesuwania, animacja również skaluje się wraz z nią.

Animowanie właściwości układu, takich jak left i top może powodować zmiany układu i niestabilną animację, więc tam, gdzie to możliwe, trzymaj się przekształceń i nieprzezroczystości.

Nie ograniczamy się jednak tylko do tych jednostek — przyjrzyjmy się innym możliwościom.

Jednostki SVG

Jedną z rzeczy, które uwielbiam w pracy z SVG, jest to, że możemy używać jednostek użytkownika SVG do animacji, które są responsywne po wyjęciu z pudełka. Właściwie wskazówka jest w nazwie — Skalowalne Grafika wektorowa. W SVG-land wszystkie elementy są wykreślane w określonych współrzędnych. Przestrzeń SVG jest jak nieskończony kawałek papieru milimetrowego, na którym możemy układać elementy. The viewBox określa wymiary papieru milimetrowego, który możemy zobaczyć.

viewBox="0 0 100 50”

W następnym demo nasz SVG viewBox is 100 jednostki szerokie i 50 jednostki wysokie. Oznacza to, że jeśli animujemy element przez 100 jednostek wzdłuż osi X, zawsze będzie się przesuwał o całą szerokość swojego rodzica SVG, bez względu na to, jak duży lub mały jest ten SVG! Zmień rozmiar wersji demonstracyjnej, aby ją zobaczyć.

Animowanie elementu potomnego na podstawie szerokości kontenera nadrzędnego jest trochę sztuczką w świecie HTML. Do tej pory musieliśmy pobierać szerokość rodzica za pomocą JavaScript, co jest dość łatwe podczas animacji from zmieniona pozycja, ale trochę bardziej skrzypcowa podczas animacji to gdzieś, jak widać w poniższym demo. Jeśli punkt końcowy jest pozycją przekształconą i zmienisz rozmiar ekranu, będziesz musiał ręcznie dostosować tę pozycję. Brudny… 🤔

Jeśli dostosowujesz wartości podczas zmiany rozmiaru, pamiętaj, aby Obalić, a nawet uruchomić funkcję po zakończeniu zmiany rozmiaru przeglądarki. Detektory zmiany rozmiaru uruchamiają mnóstwo zdarzeń co sekundę, więc aktualizowanie właściwości każdego zdarzenia to dużo pracy dla przeglądarki.

Ale ten wzrost prędkości animacji wkrótce przejdzie do przeszłości! Proszę o bęben…

Po prawie 15 latach jako bardzo pożądana (niemożliwa!?) funkcja, zapytania kontenerowe i jednostki oparte na rozmiarze są dostępne zarówno w Chrome/Edge 105, jak i Safari 16! Firefox nie jest daleko w tyle.

(też: istnieje prototyp zapytań o style!)https://t.co/A2zgd9l4FC

— Mia (@StrasznaMia) 15 września 2022 r.

Jednostki kontenerowe! Cudowne rzeczy. W chwili, gdy to piszę, działają tylko w Chrome i Safari — ale może do czasu, gdy to przeczytasz, będziemy mieli też Firefoksa. Sprawdź je w akcji w następnym demo. Spójrz na tych małych chłopców idź! Czy to nie ekscytująca animacja, która jest związana z elementami nadrzędnymi!

Płynne przejścia w układzie z FLIP

Jak wspomnieliśmy wcześniej, w krainie SVG każdy element jest starannie umieszczony na jednej siatce i naprawdę łatwo się po nim poruszać. W świecie HTML jest to o wiele bardziej złożone. Aby budować responsywne układy, korzystamy z wielu różnych metod pozycjonowania i systemów układania. Jedną z głównych trudności związanych z animacją w sieci jest to, że dużo zmian w układzie nie da się animować. Może element musi się przesunąć z pozycji relative do fixedlub niektóre elementy podrzędne kontenera elastycznego muszą być płynnie przetasowane wokół widocznego obszaru. Może nawet element wymaga ponownego rodzicielstwa i przeniesienia na zupełnie nową pozycję w DOM.

Podstępne, co?

Dobrze. Technika FLIP jest tutaj, aby uratować sytuację; pozwala nam łatwo animować te niemożliwe rzeczy. Podstawowym założeniem jest:

• i terminów, a: Chwyć początkową pozycję elementów zaangażowanych w przejście.
• Nazwisko: Przesuń elementy i chwyć końcową pozycję.
• Odwróć: Opracuj zmiany między pierwszym a ostatnim stanem i zastosuj transformacje, aby odwrócić elementy z powrotem do ich pierwotnej pozycji. To sprawia wrażenie, jakby elementy nadal były w drugim pozycji, ale tak naprawdę nie są.
• Grać: Usuń odwrócone przekształcenia i animuj ich fałszywy drugim stan do trwać stan.

Oto demo wykorzystujące wtyczkę FLIP firmy GSAP, która wykonuje za Ciebie całą ciężką pracę!

Jeśli chcesz dowiedzieć się trochę więcej o implementacji wanilii, przejdź do Paula Lewisa blogu — on jest mózgiem techniki FLIP.

Płynne skalowanie SVG

Masz mnie… to nie jest naprawdę wskazówka dotycząca animacji. Ale prawidłowe ustawienie sceny jest niezbędne dla dobrej animacji! SVG domyślnie skaluje się bardzo ładnie, ale możemy kontrolować, jak skaluje się jeszcze bardziej za pomocą preserveAspectRatio, co jest bardzo przydatne, gdy proporcje elementu SVG i viewBox proporcje są różne. Działa bardzo podobnie jak background-position i background-size właściwości w CSS. Deklaracja składa się z wartości wyrównania (background-position) I Poznaj nasz or Plaster referencja (background-size).

Jeśli chodzi o odniesienia do Meet and Slice — slice jest jak background size: cover, meet jest jak background-size: contain.

• preserveAspectRatio="MidYMax slice" — Wyrównaj do środka osi x, dolnej części osi y i przeskaluj w górę, aby objąć całą rzutnię.
• preserveAspectRatio="MinYMin meet" — Wyrównaj z lewej strony osi x, górną część osi y i skaluj w górę, zachowując cały viewBox widoczny.

Tom Miller idzie o krok dalej, używając overflow: visible w CSS i element zawierający, aby odsłonić „stage left” i „stage right” przy jednoczesnym ograniczeniu wysokości:

W przypadku responsywnych animacji SVG przydatne może być skorzystanie z pola widoku SVG, aby utworzyć widok, który przycina i skaluje poniżej określonej szerokości przeglądarki, jednocześnie pokazując więcej animacji SVG po prawej i lewej stronie, gdy przeglądarka jest szersza próg. Możemy to osiągnąć, dodając przepełnienie widoczne na SVG i łącząc go z max-height wrapper, aby zapobiec zbyt dużemu skalowaniu SVG w pionie.

Płynne skalowanie płótna

Canvas jest znacznie bardziej wydajny w przypadku złożonych animacji z dużo ruchomych części niż animowanie DOM SVG lub HTML, ale jest to również z natury bardziej złożone. Musisz pracować na te przyrosty wydajności! W przeciwieństwie do SVG, które ma urocze, responsywne jednostki i skalowanie po wyjęciu z pudełka, musi być trochę rządzony i mikrozarządzany.

lubię konfigurować mój dzięki czemu działa podobnie jak SVG (mogę być stronniczy) z pięknym systemem jednostek do pracy i stałym współczynnikiem proporcji. również musi być przerysowywany za każdym razem, gdy coś się zmieni, więc pamiętaj, aby opóźnić przerysowanie, dopóki przeglądarka nie zakończy zmiany rozmiaru lub odrzucenia!

George Francis też to ułożyłem urocza mała biblioteka co pozwala zdefiniować płótno viewBox atrybut i preserveAspectRatio — dokładnie jak SVG!

Ukierunkowana animacja

Czasami możesz potrzebować mniej płynnego i bardziej ukierunkowanego podejścia do animacji. Urządzenia mobilne mają o wiele mniej nieruchomości i mniejszą wydajność animacji niż komputer stacjonarny. Dlatego sensowne jest wyświetlanie ograniczonej animacji użytkownikom mobilnym, potencjalnie nawet braku animacji:

Czasami najlepsza responsywna animacja na urządzenia mobilne wcale nie jest animacją! W przypadku mobilnego UX, priorytetem jest umożliwienie użytkownikowi szybkiego korzystania z treści zamiast czekania na zakończenie animacji. Animacje mobilne powinny poprawiać treść, nawigację i interakcje, a nie je opóźniać. Eric van Holtz

Aby to zrobić, możemy użyć zapytań o media, aby kierować reklamy na określone rozmiary widocznego obszaru, tak jak robimy to, gdy stylizujemy za pomocą CSS! Oto proste demo przedstawiające animację CSS obsługiwaną za pomocą zapytań o media i animację GSAP obsługiwaną za pomocą gsap.matchMedia():

W prostocie tego demo kryje się mnóstwo magii! Animacje JavaScript wymagają nieco więcej konfiguracji i czyszczenia, aby poprawnie działały tylko na jednym określonym rozmiarze ekranu. Widziałem w przeszłości horrory, w których ludzie po prostu ukryli animację przed widokiem w CSS za pomocą opacity: 0, ale animacja nadal pracuje w tle, zużywając zasoby.

Jeśli rozmiar ekranu nie jest już zgodny, animacja musi zostać zabita i zwolniona w celu wyrzucania elementów bezużytecznych, a elementy, na które ma wpływ animacja, muszą zostać wyczyszczone z wszelkich wprowadzonych przez ruch stylów wbudowanych, aby zapobiec konfliktom z innymi stylami. Aż do gsap.matchMedia(), był to skomplikowany proces. Musieliśmy śledzić każdą animację i zarządzać tym wszystkim ręcznie.

gsap.matchMedia() zamiast tego pozwala łatwo schować kod animacji do funkcji, która jest wykonywana tylko wtedy, gdy określony zapytanie o media mecze. Następnie, gdy przestanie pasować, wszystkie animacje GSAP i Wyzwalacze przewijania w tej funkcji zostaną automatycznie przywrócone. Zapytanie o media, w którym pojawiają się animacje, wykonuje całą ciężką pracę za Ciebie. Jest w GSAP 3.11.0 i zmienia zasady gry!

Nie ograniczamy się tylko do rozmiarów ekranu. Istnieją mnóstwo funkcji multimedialnych tam podpiąć się!

(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 */

W poniższym demo dodaliśmy czek na prefers-reduced-motion aby użytkownicy, którzy uważają, że animacja dezorientuje, nie przeszkadzają rzeczy wirujące wokół.

Zobacz też inne zabawne demo Toma Millera, w którym wykorzystuje proporcje urządzenia do dostosowania animacji:

Myślenie nieszablonowe, poza rozmiarami ekranu

Myślenie o responsywnej animacji to coś więcej niż tylko rozmiary ekranu. Różne urządzenia pozwalają na różne interakcje i łatwo jest wpaść w plątaninę, jeśli tego nie weźmiesz pod uwagę. Jeśli tworzysz stany najechania w CSS, możesz użyć hover funkcja mediów, aby sprawdzić, czy użytkownik pierwotny mechanizm wejściowy może najechać na elementy.

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

Kilka porad od Jake'a Whiteleya:

Często opieramy nasze animacje na szerokości przeglądarki, przyjmując naiwne założenie, że użytkownicy komputerów stacjonarnych chcą stanów najechania kursorem. Osobiście miałem w przeszłości wiele problemów, w których przełączałem się na układ pulpitu > 1024 pikseli, ale mogłem wykrywać dotyk w JS – co prowadziło do niezgodności, w której układ był przeznaczony na komputery stacjonarne, a JS na telefony komórkowe. Obecnie opieram się na najechaniu kursorem i wskaźniku, aby zapewnić parzystość i obsługiwać iPada Pro lub powierzchnie okien (które mogą zmienić typ wskaźnika w zależności od tego, czy okładka jest opuszczona, czy nie)

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

Następnie połączę moje zapytania układu CSS i zapytania JavaScript, więc rozważam urządzenie wejściowe jako główny czynnik utrzymany według szerokości, a nie odwrotnie.

Wskazówki dotyczące wyzwalania przewijania

Jeśli korzystasz z GSAP Wtyczka ScrollTrigger, istnieje przydatne, małe narzędzie, do którego można się podłączyć, aby łatwo rozpoznać funkcje dotykowe urządzenia: ScrollTrigger.isTouch.

• 0 - nie dotykać (tylko wskaźnik/mysz)
• 1 - tylko dotyk urządzenie (jak telefon)
• 2 – urządzenie może zaakceptować Kontakt wejście i Wskaźnik myszy (jak tablety z systemem Windows)

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

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

Kolejna wskazówka dotycząca responsywnej animacji wyzwalanej przewijaniem…

Poniższa prezentacja poniżej przesuwa galerię obrazów w poziomie, ale szerokość zmienia się w zależności od rozmiaru ekranu. Jeśli zmienisz rozmiar ekranu, gdy jesteś w połowie wyczyszczonej animacji, możesz skończyć z uszkodzonymi animacjami i nieaktualnymi wartościami. Jest to częsty promień zwalniający, ale taki, który można łatwo rozwiązać! Przenieś obliczenia zależne od rozmiaru ekranu do wartości funkcjonalnej i ustaw invalidateOnRefresh:true. W ten sposób ScrollTrigger ponownie obliczy tę wartość, gdy przeglądarka zmieni rozmiar.

Dodatkowa wskazówka GSAP dla nerdów!

Na urządzeniach mobilnych pasek adresu przeglądarki zwykle wyświetla się i ukrywa podczas przewijania. Liczy się to jako zdarzenie zmiany rozmiaru i zostanie uruchomione ScrollTrigger.refresh(). To może nie być idealne, ponieważ może powodować skoki w animacji. Dodano GSAP 3.10 ignoreMobileResize. Nie ma to wpływu na zachowanie paska przeglądarki, ale zapobiega ScrollTrigger.refresh() od wypalania dla małe pionowe zmiany rozmiaru na urządzeniach dotykowych.

ScrollTrigger.config({
  ignoreMobileResize: true
});

Zasady ruchu

Pomyślałem, że zostawię Ci kilka sprawdzonych metod do rozważenia podczas pracy z ruchem w sieci.

Odległość i luz

Drobną, ale ważną rzeczą, o której łatwo zapomnieć w przypadku responsywnej animacji, jest związek między prędkością, pędem i odległością! Dobra animacja powinien naśladować rzeczywisty świat czuć się wiarygodnie, a w prawdziwym świecie pokonanie większej odległości zajmuje więcej czasu. Zwróć uwagę na odległość, jaką pokonuje Twoja animacja, i upewnij się, że czas trwania i wygładzanie mają sens w kontekście innych animacji.

Często możesz również zastosować bardziej dramatyczne luzowanie do elementów z dalszą podróżą, aby pokazać zwiększoną dynamikę:

W niektórych przypadkach pomocne może być bardziej dynamiczne dostosowanie czasu trwania w zależności od szerokości ekranu. W następnym demo, z którego korzystamy gsap.utils aby ograniczyć wartość, którą otrzymujemy z prądu window.innerWidth w rozsądnym zakresie, a następnie przypisujemy tę liczbę do czasu trwania.

Rozstaw i ilość

Kolejną rzeczą, o której należy pamiętać, są odstępy i ilość elementów przy różnych rozmiarach ekranu. Cytowanie Steven Shaw:

Jeśli masz jakieś animacje otoczenia (paralaksa, chmury, drzewa, konfetti, dekoracje itp.), które są rozmieszczone wokół okna, upewnij się, że skalują się i/lub dostosowują ilość w zależności od rozmiaru ekranu. Duże ekrany prawdopodobnie wymagają większej liczby elementów, podczas gdy małe ekrany potrzebują tylko kilku, aby uzyskać ten sam efekt.

kocham jak Ofer Wisznia myśli o animacji jako scenie. Dodawanie i usuwanie elementów nie musi być tylko formalnością, może być częścią ogólnej choreografii.

Podczas projektowania responsywnych animacji wyzwaniem nie jest to, jak wepchnąć tę samą treść do okna widoku, aby „pasowała”, ale raczej jak zadbać o zestaw istniejących treści, aby komunikował tę samą intencję. Oznacza to dokonywanie świadomego wyboru treści, które należy dodać, a które usunąć. Zwykle w świecie animacji rzeczy nie pojawiają się po prostu ani nie wyskakują z kadru. Sensowne jest myślenie o elementach jako wchodzących lub wychodzących ze „sceny”, animujących to przejście w sposób, który ma sens wizualny i tematyczny.

I to jest dużo. Jeśli masz więcej wskazówek dotyczących responsywnych animacji, umieść je w sekcji komentarzy. Jeśli jest coś bardzo przydatnego, dodam je do tego kompendium informacji!

Uzupełnienie

Jeszcze jedna notatka od Tom Miller jak przygotowywałem ten artykuł:

Prawdopodobnie spóźniłem się z tą wskazówką na Twój artykuł o responsywnych animacjach, ale gorąco polecam „sfinalizuj wszystkie animacje przed budowaniem”. Obecnie doposażam niektóre animacje witryny w „wersje mobilne”. Dzięki Bogu za gsap.matchMedia… ale na pewno chciałbym, abyśmy od samego początku wiedzieli, że będą oddzielne układy/animacje na urządzenia mobilne.

Myślę, że wszyscy doceniamy to, że wskazówka dotycząca „planowania z wyprzedzeniem” pojawiła się w absolutnie ostatniej chwili. Dzięki Tom, życzę powodzenia w tych modyfikacjach.