Wyobraź sobie taką sytuację: przyłączasz się do nowego projektu, zagłębiasz się w bazę kodu i w ciągu pierwszych kilku godzin odkrywasz coś frustrująco znajomego. W arkuszach stylów znajdziesz wiele definicji @keyframes dla tych samych podstawowych animacji. Trzy różne efekty zanikania, dwie lub trzy odmiany slajdów, kilka animacji powiększania i co najmniej dwie różne animacje wirowania, bo cóż, czemu nie? @impuls klatek kluczowych { od { skala: 1; } do { skala: 1,1; } }
@klatki kluczowe większy impuls { 0%, 20%, 100% { skala: 1; } 10%, 40% { skala: 1,2; } }
Jeśli ten scenariusz brzmi znajomo, nie jesteś sam. Z mojego doświadczenia zdobytego w różnych projektach wynika, że jednym z najbardziej konsekwentnych i szybkich korzyści, jakie mogę zapewnić, jest konsolidacja i standaryzacja klatek kluczowych. Stał się on tak niezawodnym wzorcem, że nie mogę się już doczekać tego oczyszczenia, ponieważ będzie to jedno z moich pierwszych zadań w jakiejkolwiek nowej bazie kodu. Logika chaosu Ta nadmiarowość ma sens, jeśli się nad tym zastanowić. Wszyscy używamy tych samych podstawowych animacji w naszej codziennej pracy: zanikania, slajdów, powiększeń, obrotów i innych typowych efektów. Te animacje są dość proste i łatwo jest stworzyć szybką definicję @keyframes, aby wykonać zadanie. Bez scentralizowanego systemu animacji programiści w naturalny sposób piszą te klatki kluczowe od zera, nieświadomi, że podobne animacje istnieją już w innych miejscach kodu. Jest to szczególnie częste podczas pracy w architekturach opartych na komponentach (co obecnie robi większość z nas), ponieważ zespoły często pracują równolegle nad różnymi częściami aplikacji. Wynik? Chaos animacji. Mały Problem Najbardziej oczywistymi problemami związanymi z duplikacją klatek kluczowych jest zmarnowany czas programowania i niepotrzebne rozdęcie kodu. Wiele definicji klatek kluczowych oznacza wiele miejsc do aktualizacji w przypadku zmiany wymagań. Chcesz dostosować czas animacji zanikania? Będziesz musiał wytropić każdą instancję w swojej bazie kodu. Chcesz ujednolicić funkcje wygładzania? Powodzenia w znajdowaniu wszystkich odmian. To mnożenie punktów konserwacji sprawia, że nawet proste aktualizacje animacji są czasochłonnym zadaniem. Większy problem Powielanie klatek kluczowych powoduje znacznie bardziej podstępny problem czający się pod powierzchnią: globalną pułapkę zasięgu. Nawet podczas pracy z architekturami opartymi na komponentach klatki kluczowe CSS są zawsze definiowane w zakresie globalnym. Oznacza to, że wszystkie klatki kluczowe mają zastosowanie do wszystkich komponentów. Zawsze. Tak, animacja niekoniecznie korzysta z klatek kluczowych zdefiniowanych w komponencie. Używa ostatnich klatek kluczowych pasujących dokładnie do tej samej nazwy, które zostały załadowane do zakresu globalnego. Dopóki wszystkie klatki kluczowe są identyczne, może się to wydawać drobnym problemem. Ale w chwili, gdy chcesz dostosować animację do konkretnego przypadku użycia, masz kłopoty lub, co gorsza, to ty będziesz ich przyczyną. Albo Twoja animacja nie będzie działać, ponieważ inny komponent zostanie załadowany po Twoim, nadpisując Twoje klatki kluczowe, albo Twój komponent ładuje się jako ostatni i przypadkowo zmienia zachowanie animacji dla każdego innego komponentu używającego nazwy tej klatki kluczowej, z czego możesz nawet nie zdawać sobie sprawy. Oto prosty przykład ilustrujący problem: .component-one { /* style komponentów */ animacja: impuls 1s łatwość wejścia-wyjścia nieskończona naprzemienna; }
/* ta definicja @keyframes nie będzie działać */ @impuls klatek kluczowych { od { skala: 1; } do { skala: 1,1; } }
/* później w kodzie... */
.komponent drugi { /* style komponentów */ animacja: impuls 1s wejście-wyjście nieskończone; }
/* te klatki kluczowe będą miały zastosowanie do obu komponentów */ @impuls klatek kluczowych { 0%, 20%, 100% { skala: 1; } 10%, 40% { skala: 1,2; } }
Obydwa komponenty używają tej samej nazwy animacji, ale druga definicja @keyframes zastępuje pierwszą. Teraz zarówno komponent pierwszy, jak i komponent drugi będą używać drugich klatek kluczowych, niezależnie od tego, który komponent zdefiniował które klatki kluczowe. Zobacz żetony klatek kluczowych pióra – Demo 1 [rozwidlone] autorstwa Amita Sheena. Najgorsza część? Często działa to doskonale w programowaniu lokalnym, ale w tajemniczy sposób psuje się w produkcji, gdy procesy kompilacji zmieniają kolejność ładowania arkuszy stylów. Otrzymujesz animacje, które zachowują się inaczej w zależności od tego, które komponenty są ładowane i w jakiej kolejności. Rozwiązanie: ujednolicone klatki kluczowe Odpowiedź na ten chaos jest zaskakująco prosta: predefiniowane dynamiczne klatki kluczowe przechowywane we wspólnym arkuszu stylów. Zamiast pozwalać każdemu komponentowi definiować własne animacje, tworzymy scentralizowane klatki kluczowe, które są dobrze udokumentowane, łatwe doużytkowania, łatwe w utrzymaniu i dostosowane do konkretnych potrzeb Twojego projektu. Pomyśl o tym jak o tokenach klatek kluczowych. Tak jak używamy tokenów do określania kolorów i odstępów, a wielu z nas już używa tokenów do właściwości animacji, takich jak funkcje czasu trwania i wygładzania, dlaczego nie użyć tokenów również do klatek kluczowych? To podejście można w naturalny sposób zintegrować z dowolnym bieżącym przepływem pracy tokena projektowego, z którego korzystasz, rozwiązując zarówno mały problem (duplikacja kodu), jak i większy problem (konflikty zakresu globalnego) za jednym razem. Pomysł jest prosty: stworzyć jedno źródło prawdy dla wszystkich naszych wspólnych animacji. Ten udostępniony arkusz stylów zawiera starannie opracowane klatki kluczowe, które obejmują wzorce animacji faktycznie używane przez nasz projekt. Koniec z zgadywaniem, czy animacja zanikania już istnieje gdzieś w naszej bazie kodu. Koniec z przypadkowym nadpisywaniem animacji z innych komponentów. Ale oto klucz: nie są to tylko statyczne animacje typu „kopiuj-wklej”. Zostały zaprojektowane tak, aby były dynamiczne i można je dostosowywać za pomocą niestandardowych właściwości CSS, co pozwala nam zachować spójność, a jednocześnie zapewnia elastyczność dostosowywania animacji do konkretnych przypadków użycia, na przykład jeśli potrzebujesz nieco większej animacji „impulsowej” w jednym miejscu. Budowanie tokena pierwszych klatek kluczowych Jednym z pierwszych nisko wiszących owoców, którym powinniśmy się zająć, jest animacja „zanikania”. W jednym z moich ostatnich projektów znalazłem kilkanaście odrębnych definicji zanikania i tak, wszystkie po prostu animowały krycie od 0 do 1. Stwórzmy więc nowy arkusz stylów, nazwijmy go kf-tokens.css, zaimportujmy go do naszego projektu i umieśćmy w nim nasze klatki kluczowe z odpowiednimi komentarzami. /* klatki kluczowe-tokens.css */
/* * Fade In - zanikanie animacji wejścia * Zastosowanie: animacja: kf-fade-in 0,3 s wyciszanie; */ @keyframes kf-zanikanie { od { nieprzezroczystość: 0; } do { nieprzezroczystość: 1; } }
Ta pojedyncza deklaracja @keyframes zastępuje wszystkie rozproszone animacje pojawiania się w naszym kodzie. Czyste, proste i mające zastosowanie na całym świecie. A teraz, gdy mamy zdefiniowany ten token, możemy go używać z dowolnego komponentu w całym naszym projekcie: .modalny { animacja: kf-fade-in 0,3 s wyciszanie; }
.podpowiedź { animacja: kf-fade-in 0,2 s łatwość wejścia; }
.powiadomienie { animacja: kf-fade-in 0,5 s wyciszanie; }
Zobacz żetony klatek kluczowych pióra – wersja demonstracyjna 2 [rozwidlona] autorstwa Amita Sheena. Uwaga: we wszystkich nazwach @keyframes używamy przedrostka kf-. Ten przedrostek służy jako przestrzeń nazw, która zapobiega konfliktom nazw z istniejącymi animacjami w projekcie i od razu wyjaśnia, że te klatki kluczowe pochodzą z naszego pliku tokenów klatek kluczowych. Tworzenie dynamicznego slajdu Klatki kluczowe z funkcją kf-fade-in działają świetnie, ponieważ są proste i nie ma w nich miejsca na zepsucie. Jednak w innych animacjach musimy być znacznie bardziej dynamiczni i tutaj możemy wykorzystać ogromną moc niestandardowych właściwości CSS. To tutaj tokeny klatek kluczowych naprawdę błyszczą w porównaniu z rozproszonymi animacjami statycznymi. Weźmy typowy scenariusz: animacje „wsuwane”. Ale skąd? 100 pikseli od prawej? 50% od lewej? Czy powinien wejść od góry ekranu? A może zapłynąć od dołu? Tyle możliwości, ale zamiast tworzyć osobne klatki kluczowe dla każdego kierunku i każdej odmiany, możemy zbudować jeden elastyczny token, który dopasuje się do wszystkich scenariuszy: /* * Slide In - animacja kierunkowa slajdów * Użyj --kf-slide-from, aby kontrolować kierunek * Domyślnie: przesuwa się od lewej (-100%) * Zastosowanie: * animacja: kf-slide-in 0,3 s, łatwość wysuwania; * --kf-slide-from: -100px 0; // przesuń od lewej * --kf-slide-from: 100px 0; //przesuń z prawej strony * --kf-slide-from: 0 -50px; //przesuń z góry */
@keyframes kf-wsuń { od { przetłumacz: var(--kf-slide-from, -100% 0); } do { przetłumacz: 0 0; } }
Teraz możemy użyć tego pojedynczego tokena @keyframes dla dowolnego kierunku slajdu, po prostu zmieniając niestandardową właściwość --kf-slide-from: .pasek boczny { animacja: kf-slide-in 0,3 s wysuwanie; /* Używa wartości domyślnej: slajdy od lewej */ }
.powiadomienie { animacja: kf-slide-in 0,4 s wysuwanie; --kf-slajd-od: 0 -50px; /* przesuń od góry */ }
.modalny { animacja: kf-zanikanie 0,5 s, kf-wsuń 0,5 s sześciennego-beziera (0,34, 1,56, 0,64, 1); --kf-slide-from: 50px 50px; /* przesuń od prawego dolnego rogu */ }
Takie podejście daje nam niesamowitą elastyczność przy zachowaniu spójności. Jedna deklaracja klatki kluczowej, nieskończone możliwości. Zobacz żetony klatek kluczowych pióra – wersja demonstracyjna 3 [rozwidlona] autorstwa Amita Sheena. A jeśli chcemy, aby nasze animacje były jeszcze bardziej elastyczne, umożliwiając także efekty „wysuwania”, możemypo prostu dodaj niestandardową właściwość --kf-slide-to, podobną do tej, którą zobaczymy w następnej sekcji. Dwukierunkowe klatki kluczowe powiększenia Inną popularną animacją, która jest powielana w różnych projektach, są efekty „powiększenia”. Niezależnie od tego, czy jest to subtelne powiększenie wiadomości tostowych, dramatyczne powiększenie modułów modalnych, czy delikatny efekt pomniejszenia nagłówków, animacje powiększenia są wszędzie. Zamiast tworzyć osobne klatki kluczowe dla każdej wartości skali, zbudujmy jeden elastyczny zestaw klatek kluczowych kf-zoom:
/* * Zoom - animacja skali * Użyj --kf-zoom-from i --kf-zoom-to, aby kontrolować wartości skali * Domyślnie: powiększa od 80% do 100% (0,8 do 1) * Zastosowanie: * animacja: kf-zoom 0,2 s; * --kf-zoom-od: 0,5; --kf-zoom-to: 1; // powiększenie od 50% do 100% * --kf-zoom-od: 1; --kf-zoom-to: 0; // powiększ od 100% do 0% * --kf-zoom-od: 1; --kf-zoom-to: 1.1; // powiększ od 100% do 110% */
@keyframes kf-zoom { od { skala: var(--kf-zoom-from, 0,8); } do { skala: var(--kf-zoom-to, 1); } }
Dzięki jednej definicji możemy osiągnąć dowolną zmianę powiększenia, jakiej potrzebujemy: .tost { animacja: kf-wsunięcie 0,2s, kf-zoom 0,4 s zmniejszanie; --kf-slajd-od: 0 100%; /* przesuń od góry */ /* Używa domyślnego powiększenia: skaluje od 80% do 100% */ }
.modalny { animacja: kf-zoom 0,3s sześcienna-bezier(0,34, 1,56, 0,64, 1); --kf-zoom-od: 0; /* dramatyczne powiększenie od 0% do 100% */ }
.nagłówek { animacja: kf-zanikanie 2s, kf-zoom 2s łatwość; --kf-zoom-od: 1.2; --kf-zoom-to: 0,8; /* delikatne zmniejszanie */ }
Domyślna wartość 0,8 (80%) doskonale sprawdza się w przypadku większości elementów interfejsu użytkownika, takich jak wiadomości tostowe i karty, a jednocześnie można ją łatwo dostosować do specjalnych przypadków. Zobacz żetony klatek kluczowych pióra – wersja demonstracyjna 4 [rozwidlona] autorstwa Amita Sheena. Być może zauważyłeś coś interesującego w ostatnich przykładach: łączyliśmy animacje. Jedną z kluczowych zalet pracy z tokenami @keyframes jest to, że zostały one zaprojektowane tak, aby bezproblemowo integrowały się ze sobą. Ta gładka kompozycja jest zamierzona, a nie przypadkowa. Później omówimy bardziej szczegółowo kompozycję animacji, łącznie z miejscami, w których może ona stać się problematyczna, ale większość kombinacji jest prosta i łatwa do wdrożenia. Uwaga: Pisząc ten artykuł, a może właśnie dlatego, że go napisałem, ponownie przemyślełem całą koncepcję animacji wejściowych. Czy przy wszystkich ostatnich postępach w CSS nadal w ogóle ich potrzebujemy? Na szczęście Adam Argyle zgłębił te same pytania i znakomicie wyraził je na swoim blogu. Nie jest to sprzeczne z tym, co tu napisano, ale przedstawia podejście warte rozważenia, zwłaszcza jeśli Twoje projekty w dużym stopniu opierają się na animacjach wejściowych. Ciągłe animacje Podczas gdy animacje wejścia, takie jak „zanikanie”, „przesuwanie” i „powiększanie”, pojawiają się raz, a następnie zatrzymują, ciągłe animacje zapętlają się w nieskończoność, aby zwrócić uwagę lub wskazać trwającą aktywność. Dwie najczęstsze animacje ciągłe, jakie spotykam, to „spin” (do ładowania wskaźników) i „impuls” (do podkreślania ważnych elementów). Animacje te stanowią wyjątkowe wyzwanie, jeśli chodzi o tworzenie tokenów klatek kluczowych. W przeciwieństwie do animacji wejścia, które zazwyczaj przechodzą z jednego stanu do drugiego, animacje ciągłe muszą zapewniać duże możliwości dostosowywania wzorców zachowania. Spin Doktor Wydaje się, że każdy projekt wykorzystuje wiele animacji wirowania. Niektóre obracają się zgodnie z ruchem wskazówek zegara, inne przeciwnie do ruchu wskazówek zegara. Niektórzy wykonują pojedynczy obrót o 360 stopni, inni wykonują wiele obrotów, aby uzyskać szybszy efekt. Zamiast tworzyć osobne klatki kluczowe dla każdej odmiany, zbudujmy jeden elastyczny scenariusz, który obsłuży wszystkie scenariusze:
/* * Spin - animacja obrotu * Użyj --kf-spin-from i --kf-spin-to, aby kontrolować zakres obrotu * Użyj --kf-spin-turns, aby kontrolować wielkość obrotu * Domyślnie: obraca się od 0 stopni do 360 stopni (1 pełny obrót) * Zastosowanie: * animacja: kf-spin 1s liniowa nieskończona; * --kf-spin-obroty: 2; // 2 pełne obroty * --kf-spin-od: 0 stopni; --kf-spin-to: 180 stopni; // pół obrotu * --kf-spin-od: 0 stopni; --kf-spin-to: -360 stopni; //w kierunku przeciwnym do ruchu wskazówek zegara */
@keyframes kf-spin { od { obróć: var(--kf-spin-from, 0deg); } do { obróć: calc(var(--kf-spin-from, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-spin-turns, 1)); } }
Teraz możemy stworzyć dowolną odmianę spinu, którą lubimy:
.loading-spinner { animacja: kf-spin 1s liniowa nieskończona; /* Używa wartości domyślnej: obraca się od 0 stopni do 360 stopni */ }
.szybki moduł ładujący { animacja: kf-spin 1,2 s łatwość wchodzenia i wychodzenia nieskończona naprzemienna; --kf-spin-obroty: 3; /* 3 pełne obroty w każdym kierunku na cykl*/ }
.steped-reverse { animacja: kf-spin 1,5 s kroków (8) nieskończona; --kf-spin-to: -360 stopni; /* przeciwnie do ruchu wskazówek zegara */ }
.subtle-wiggle { animacja: kf-spin 2s łatwość wchodzenia i wychodzenia nieskończona naprzemienna; --kf-spin-od: -16 stopni; --kf-spin-to: 32 stopnie; /* obrót o 36 stopni: od -18 stopni do +18 stopni */ }
Zobacz żetony klatek kluczowych pióra – wersja demonstracyjna 5 [rozwidlona] autorstwa Amita Sheena. Piękno tego podejścia polega na tym, że te same klatki kluczowe działają przy ładowaniu pokręteł, obracaniu ikon, efektach poruszania się, a nawet złożonych animacjach wieloobrotowych. Paradoks pulsu Animacje impulsów są trudniejsze, ponieważ mogą „impulsować” różne właściwości. Niektóre pulsują skalą, inne pulsują nieprzezroczystością, a niektóre pulsują właściwościami koloru, takimi jak jasność lub nasycenie. Zamiast tworzyć osobne klatki kluczowe dla każdej właściwości, możemy utworzyć klatki kluczowe, które współpracują z dowolną właściwością CSS. Oto przykład impulsowej klatki kluczowej z opcjami skali i krycia:
/* * Puls - animacja pulsowania * Użyj opcji --kf-pulse-scale-from i --kf-pulse-scale-to, aby kontrolować zakres skali * Użyj --kf-pulse-opacity-from i --kf-pulse-opacity-to, aby kontrolować zakres krycia * Domyślnie: brak impulsu (wszystkie wartości 1) * Zastosowanie: * animacja: kf-pulse 2s łatwość wejścia-wyjścia nieskończona naprzemienna; * --kf-skala-impulsu-od: 0,95; --kf-impuls-skala-do: 1,05; // impuls skali * --kf-pulse-opacity-od: 0,7; --kf-pulse-opacity-to: 1; // impuls nieprzezroczystości */
@keyframes kf-impuls { od { skala: var(--kf-skala-impulsu-od, 1); nieprzezroczystość: var(--kf-pulse-opacity-from, 1); } do { skala: var(--kf-impuls-skala-do, 1); nieprzezroczystość: var(--kf-pulse-opacity-to, 1); } }
Tworzy to elastyczny impuls, który może animować wiele właściwości: .wezwanie do działania { animacja: kf-pulse 0,6 s nieskończona naprzemienna; --kf-pulse-opacity-od: 0,5; /* impuls nieprzezroczystości */ }
.notification-kropka { animacja: kf-impuls 0,6 s, nieskończona zmiana; --kf-skala-impulsowa-od: 0,9; --kf-impuls-skala-do: 1,1; /* impuls skali */ }
.text-highlight { animacja: kf-pulse 1,5 s, nieskończone zwolnienie; --kf-skala-impulsowa-od: 0,8; --kf-pulse-opacity-od: 0,2; /* skala i impuls krycia */ }
Zobacz żetony klatek kluczowych pióra – wersja demonstracyjna 6 [rozwidlona] autorstwa Amita Sheena. Ta pojedyncza klatka kluczowa z impulsem kf radzi sobie ze wszystkim – od subtelnego przyciągania uwagi po dramatyczne momenty, a wszystko to przy jednoczesnej łatwości dostosowywania. Zaawansowane łagodzenie Jedną z największych zalet używania tokenów klatek kluczowych jest łatwość rozszerzania naszej biblioteki animacji i zapewniania efektów, których większość programistów nie zawracałaby sobie głowy pisaniem od zera, takich jak elastyczność lub odbicie. Oto przykład prostego tokena klatek kluczowych „odbijania”, który wykorzystuje niestandardową właściwość --kf-bounce-from do kontrolowania wysokości skoku. /* * Bounce - animacja odbicia od wejścia * Użyj --kf-bounce-from, aby kontrolować wysokość skoku * Domyślnie: skoki od 100vh (poza ekranem) * Zastosowanie: * animacja: ułatwienie kf-bounce 3s; * --kf-bounce-from: 200px; // skok z wysokości 200px */
@keyframes kf-odbicie { 0% { przetłumacz: 0 calc(var(--kf-bounce-from, 100vh) * -1); }
34% { przetłumacz: 0 calc(var(--kf-bounce-from, 100vh) * -0,4); }
55% { przetłumacz: 0 calc(var(--kf-bounce-from, 100vh) * -0,2); }
72% { przetłumacz: 0 calc(var(--kf-bounce-from, 100vh) * -0,1); }
85% { przetłumacz: 0 calc(var(--kf-bounce-from, 100vh) * -0,05); }
94% { przetłumacz: 0 calc(var(--kf-bounce-from, 100vh) * -0,025); }
99% { przetłumacz: 0 calc(var(--kf-bounce-from, 100vh) * -0,0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { przetłumacz: 0 0; funkcja synchronizacji animacji: łatwość; } }
Animacje takie jak „elastyczna” są nieco trudniejsze ze względu na obliczenia wewnątrz klatek kluczowych. Musimy osobno zdefiniować --kf-elastic-from-X i --kf-elastic-from-Y (oba są opcjonalne), a razem pozwolą nam stworzyć elastyczne wejście z dowolnego punktu ekranu.
/* * Elastic In - elastyczna animacja wejścia * Użyj --kf-elastic-from-X i --kf-elastic-from-Y, aby kontrolować pozycję początkową * Domyślnie: wejście od góry pośrodku (0, -100vh) * Zastosowanie: * animacja: kf-elastic-in 2s wejście-wyjście oba; * --kf-elastic-from-X: -50px; * --kf-elastic-from-Y: -200px; // wprowadź z (-50px, -200px) */
@keyframes kf-elastic-in { 0% { przetłumacz: calc(var(--kf-elastic-from-X, -50vw) * 1) calc(var(--kf-elastic-from-Y, 0px) * 1); }
16% { przetłumacz: calc(var(--kf-elastic-from-X, -50vw) * -0,3227) calc(var(--kf-elastic-from-Y, 0px) * -0,3227); }
28% { przetłumacz: calc(var(--kf-elastic-from-X, -50vw) * 0,1312)calc(var(--kf-elastic-from-Y, 0px) * 0,1312); }
44% { przetłumacz: calc(var(--kf-elastic-from-X, -50vw) * -0,0463) calc(var(--kf-elastic-from-Y, 0px) * -0,0463); }
59% { przetłumacz: calc(var(--kf-elastic-from-X, -50vw) * 0,0164) calc(var(--kf-elastic-from-Y, 0px) * 0,0164); }
73% { przetłumacz: calc(var(--kf-elastic-from-X, -50vw) * -0.0058) calc(var(--kf-elastic-from-Y, 0px) * -0.0058); }
88% { przetłumacz: calc(var(--kf-elastic-from-X, -50vw) * 0,0020) calc(var(--kf-elastic-from-Y, 0px) * 0,0020); }
100% { przetłumacz: 0 0; } }
Takie podejście ułatwia ponowne wykorzystanie i dostosowywanie zaawansowanych klatek kluczowych w całym naszym projekcie poprzez zmianę pojedynczej właściwości niestandardowej.
.odbij i powiększ { animacja: kf-bounce 3s łatwość wsiadania, kf-zoom 3s liniowy; --kf-zoom-od: 0; }
.odbijaj i przesuwaj { kompozycja animacji: dodaj; /* Obie animacje używają tłumaczenia */ animacja: kf-bounce 3s łatwość wsiadania, kf-slide-in 3s łatwość wysuwania; --kf-slide-from: -200px; }
.elastic-in { animacja: kf-elastic-in 2s wejście-wyjście oba; }
Zobacz żetony klatek kluczowych pióra – wersja demonstracyjna 7 [rozwidlona] autorstwa Amita Sheena. Do tego momentu widzieliśmy, jak możemy konsolidować klatki kluczowe w inteligentny i skuteczny sposób. Oczywiście możesz chcieć ulepszyć elementy, aby lepiej odpowiadały potrzebom Twojego projektu, ale omówiliśmy przykłady kilku typowych animacji i codziennych zastosowań. Dzięki tym tokenom klatek kluczowych mamy teraz potężne elementy składowe do tworzenia spójnych, łatwych w utrzymaniu animacji w całym projekcie. Nigdy więcej zduplikowanych klatek kluczowych, żadnych konfliktów zasięgu globalnego. Po prostu czysty i wygodny sposób na zaspokojenie wszystkich naszych potrzeb w zakresie animacji. Ale prawdziwe pytanie brzmi: jak połączyć te elementy razem? Składanie tego wszystkiego razem Widzieliśmy, że łączenie tokenów podstawowych klatek kluczowych jest proste. Nie potrzebujemy niczego specjalnego, jak tylko zdefiniować pierwszą animację, zdefiniować drugą, ustawić zmienne według potrzeb i to wszystko. /* Zanikanie + wsuwanie */ .tost { animacja: kf-zanikanie 0,4 s, kf-slide-in 0,4s sześcienny-bezier(0,34, 1,56, 0,64, 1); --kf-slajd-od: 0 40px; }
/* Powiększ + przyciemnij */ .modalny { animacja: kf-zanikanie 0,3 s, kf-zoom 0,3s sześcienny-bezier(0,34, 1,56, 0,64, 1); --kf-zoom-od: 0,7; --kf-zoom-to: 1; }
/* Wsuń + impuls */ .powiadomienie { animacja: kf-wsunięcie 0,5s, kf-pulse 1,2 s łatwość wchodzenia i wychodzenia nieskończona naprzemienna; --kf-slide-from: -100px 0; --kf-skala-impulsowa-od: 0,95; --kf-impuls-skala-do: 1,05; }
Te kombinacje działają doskonale, ponieważ każda animacja ma na celu inną właściwość: nieprzezroczystość, transformację (tłumaczenie/skalowanie) itp. Czasami jednak pojawiają się konflikty i musimy wiedzieć, dlaczego i jak sobie z nimi radzić. Kiedy dwie animacje próbują animować tę samą właściwość — na przykład obie animują skalę lub obie animują krycie — wynik nie będzie taki, jakiego oczekujesz. Domyślnie do tej właściwości jest faktycznie stosowana tylko jedna z animacji, która jest ostatnią na liście animacji. Jest to ograniczenie sposobu, w jaki CSS obsługuje wiele animacji w tej samej właściwości. Na przykład nie będzie to działać zgodnie z oczekiwaniami, ponieważ zastosowana zostanie tylko animacja impulsu kf. .bad-combo { animacja: kf-zoom 0,5s do przodu, kf-impuls 1,2 s nieskończony naprzemienny; --kf-zoom-od: 0,5; --kf-zoom-to: 1.2; --kf-skala-impulsowa-od: 0,8; --kf-impuls-skala-do: 1,1; }
Dodatek animacji Najprostszym i najbardziej bezpośrednim sposobem obsługi wielu animacji wpływających na tę samą właściwość jest użycie właściwości animacja-kompozycja. W ostatnim przykładzie powyżej animacja kf-pulse zastępuje animację kf-zoom, więc nie zobaczymy początkowego powiększenia i nie uzyskamy oczekiwanej skali do 1,2. Ustawiając animację do dodania, mówimy przeglądarce, aby połączyła obie animacje. Dzięki temu uzyskamy pożądany rezultat. .komponent drugi { kompozycja animacji: dodaj; }
Zobacz żetony klatek kluczowych pióra – wersja demonstracyjna 8 [rozwidlona] autorstwa Amita Sheena. To podejście sprawdza się dobrze w większości przypadków, gdy chcemy połączyć efekty dotyczące tej samej właściwości. Jest to również przydatne, gdy musimy połączyć animacje ze statycznymi wartościami właściwości. Na przykład, jeśli mamy element, który używa właściwości translacji, aby ustawić go dokładnie tam, gdzie chcemy, a następnie chcemy go animować za pomocą klatek kluczowych wsuwanych kf, otrzymamy nieprzyjemny widoczny skok bez kompozycji animacji. Zobacz żetony klatek kluczowych pióra – wersja demonstracyjna 9 [rozwidlona] autorstwa Amita Sheena. Po dodaniu kompozycji animacji, animacja jest płynnie łączona z istniejącąprzekształcić, dzięki czemu element pozostanie na miejscu i będzie animowany zgodnie z oczekiwaniami. Animacja Stagger Innym sposobem obsługi wielu animacji jest ich „naprzemienne” — to znaczy rozpoczęcie drugiej animacji zaraz po zakończeniu pierwszej. Nie jest to rozwiązanie, które sprawdza się w każdym przypadku, ale przydaje się, gdy mamy animację wejścia, po której następuje animacja ciągła. /* zanikanie + impuls krycia */ .powiadomienie { animacja: kf-fade-in 2s wyciszenie, kf-pulse 0,5 s 2 s wejście-wyjście nieskończone naprzemienne; --kf-pulse-opacity-to: 0,5; }
Zobacz żetony klatek kluczowych pióra – wersja demonstracyjna 10 [rozwidlona] autorstwa Amita Sheena. Zamówienie ma znaczenie Duża część animacji, z którymi pracujemy, wykorzystuje właściwość transform. W większości przypadków jest to po prostu wygodniejsze. Ma także przewagę w zakresie wydajności, ponieważ animacje transformacji mogą być przyspieszane przez procesor graficzny. Ale jeśli używamy transformacji, musimy zaakceptować, że kolejność, w jakiej wykonujemy nasze transformacje, ma znaczenie. Bardzo. W naszych dotychczasowych klatkach kluczowych stosowaliśmy transformacje indywidualne. Zgodnie ze specyfikacjami są one zawsze stosowane w ustalonej kolejności: najpierw element jest przesuwany, następnie obracany, a następnie skalowany. Ma to sens i tego właśnie oczekuje większość z nas. Jeśli jednak użyjemy właściwości transform, kolejność zapisywania funkcji jest kolejnością ich stosowania. W tym przypadku, jeśli przesuniemy coś o 100 pikseli na osi X, a następnie obrócimy to o 45 stopni, nie będzie to to samo, co najpierw obrócimy to o 45 stopni, a następnie przesuniemy o 100 pikseli. /* Różowy kwadrat: najpierw przetłumacz, potem obróć */ .przykład-jeden { transformacja: tłumaczenieX(100px) obrót(45 stopni); }
/* Zielony kwadrat: najpierw obróć, potem przetłumacz */ .przykład-dwa { transformacja: obrót (45 stopni) tłumaczenieX (100 pikseli); }
Zobacz żetony klatek kluczowych pióra – wersja demonstracyjna 11 [rozwidlona] autorstwa Amita Sheena. Jednak zgodnie z kolejnością transformacji wszystkie poszczególne transformacje — wszystko, czego użyliśmy w przypadku tokenów klatek kluczowych — mają miejsce przed funkcjami transformacji. Oznacza to, że wszystko, co ustawisz we właściwości transform, stanie się po animacji. Ale jeśli ustawisz na przykład tłumaczenie razem z klatkami kluczowymi kf-spin, tłumaczenie nastąpi przed animacją. Jeszcze zdezorientowany?! Prowadzi to do sytuacji, w których wartości statyczne mogą powodować różne wyniki dla tej samej animacji, jak w następującym przypadku:
/* Wspólna animacja dla obu spinnerów */ .spinner { animacja: kf-spin 1s liniowa nieskończona; }
/* Różowy spinner: przetłumacz przed obróceniem (transformacja indywidualna) */ .spinner-różowy { przetłumacz: 100% 50%; }
/* Zielony spinner: obróć, a następnie przetłumacz (kolejność funkcji) */ .spinner-zielony { transformacja: tłumaczenie (100%, 50%); }
Zobacz żetony klatek kluczowych pióra – wersja demonstracyjna 12 [rozwidlona] autorstwa Amita Sheena. Widać, że pierwszy spinner (różowy) otrzymuje translację, która ma miejsce przed obrotem kf-spin, więc najpierw przesuwa się na swoje miejsce, a następnie obraca się. Drugi element obrotowy (zielony) pobiera funkcję translacji(), która następuje po indywidualnej transformacji, więc element najpierw obraca się, a następnie przesuwa względem bieżącego kąta, uzyskując efekt szerokiej orbity. Nie, to nie jest błąd. To tylko jedna z tych rzeczy, które musimy wiedzieć o CSS i o których należy pamiętać podczas pracy z wieloma animacjami lub wieloma transformacjami. Jeśli zajdzie taka potrzeba, możesz także utworzyć dodatkowy zestaw kf-spin-alt klatek kluczowych, które obracają elementy za pomocą funkcji obracania(). Ograniczony ruch A skoro mówimy o alternatywnych klatkach kluczowych, nie możemy zignorować opcji „bez animacji”. Jedną z największych zalet używania tokenów klatek kluczowych jest to, że dostępność można wbudować, co w rzeczywistości jest całkiem łatwe. Projektując nasze klatki kluczowe z myślą o dostępności, możemy zapewnić użytkownikom preferującym ograniczony ruch, płynniejsze i mniej rozpraszające wrażenia, bez dodatkowej pracy i powielania kodu. Dokładne znaczenie słowa „zmniejszony ruch” może się nieco zmieniać w zależności od animacji i projektu, ale oto kilka ważnych punktów, o których należy pamiętać: Wyciszanie klatek kluczowych Chociaż niektóre animacje można złagodzić lub spowolnić, inne powinny całkowicie zniknąć, gdy wymagane jest ograniczenie ruchu. Animacje pulsacyjne są dobrym przykładem. Aby mieć pewność, że te animacje nie będą działać w trybie zredukowanego ruchu, możemy po prostu owinąć je odpowiednim zapytaniem o media.
@media (preferuje-ograniczony-ruch: brak preferencji) { @keyfrmaes kf-pulse { od { skala: var(--kf-skala-impulsu-od, 1); nieprzezroczystość: var(--kf-pulse-opacity-from, 1); } do { skala: var(--kf-impuls-skala-do, 1); nieprzezroczystość:var(--kf-opacity-pulse-to, 1); } } }
Dzięki temu użytkownicy, którzy ustawili opcję „preferowany ruch” na „zmniejsz”, nie zobaczą animacji i uzyskają wrażenia odpowiadające ich preferencjom. Natychmiastowe wejście Niektórych klatek kluczowych nie możemy po prostu usunąć, np. animacji wejścia. Wartość musi się zmienić, musi ożywić; w przeciwnym razie element nie będzie miał poprawnych wartości. Jednak w ruchu zredukowanym to przejście od wartości początkowej powinno być natychmiastowe. Aby to osiągnąć, zdefiniujemy dodatkowy zestaw klatek kluczowych, w których wartość natychmiastowo przeskoczy do stanu końcowego. Stają się one naszymi domyślnymi klatkami kluczowymi. Następnie dodamy zwykłe klatki kluczowe do zapytania o media, aby ustawić preferowany ruch o zmniejszonym ruchu na brak preferencji, tak jak w poprzednim przykładzie. /* pojawia się natychmiast, aby ograniczyć ruch */ @keyframes kf-zoom { od, do { skala: var(--kf-zoom-to, 1); } }
@media (preferuje-ograniczony-ruch: brak preferencji) { /* Oryginalne klatki kluczowe powiększenia */ @keyframes kf-zoom { od { skala: var(--kf-zoom-from, 0,8); } do { skala: var(--kf-zoom-to, 1); } } }
W ten sposób użytkownicy preferujący ograniczony ruch zobaczą, że element natychmiast pojawi się w jego ostatecznym stanie, podczas gdy wszyscy inni otrzymają animowane przejście. Miękkie podejście Są przypadki, w których chcemy zachować trochę ruchu, ale znacznie delikatniej i spokojniej niż w oryginalnej animacji. Możemy na przykład zastąpić odbite wejście delikatnym zanikaniem.
@keyframes kf-odbicie { /* Miękkie zanikanie w celu ograniczenia ruchu */ }
@media (preferuje-ograniczony-ruch: brak preferencji) { @keyframes kf-odbicie { /* Oryginalne odrzucone klatki kluczowe */ } }
Teraz użytkownicy z włączoną funkcją ograniczonego ruchu nadal mają poczucie wyglądu, ale bez intensywnego ruchu w postaci odbicia lub animacji elastycznej. Gdy już mamy gotowe elementy składowe, kolejnym pytaniem jest, jak włączyć je do rzeczywistego przepływu pracy. Pisanie elastycznych klatek kluczowych to jedno, ale zapewnienie ich niezawodności w dużym projekcie wymaga kilku strategii, których musiałem się nauczyć na własnej skórze. Strategie wdrożeniowe i najlepsze praktyki Kiedy już mamy solidną bibliotekę tokenów klatek kluczowych, prawdziwym wyzwaniem jest wprowadzenie ich do codziennej pracy.
Istnieje pokusa, aby od razu usunąć wszystkie klatki kluczowe i ogłosić, że problem został rozwiązany, ale w praktyce odkryłem, że najlepsze wyniki osiąga się stopniowo. Zacznij od najpopularniejszych animacji, takich jak zanikanie lub przesuwanie. Są to łatwe wygrane, które wykazują natychmiastową wartość bez konieczności dużych przeróbek. Nazewnictwo to kolejna kwestia zasługująca na uwagę. Spójny przedrostek lub przestrzeń nazw sprawia, że oczywiste jest, które animacje są tokenami, a które lokalnymi zdarzeniami jednorazowymi. Zapobiega także przypadkowym kolizjom i pomaga nowym członkom zespołu szybko rozpoznać wspólny system. Dokumentacja jest tak samo ważna jak sam kod. Nawet krótki komentarz nad każdym tokenem klatki kluczowej może zaoszczędzić wiele godzin późniejszego zgadywania. Programista powinien mieć możliwość otwarcia pliku tokenów, wyszukania potrzebnego efektu i skopiowania wzorca użycia bezpośrednio do swojego komponentu. Elastyczność sprawia, że to podejście jest warte wysiłku. Udostępniając rozsądne niestandardowe właściwości, dajemy zespołom możliwość dostosowania animacji bez psucia systemu. Jednocześnie staraj się nie nadmiernie komplikować. Podaj pokrętła, które mają znaczenie, a resztę oceń. Na koniec pamiętaj o dostępności. Nie każda animacja wymaga alternatywy o ograniczonym ruchu, ale wiele z nich tak. Wczesne wprowadzenie tych poprawek oznacza, że nigdy nie będziemy musieli ich później modernizować, i pokazuje poziom staranności, który nasi użytkownicy zauważą, nawet jeśli nigdy o tym nie wspominają.
Z mojego doświadczenia wynika, że traktowanie tokenów klatek kluczowych jako części naszego przepływu pracy z tokenami projektowymi sprawia, że się one trzymają. Kiedy już zostaną umieszczone, przestają sprawiać wrażenie efektów specjalnych i stają się częścią języka projektowania, naturalnym przedłużeniem sposobu, w jaki produkt się porusza i reaguje. Podsumowanie Animacje mogą być jedną z najprzyjemniejszych części tworzenia interfejsów, ale bez struktury mogą również stać się jednym z największych źródeł frustracji. Traktując klatki kluczowe jak tokeny, bierzesz coś, co zwykle jest niechlujne i trudne w zarządzaniu, i zamieniasz to w przejrzysty, przewidywalny system. Prawdziwa wartość nie polega tylko na zaoszczędzeniu kilku linii kodu. To pewność, że podczas korzystania z zanikania, przesuwania, powiększania lub obracania wiesz dokładnie, jak będzie się to zachowywać w całym projekcie. To elastyczność wynikająca z niestandardowych właściwości bez chaosu niekończących się wariacji. I to w dostępności wbudowanej w fundament, a nie dodanejrefleksja. Widziałem, jak te pomysły sprawdzają się w różnych zespołach i na różnych bazach kodu, a wzorzec jest zawsze taki sam. Gdy tokeny znajdą się na miejscu, klatki kluczowe przestają być rozproszonym zbiorem sztuczek i stają się częścią języka projektowania. Sprawiają, że produkt wydaje się bardziej zamierzony, spójny i żywy. Jeśli weźmiesz jedną rzecz z tego artykułu, niech będzie tak: animacje zasługują na tę samą dbałość i strukturę, jaką już zapewniamy kolorom, typografii i odstępom. Niewielka inwestycja w tokeny klatek kluczowych opłaca się za każdym razem, gdy zmieniasz interfejs.
