Képzeld el ezt: csatlakozol egy új projekthez, belemerülsz a kódbázisba, és az első néhány órában felfedezel valami frusztrálóan ismerős dolgot. A stíluslapokon szétszórva több @keyframes definíciót talál ugyanarra az alapvető animációra. Három különböző fade-in effektus, két vagy három diaváltozat, egy maroknyi zoom-animáció és legalább két különböző pörgetési animáció, mert hát miért ne? @keyframes impulzus { innen: { skála: 1; } hogy { skála: 1,1; } }
@keyframes bigger-impulse { 0%, 20%, 100% { skála: 1; } 10%, 40% { skála: 1,2; } }
Ha ez a forgatókönyv ismerősnek tűnik, nem vagy egyedül. Különböző projektek során szerzett tapasztalataim szerint az egyik legkövetkezetesebb gyors győzelem a kulcskockák konszolidálása és szabványosítása. Annyira megbízható mintává vált, hogy most már alig várom, hogy ez a tisztítás az egyik első feladatom legyen bármilyen új kódbázison. Logika a káosz mögött Ez a redundancia teljesen logikus, ha belegondolunk. Mindannyian ugyanazokat az alapvető animációkat használjuk a mindennapi munkánk során: elhalványul, csúszik, nagyít, pörög és más gyakori effektusokat használunk. Ezek az animációk meglehetősen egyszerűek, és könnyen elkészíthető egy gyors @keyframes definíció a munka elvégzéséhez. Központosított animációs rendszer nélkül a fejlesztők természetesen a semmiből írják ezeket a kulcskockákat, nem tudván, hogy hasonló animációk már léteznek máshol a kódbázisban. Ez különösen gyakori, ha komponens alapú architektúrákban dolgozunk (amit manapság legtöbben csinálunk), mivel a csapatok gyakran párhuzamosan dolgoznak az alkalmazás különböző részein. Az eredmény? Animációs káosz. A kis probléma A kulcsképkocka-duplikáció legnyilvánvalóbb problémája az elpazarolt fejlesztési idő és a szükségtelen kódfelfújás. A többszörös kulcskép-definíciók több helyet jelentenek, ahol frissíteni kell, ha a követelmények megváltoznak. Módosítania kell az elhalványulási animáció időzítését? Minden példányt le kell vadásznia a kódbázisában. Szeretné szabványosítani a könnyítési funkciókat? Sok sikert az összes variáció megtalálásához. A karbantartási pontok ilyen megsokszorozása még az egyszerű animációs frissítéseket is időigényes feladattá teszi. A nagyobb probléma Ez a kulcskockák megkettőzése egy sokkal alattomosabb problémát hoz létre a felszín alatt: a globális hatókör csapdáját. Még akkor is, ha komponens alapú architektúrákkal dolgozik, a CSS kulcskeretek mindig a globális hatókörben vannak meghatározva. Ez azt jelenti, hogy minden kulcsképkocka minden összetevőre vonatkozik. Mindig. Igen, az animáció nem feltétlenül használja az összetevőben meghatározott kulcskockákat. Az utolsó kulcskockákat használja, amelyek pontosan megegyeznek a globális hatókörbe betöltött névvel. Mindaddig, amíg az összes kulcsképkocka azonos, ez kisebb problémának tűnhet. De abban a pillanatban, amikor egy animációt egy adott használati esethez szeretne testre szabni, akkor bajba kerül, vagy ami még rosszabb, te leszel az, aki ezeket okozza. Vagy az animáció nem fog működni, mert egy másik összetevő betöltődik a tiéd után, felülírva a kulcskockákat, vagy az összetevő utoljára töltődik be, és véletlenül megváltoztatja az adott kulcsképkocka nevét használó összes többi összetevő animációs viselkedését, és előfordulhat, hogy észre sem veszi. Íme egy egyszerű példa, amely bemutatja a problémát: .component-one { /* összetevőstílusok */ animáció: impulzus 1s könnyű be-ki végtelen váltakozó; }
/* ez a @keyframes definíció nem fog működni */ @keyframes impulzus { innen: { skála: 1; } hogy { skála: 1,1; } }
/* később a kódban... */
.component-two { /* összetevőstílusok */ animáció: impulzus 1s könnyű be-ki végtelen; }
/* ez a kulcskép mindkét komponensre vonatkozik */ @keyframes impulzus { 0%, 20%, 100% { skála: 1; } 10%, 40% { skála: 1,2; } }
Mindkét összetevő ugyanazt az animációnevet használja, de a második @keyframes definíció felülírja az elsőt. Most már mind az első, mind a kettes komponens a második kulcskockát fogja használni, függetlenül attól, hogy melyik komponens melyik kulcskockát határozta meg. Tekintse meg a Pen Keyframes tokeneket – 1. demó [forked], Amit Sheen. A legrosszabb rész? Ez gyakran tökéletesen működik a helyi fejlesztésben, de titokzatosan megszakad a termelésben, amikor az építési folyamatok megváltoztatják a stíluslapok betöltési sorrendjét. A végén olyan animációkat kap, amelyek eltérően viselkednek attól függően, hogy mely komponensek és milyen sorrendben vannak betöltve. A megoldás: Egységes kulcskeretek A válasz erre a káoszra meglepően egyszerű: előre definiált dinamikus kulcskockák egy megosztott stíluslapon tárolva. Ahelyett, hogy hagynánk, hogy minden összetevő meghatározza a saját animációit, központosított kulcskockákat hozunk létre, amelyek jól dokumentáltak és könnyen kezelhetők.használható, karbantartható és a projekt konkrét igényeihez szabott. Tekintsd úgy, mint a kulcskockák tokenjeit. Ahogyan tokeneket használunk a színekhez és a térközökhöz, és sokan már használunk tokeneket az animációs tulajdonságokhoz, például az időtartamhoz és az könnyítő funkciókhoz, miért ne használnánk a tokeneket a kulcskockákhoz is? Ez a megközelítés természetesen integrálható bármely jelenleg használt tervezési token munkafolyamatba, miközben egyszerre megoldja a kis problémát (kódduplikáció) és a nagyobb problémát (globális hatókör ütközései). Az ötlet egyértelmű: hozzon létre egyetlen igazságforrást minden közös animációnkhoz. Ez a megosztott stíluslap gondosan kialakított kulcskockákat tartalmaz, amelyek lefedik a projektünk által ténylegesen használt animációs mintákat. Nincs többé találgatás, hogy létezik-e már valahol a kódbázisunkban egy fade animáció. Nem kell többé véletlenül felülírni az animációkat más összetevőkből. De itt van a kulcs: ezek nem csak statikus másolás-beillesztés animációk. Úgy tervezték őket, hogy dinamikusak és testreszabhatók legyenek az egyéni CSS-tulajdonságokon keresztül, lehetővé téve számunkra a konzisztencia megőrzését, miközben továbbra is rugalmasan hozzáigazíthatjuk az animációkat az adott használati esetekhez, például ha egy kicsit nagyobb „impulzus” animációra van szüksége egy helyen. Az első kulcskockák token készítése Az egyik első alacsonyan lógó gyümölcs, amivel meg kell küzdenünk, az a „fade-in” animáció. Az egyik közelmúltbeli projektemben több mint egy tucat különálló fade-in definíciót találtam, és igen, mindegyik egyszerűen animálta az átlátszatlanságot 0-ról 1-re. Tehát hozzunk létre egy új stíluslapot, nevezzük kf-tokens.css-nek, importáljuk a projektünkbe, és helyezzük el benne a kulcskockáinkat megfelelő megjegyzésekkel. /* keyframes-tokens.css */
/* * Fade In – fade bejárati animáció * Használat: animáció: kf-fade-in 0,3s easy-out; */ @keyframes kf-fade-in { innen: { átlátszatlanság: 0; } hogy { átlátszatlanság: 1; } }
Ez az egyetlen @keyframes deklaráció helyettesíti a kódbázisunkban elszórtan elhalványult animációkat. Tiszta, egyszerű és globálisan alkalmazható. És most, hogy meghatároztuk ezt a tokent, a projektünk során bármely összetevőből használhatjuk: .modal { animáció: kf-fade-in 0.3s easy-out; }
.tooltip { animáció: kf-fade-in 0.2s easy-in-out; }
.notification { animáció: kf-fade-in 0,5s easy-out; }
Tekintse meg a Pen Keyframes Tokens - Demo 2 [forked] Amit Sheen. Megjegyzés: Minden @keyframes nevünkben kf- előtagot használunk. Ez az előtag névtérként szolgál, amely megakadályozza az elnevezési ütközéseket a projektben meglévő animációkkal, és azonnal világossá teszi, hogy ezek a kulcskockák a kulcsképkocka-token fájlunkból származnak. Dinamikus dia készítése A kf-fade-in kulcskockák nagyszerűen működnek, mert egyszerűek, és kevés hely van a dolgok elrontására. Más animációknál azonban sokkal dinamikusabbnak kell lennünk, és itt ki tudjuk használni a CSS egyedi tulajdonságainak hatalmas erejét. Ez az, ahol a kulcskockák tokenek igazán ragyognak a szétszórt statikus animációkhoz képest. Vegyünk egy általános forgatókönyvet: „becsúsztatható” animációk. De honnan csúszik be? 100px jobbról? 50% balról? A képernyő tetejéről kell belépnie? Vagy talán alulról lebegni? Sok lehetőség van, de ahelyett, hogy minden irányhoz és változathoz külön kulcskockákat hoznánk létre, létrehozhatunk egy rugalmas tokent, amely minden forgatókönyvhöz alkalmazkodik: /* * Slide In - irányított dia animáció * Az irány szabályozásához használja a --kf-slide-from parancsot * Alapértelmezés: balról becsúszik (-100%) * Használat: * animáció: kf-slide-in 0,3 mp-es egyszerűsítés; * --kf-slide-from: -100px 0; // csúsztatás balról * --kf-slide-from: 100px 0; // csúsztatás jobbról * --kf-slide-from: 0 -50px; // csúsztatás felülről */
@keyframes kf-slide-in { innen: { fordítás: var(--kf-slide-from, -100% 0); } hogy { lefordítani: 0 0; } }
Most már használhatjuk ezt az egyetlen @keyframes tokent bármilyen csúszási irányhoz egyszerűen a --kf-slide-from egyéni tulajdonság megváltoztatásával: .sidebar { animáció: kf-slide-in 0.3s easy-out; /* Alapértelmezett értéket használ: balról csúszik */ }
.notification { animáció: kf-slide-in 0,4s easy-out; --kf-slide-from: 0 -50px; /* csúsztatás felülről */ }
.modal { animáció: kf-fade-in 0,5 s, kf-slide-in 0,5s cubic-bezier(0,34, 1,56, 0,64, 1); --kf-slide-from: 50px 50px; /* csúsztatás jobbra lentről */ }
Ez a megközelítés hihetetlen rugalmasságot biztosít számunkra a következetesség megőrzése mellett. Egy kulcsképkocka deklaráció, végtelen lehetőség. Tekintse meg a Pen Keyframes Tokens - Demo 3 [forked] Amit Sheen. Ha pedig még rugalmasabbá akarjuk tenni animációinkat, lehetővé téve a „kicsúsztatható” effektusokat is,egyszerűen adjon hozzá egy --kf-slide-to egyéni tulajdonságot, hasonlóan ahhoz, amit a következő részben látni fogunk. Kétirányú zoom kulcsképek Egy másik gyakori animáció, amely a projektek között megkettőződik, a „zoom” effektusok. Legyen szó finom nagyításról pohárköszöntő üzenetekhez, drámai nagyításról a modálisokhoz, vagy finom kicsinyítésről a címsorokhoz, a zoom animációk mindenhol megtalálhatók. Ahelyett, hogy minden skálaértékhez külön kulcskockákat hoznánk létre, készítsünk egy rugalmas kf-zoom kulcskockát:
/* * Zoom - léptékű animáció * A --kf-zoom-from és a --kf-zoom-to használatával szabályozhatja a skálaértékeket * Alapértelmezett: 80%-ról 100%-ra nagyít (0,8-1) * Használat: * animáció: kf-zoom 0,2 mp-es könnyítés; * --kf-zoom-from: 0,5; --kf-zoom-to: 1; // nagyítás 50%-ról 100%-ra * --kf-zoom-from: 1; --kf-zoom-to: 0; // nagyítás 100%-ról 0%-ra * --kf-zoom-from: 1; --kf-zoom-to: 1.1; // nagyítás 100%-ról 110%-ra */
@keyframes kf-zoom { innen: { skála: var(--kf-zoom-from, 0,8); } hogy { skála: var(--kf-zoom-to, 1); } }
Egy definícióval bármilyen nagyítási variációt elérhetünk, amire szükségünk van: .toast { animáció: kf-slide-in 0,2 s, kf-zoom 0.4s könnyű-kiegyenlítés; --kf-slide-from: 0 100%; /* csúsztatás felülről */ /* Alapértelmezett nagyítást használ: 80%-ról 100%-ra léptet */ }
.modal { animáció: kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-from: 0; /* drámai nagyítás 0%-ról 100%-ra */ }
.heading { animáció: kf-fade-in 2s, kf-zoom 2s könnyű beépíthetőség; --kf-zoom-from: 1.2; --kf-zoom-to: 0,8; /* finom lekicsinyítés */ }
Az alapértelmezett 0,8 (80%) tökéletesen működik a legtöbb kezelőfelület-elemhez, például a pohárköszöntő üzenetekhez és a kártyákhoz, miközben továbbra is könnyen testreszabható különleges esetekre. Tekintse meg a Pen Keyframes Tokens - Demo 4 [forked] Amit Sheen. Talán észrevett valami érdekeset a legutóbbi példákban: animációkat kombináltunk. A @keyframes tokenekkel való munka egyik legfontosabb előnye, hogy zökkenőmentesen integrálhatók egymással. Ez a sima kompozíció szándékos, nem véletlen. Az animáció kompozícióját később részletesebben tárgyaljuk, beleértve azt is, hogy hol válhatnak problémássá, de a legtöbb kombináció egyszerű és könnyen megvalósítható. Megjegyzés: A cikk írása közben, és talán az írása miatt, azon kaptam magam, hogy újragondolom a belépő animációk gondolatát. A CSS közelmúltbeli fejlesztései mellett szükségünk van rájuk egyáltalán? Szerencsére Adam Argyle ugyanezeket a kérdéseket vizsgálta meg, és remekül fogalmazta meg őket a blogjában. Ez nem mond ellent az itt leírtaknak, de megfontolandó megközelítést mutat, különösen, ha a projektjei nagymértékben támaszkodnak a belépő animációkra. Folyamatos animációk Míg a belépő animációk, mint például az „elhalványulás”, a „csúszás” és a „nagyítás” egyszer előfordulnak, majd leállnak, a folyamatos animációk korlátlanul köröznek, hogy felhívják a figyelmet vagy jelezzék a folyamatban lévő tevékenységet. A két leggyakrabban előforduló folyamatos animáció, amellyel találkozom, a „spin” (betöltésjelzőkhöz) és a „pulse” (a fontos elemek kiemeléséhez). Ezek az animációk egyedi kihívások elé állítják a kulcskockák tokenek létrehozását. A bejárati animációkkal ellentétben, amelyek jellemzően egyik állapotból a másikba kerülnek, a folyamatos animációk viselkedési mintáinak nagymértékben testreszabhatónak kell lenniük. A Spin Doktor Úgy tűnik, hogy minden projekt több pörgetési animációt használ. Egyesek az óramutató járásával megegyezően, mások az óramutató járásával ellentétes irányban forognak. Egyesek egyetlen 360 fokos elforgatást hajtanak végre, mások több fordulatot is megtesznek a gyorsabb hatás érdekében. Ahelyett, hogy minden változathoz külön kulcskockákat hoznánk létre, építsünk fel egy rugalmas pörgetést, amely minden forgatókönyvet kezel:
/* * Spin - forgási animáció * A --kf-spin-from és --kf-spin-to használatával szabályozhatja a forgási tartományt * A --kf-spin-turns segítségével szabályozhatja a forgatás mértékét * Alapértelmezés: 0 fokról 360 fokra forgat (1 teljes forgatás) * Használat: * animáció: kf-spin 1s lineáris végtelen; * --kf-spin-turns: 2; // 2 teljes fordulat * --kf-spin-from: 0deg; --kf-spin-to: 180 fok; // félforgatás * --kf-spin-from: 0deg; --kf-spin-to: -360 fok; // az óramutató járásával ellentétes irányba */
@keyframes kf-spin { innen: { forgatás: var(--kf-spin-from, 0deg); } hogy { forgatás: calc(var(--kf-spin-from, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-spin-turns, 1)); } }
Most bármilyen pörgetési variációt létrehozhatunk, ami tetszik:
.loading-spinner { animáció: kf-spin 1s lineáris végtelen; /* Alapértelmezést használ: 0 fokról 360 fokra forog */ }
.fast-loader { animáció: kf-spin 1.2s easy-in-out végtelen alternate; --kf-spin-turns: 3; /* 3 teljes fordulat minden irányban ciklusonként*/ }
.steped-reverse { animáció: kf-spin 1,5 s lépések(8) végtelen; --kf-spin-to: -360 fok; /* az óramutató járásával ellentétes irányban */ }
.subtle-wiggle { animáció: kf-spin 2s easy-in-out végtelen alternate; --kf-spin-tól: -16 fok; --kf-spin-to: 32 fok; /* billeg 36 fok: -18 fok és +18 fok között */ }
Tekintse meg a Pen Keyframes Tokens - Demo 5 [forked] Amit Sheen. Ennek a megközelítésnek az a szépsége, hogy ugyanazok a kulcskockák működnek a pörgetők betöltéséhez, a forgó ikonok, a mozgó effektusok és még az összetett, többfordulatú animációk betöltéséhez is. A pulzusparadoxon Az impulzusanimációk bonyolultabbak, mert különböző tulajdonságokat képesek „pulzálni”. Egyesek pulzálják a skálát, mások az átlátszatlanságot, és vannak olyan színtulajdonságok, mint a fényerő vagy a telítettség. Ahelyett, hogy minden tulajdonsághoz külön kulcskockákat hoznánk létre, létrehozhatunk olyan kulcskockákat, amelyek bármely CSS-tulajdonnal működnek. Íme egy példa egy impulzusos kulcskockára léptékezési és átlátszatlansági beállításokkal:
/* * Pulse - pulzáló animáció * A skálatartomány szabályozásához használja a --kf-pulse-scale-from és a --kf-pulse-scale-to funkciót. * A --kf-pulse-opacity-from és a --kf-pulse-opacity-to használatával szabályozhatja az átlátszatlanság tartományát * Alapértelmezés: nincs impulzus (minden érték 1) * Használat: * animáció: kf-pulse 2s könnyítés-be-ki végtelen alternate; * --kf-impulzus-skála-tól: 0,95; --kf-pulse-scale-to: 1,05; // skála impulzus * --kf-impulzus-átlátszatlanság-tól: 0,7; --kf-impulzus-átlátszatlanság-hoz: 1; // opacitás impulzus */
@keyframes kf-pulse { innen: { skála: var(--kf-pulse-scale-from, 1); opacitás: var(--kf-impulzus-átlátszatlanság-from, 1); } hogy { skála: var(--kf-pulse-scale-to, 1); átlátszatlanság: var(--kf-pulse-pacity-to, 1); } }
Ez rugalmas impulzust hoz létre, amely több tulajdonságot képes animálni: .call-to-action { animáció: kf-pulse 0.6s végtelen alternate; --kf-impulzus-átlátszatlanság-tól: 0,5; /* átlátszatlansági impulzus */ }
.notification-dot { animáció: kf-impulzus 0.6s könnyű be-ki végtelen alternate; --kf-impulzus-skála-tól: 0,9; --kf-pulse-scale-to: 1.1; /* skála impulzus */ }
.text-highlight { animáció: kf-pulse 1.5s easy-out végtelen; --kf-impulzus-skála-tól: 0,8; --kf-impulzus-átlátszatlanság-tól: 0,2; /* skála és átlátszatlanság impulzus */ }
Tekintse meg a Pen Keyframes tokeneket – Amit Sheen [forked] 6. demóját. Ez az egyetlen kf-impulzusos kulcsképkocka mindent képes kezelni a finom figyelemfelkeltéstől a drámai kiemelésekig, miközben könnyen testreszabható. Speciális könnyítés A kulcskockák tokenek használatában az egyik nagyszerű dolog az, hogy milyen egyszerűen bővíthető az animációs könyvtárunk, és olyan effektusokat biztosítunk, amelyeket a legtöbb fejlesztő semmiképpen nem írna le, például rugalmas vagy ugráló hatást. Íme egy példa egy egyszerű „bounce” kulcskockákra, amely egy --kf-bounce-from egyéni tulajdonságot használ az ugrás magasságának szabályozására. /* * Bounce - pattogó belépő animáció * Az ugrás magasságának szabályozásához használja a --kf-bounce-fro gombot * Alapértelmezés: ugrik 100 Vh-ról (képernyőn kívül) * Használat: * animáció: kf-bounce 3s easy-in; * --kf-bounce-from: 200px; // ugrás 200 képpont magasságból */
@keyframes kf-bounce { 0% { fordítás: 0 calc(var(--kf-bounce-from, 100vh) * -1); }
34% { lefordítás: 0 calc(var(--kf-bounce-from, 100vh) * -0,4); }
55% { lefordítás: 0 calc(var(--kf-bounce-from, 100vh) * -0,2); }
72% { fordítás: 0 calc(var(--kf-bounce-from, 100vh) * -0,1); }
85% { lefordítás: 0 calc(var(--kf-bounce-from, 100vh) * -0,05); }
94% { lefordítás: 0 calc(var(--kf-bounce-from, 100vh) * -0,025); }
99% { lefordítás: 0 calc(var(--kf-bounce-from, 100vh) * -0,0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { lefordítani: 0 0; animáció-időzítés funkció: könnyítés; } }
Az olyan animációk, mint az „elasztikus”, kicsit bonyolultabbak a kulcskockákon belüli számítások miatt. Külön kell definiálnunk a --kf-elastic-from-X és a --kf-elastic-from-Y paramétereket (mindkettő nem kötelező), és ezek együtt lehetővé teszik, hogy rugalmas bejáratot hozzunk létre a képernyő bármely pontjáról.
/* * Elastic In – rugalmas bejárati animáció * Használja a --kf-elastic-from-X és a --kf-elastic-from-Y-t a kezdőpozíció szabályozásához * Alapértelmezés: felülről, középről lép be (0, -100 Vh) * Használat: * animáció: kf-elastic-in 2s easy-in-out mindkettő; * --kf-elastic-from-X: -50px; * --kf-elastic-from-Y: -200px; // írja be innen (-50px, -200px) */
@keyframes kf-elastic-in { 0% { fordítás: calc(var(--kf-elastic-from-X, -50vw) * 1) calc(var(--kf-elastic-from-Y, 0px) * 1); }
16% { fordítás: calc(var(--kf-elastic-from-X, -50vw) * -0,3227) calc(var(--kf-elastic-from-Y, 0px) * -0,3227); }
28% { fordítás: calc(var(--kf-elastic-from-X, -50vw) * 0,1312)calc(var(--kf-elastic-from-Y, 0px) * 0,1312); }
44% { fordítás: calc(var(--kf-elastic-from-X, -50vw) * -0,0463) calc(var(--kf-elastic-from-Y, 0px) * -0,0463); }
59% { fordítás: calc(var(--kf-elastic-from-X, -50vw) * 0,0164) calc(var(--kf-elastic-from-Y, 0px) * 0,0164); }
73% { fordítás: calc(var(--kf-elastic-from-X, -50vw) * -0,0058) calc(var(--kf-elastic-from-Y, 0px) * -0,0058); }
88% { fordítás: calc(var(--kf-elastic-from-X, -50vw) * 0,0020) calc(var(--kf-elastic-from-Y, 0px) * 0,0020); }
100% { lefordítani: 0 0; } }
Ez a megközelítés egyszerűvé teszi a fejlett kulcskockák újrafelhasználását és testreszabását projektünkben, mindössze egyetlen egyéni tulajdonság megváltoztatásával.
.bounce-and-zoom { animáció: kf-bounce 3s easy-in, kf-zoom 3s lineáris; --kf-zoom-from: 0; }
.bounce-and-slide { animáció-kompozíció: add; /* Mindkét animáció a fordítást használja */ animáció: kf-bounce 3s easy-in, kf-slide-in 3s easy-out; --kf-slide-from: -200px; }
.elastic-in { animáció: kf-elastic-in 2s easy-in-out mindkettő; }
Tekintse meg a Pen Keyframes Tokeneket – Amit Sheen [forked] 7. demóját. Eddig a pontig láttuk, hogyan konszolidálhatjuk a kulcskockákat intelligens és hatékony módon. Természetesen érdemes lehet finomítani a dolgokat, hogy jobban megfeleljenek a projekt igényeinek, de bemutattunk példákat számos gyakori animációra és mindennapi használati esetre. És a helyükön lévő kulcsképkocka-tokenekkel hatékony építőelemekkel rendelkezünk, amelyekkel konzisztens, karbantartható animációkat hozhatunk létre az egész projektben. Nincs több duplikált kulcskép, nincs több globális hatóköri ütközés. Csak egy tiszta, kényelmes módja annak, hogy kezeljük az összes animációs igényünket. De az igazi kérdés az: hogyan állítjuk össze ezeket az építőkockákat? Mindent összerakva Láttuk, hogy az alapvető kulcskockák tokenek kombinálása egyszerű. Nem kell semmi különös, csak az első animáció definiálása, a második definiálása, a változók igény szerinti beállítása, és kész. /* Beúsztatás + becsúsztatás */ .toast { animáció: kf-fade-in 0,4 s, kf-slide-in 0,4s cubic-bezier(0,34, 1,56, 0,64, 1); --kf-slide-from: 0 40px; }
/* Nagyítás + elhalványítás */ .modal { animáció: kf-fade-in 0,3 s, kf-zoom 0,3 s cubic-bezier(0,34, 1,56, 0,64, 1); --kf-zoom-from: 0,7; --kf-zoom-to: 1; }
/* Becsúsztatás + impulzus */ .notification { animáció: kf-slide-in 0,5 s, kf-impulzus 1.2s könnyű be-ki végtelen váltakozó; --kf-slide-from: -100px 0; --kf-impulzus-skála-tól: 0,95; --kf-pulse-scale-to: 1,05; }
Ezek a kombinációk szépen működnek, mert minden animáció más tulajdonságot céloz meg: átlátszatlanság, transzformáció (fordítás/méretezés), stb. De néha vannak konfliktusok, és tudnunk kell, miért és hogyan kezeljük ezeket. Ha két animáció ugyanazt a tulajdonságot próbálja meg animálni – például mindkettő animációs léptéket vagy mindkettőt animálja az átlátszatlanságot –, az eredmény nem az lesz, amit vársz. Alapértelmezés szerint az animációk közül csak az egyiket alkalmazza az adott tulajdonságra, amely az utolsó az animációs listában. Ez korlátozza azt, hogy a CSS hogyan kezel több animációt ugyanazon a tulajdonságon. Ez például nem fog megfelelően működni, mert csak a kf-impulzus animáció lesz érvényes. .bad-combo { animáció: kf-zoom 0,5 mp előre, kf-impulzus 1.2s végtelen alternate; --kf-zoom-from: 0,5; --kf-zoom-to: 1.2; --kf-impulzus-skála-tól: 0,8; --kf-pulse-scale-to: 1.1; }
Animáció kiegészítés Több, ugyanazt a tulajdonságot befolyásoló animáció kezelésének legegyszerűbb és legközvetlenebb módja az animáció-összeállítás tulajdonság használata. A fenti utolsó példában a kf-impulzus animáció helyettesíti a kf-zoom animációt, így nem fogjuk látni a kezdeti nagyítást, és nem kapjuk meg a várt 1,2-es léptéket. A hozzáadandó animáció-kompozíció beállításával azt mondjuk a böngészőnek, hogy kombinálja a két animációt. Ez adja meg a kívánt eredményt. .component-two { animáció-kompozíció: add; }
Tekintse meg a Pen Keyframes Tokens - Demo 8 [forked] Amit Sheen. Ez a megközelítés jól működik a legtöbb esetben, amikor ugyanazon a tulajdonságon szeretnénk hatásokat kombinálni. Akkor is hasznos, ha az animációkat statikus tulajdonságértékekkel kell kombinálnunk. Például, ha van egy elemünk, amely a translate tulajdonságot használja, hogy pontosan oda helyezze el, ahol szeretnénk, majd animálni akarjuk a kf-slide-in kulcskockákkal, akkor csúnya látható ugrást kapunk animáció-kompozíció nélkül. Tekintse meg a Pen Keyframes Tokeneket – Amit Sheen [forked] 9. demóját. Az animáció-kompozíció hozzáadásával az animáció simán kombinálható a meglévővelátalakítani, így az elem a helyén marad, és a várt módon animál. Animáció Stagger A több animáció kezelésének másik módja az, hogy „elosztjuk” őket – vagyis a második animációt valamivel az első befejezése után kezdjük el. Nem minden esetben működő megoldás, de hasznos, ha bejárati animációt követünk egy folyamatos animációval. /* fade in + opacitás impulzus */ .notification { animáció: kf-fade-in 2s könnyítés, kf-impulzus 0,5s 2s könnyítés-be-ki végtelen váltakozó; --kf-impulzus-átlátszatlanság-hoz: 0,5; }
Tekintse meg a Pen Keyframes Tokens - Demo 10 [forked] Amit Sheen. Rendelés számít Az általunk használt animációk nagy része a transzformáció tulajdonságot használja. A legtöbb esetben ez egyszerűen kényelmesebb. A teljesítmény előnye is van, mivel a transzformációs animációk GPU-gyorsíthatók. De ha transzformációkat használunk, el kell fogadnunk, hogy az átalakítások végrehajtásának sorrendje számít. Nagyon sokat. Eddigi kulcskockáinkban egyéni átalakításokat használtunk. A specifikációk szerint ezek mindig rögzített sorrendben kerülnek alkalmazásra: először az elem fordítása, majd elforgatása, majd méretezése. Ennek van értelme, és legtöbbünk ezt várja el. Ha azonban a transzformáció tulajdonságot használjuk, akkor a függvények írási sorrendje az alkalmazásuk sorrendje. Ebben az esetben, ha valamit 100 pixeles mozgatunk az X tengelyen, majd elforgatjuk 45 fokkal, az nem ugyanaz, mint először 45 fokkal elforgatni, majd 100 pixelrel elmozdítani. /* Rózsaszín négyzet: Először fordítsa le, majd forgassa */ .example-one { transzformáció: translateX(100px) rotate(45deg); }
/* Zöld négyzet: Először forgasd, majd fordítsd */ .example-two { transzformáció: forgatás(45 fok) fordításX(100px); }
Tekintse meg a Pen Keyframes tokeneket – Amit Sheen [forked] 11. demóját. De az átalakítási sorrend szerint minden egyéni átalakítás – minden, amit a kulcskockákhoz használtunk – az átalakítási függvények előtt történik. Ez azt jelenti, hogy bármi, amit a transzformációs tulajdonságban állít be, az animációk után fog megtörténni. De ha például a fordítást a kf-spin kulcskockákkal együtt állítja be, akkor a fordítás az animáció előtt fog megtörténni. Mégis összezavarodott?! Ez olyan helyzetekhez vezet, amikor a statikus értékek eltérő eredményeket eredményezhetnek ugyanahhoz az animációhoz, például a következő esetben:
/* Közös animáció mindkét forgóhoz */ .spinner { animáció: kf-spin 1s lineáris végtelen; }
/* Rózsaszín fonó: lefordítás elforgatás előtt (egyedi átalakítás) */ .spinner-pink { fordítás: 100% 50%; }
/* Zöld fonó: forgasd, majd fordítsd (funkciók sorrendje) */ .spinner-green { transzformáció: fordít(100%, 50%); }
Tekintse meg a Pen Keyframes Tokens - Demo 12 [forked] Amit Sheen. Látható, hogy az első fonó (rózsaszín) olyan fordítást kap, amely a kf-spin forgatása előtt történik, tehát először a helyére kerül, majd megpördül. A második spinner (zöld) kap egy translate() függvényt, ami az egyedi transzformáció után történik, így az elem először forog, majd elmozdul az aktuális szögéhez képest, és megkapjuk azt a széles pálya effektust. Nem, ez nem hiba. Ez csak egy azon dolgok közül, amelyeket tudnunk kell a CSS-ről, és szem előtt kell tartanunk, ha több animációval vagy több átalakítással dolgozunk. Ha szükséges, további kf-spin-alt kulcskockákat is létrehozhat, amelyek a rotate() függvény segítségével elforgatják az elemeket. Csökkentett mozgás És miközben alternatív kulcskockákról beszélünk, nem hagyhatjuk figyelmen kívül a „nincs animáció” opciót. A keyframe tokenek használatának egyik legnagyobb előnye, hogy a kisegítő lehetőségeket be lehet építeni, és ez valójában meglehetősen egyszerű. A kisegítő lehetőségeket szem előtt tartó kulcskockáink tervezésével biztosíthatjuk, hogy a csökkentett mozgást preferáló felhasználók simább, kevésbé zavaró élményben részesüljenek, extra munka és kódmásolás nélkül. A „Csökkentett mozgás” pontos jelentése animációról a másikra és projektről projektre kissé változhat, de itt van néhány fontos szempont, amelyet szem előtt kell tartani: Kulcskockák némítása Míg néhány animáció lágyítható vagy lelassítható, vannak olyanok, amelyeknek teljesen el kell tűnniük, ha csökkentett mozgást kérnek. Az impulzusanimációk jó példa erre. Annak érdekében, hogy ezek az animációk ne fussanak csökkentett mozgás módban, egyszerűen becsomagolhatjuk őket a megfelelő médialekérdezésbe.
@media (prefers-redduced-motion: no-preference) { @keyfrmaes kf-pulse { innen: { skála: var(--kf-pulse-scale-from, 1); opacitás: var(--kf-impulzus-átlátszatlanság-from, 1); } hogy { skála: var(--kf-pulse-scale-to, 1); átlátszatlanság:var(--kf-impulzus-átlátszatlanság-to, 1); } } }
Ez biztosítja, hogy azok a felhasználók, akik a kicsinyítés előnyben részesíti a mozgást, nem látják az animációt, és a preferenciáiknak megfelelő élményt kapnak. Azonnali belépés Vannak olyan kulcskockák, amelyeket nem tudunk egyszerűen eltávolítani, például a bejárati animációkat. Az értéknek változnia kell, animálnia kell; ellenkező esetben az elemnek nem lesz megfelelő értéke. De csökkentett mozgás esetén ennek az átmenetnek a kezdeti értékről azonnalinak kell lennie. Ennek elérése érdekében meghatározunk egy extra kulcskockát, ahol az érték azonnal a végállapotba ugrik. Ezek válnak az alapértelmezett kulcskereteinkké. Ezután hozzáadjuk a normál kulcskockákat a prefers-reduced-motion set no-preference értékre vonatkozó médialekérdezésbe, akárcsak az előző példában. /* azonnal beugrik a csökkentett mozgás érdekében */ @keyframes kf-zoom { innen, ide: { skála: var(--kf-zoom-to, 1); } }
@media (prefers-redduced-motion: no-preference) { /* Eredeti zoom kulcskockák */ @keyframes kf-zoom { innen: { skála: var(--kf-zoom-from, 0,8); } hogy { skála: var(--kf-zoom-to, 1); } } }
Így azok a felhasználók, akik a csökkentett mozgást részesítik előnyben, azonnal látják az elemet a végső állapotában, míg mindenki más megkapja az animált átmenetet. A lágy megközelítés Vannak esetek, amikor szeretnénk némi mozgást megtartani, de sokkal lágyabban és nyugodtabban, mint az eredeti animáció. Például egy ugráló bejáratot helyettesíthetünk egy gyengéd fade-in-re.
@keyframes kf-bounce { /* Lágy beúsztatás a mozgás csökkentése érdekében */ }
@media (prefers-redduced-motion: no-preference) { @keyframes kf-bounce { /* Eredeti visszapattanó kulcskockák */ } }
Mostantól a csökkentett mozgást engedélyező felhasználók továbbra is érezhetik a megjelenést, de az ugráló vagy rugalmas animáció intenzív mozgása nélkül. Ha az építőelemek a helyükön vannak, a következő kérdés az, hogyan lehet őket a tényleges munkafolyamat részévé tenni. Rugalmas kulcskockák írása egy dolog, de ahhoz, hogy megbízhatóvá tegyem őket egy nagy projektben, néhány stratégiára van szükség, amelyeket kemény úton kellett megtanulnom. Megvalósítási stratégiák és legjobb gyakorlatok Ha már rendelkezünk egy szilárd kulcskockák token-könyvtárával, az igazi kihívás az, hogyan hozzuk be őket a mindennapi munkába.
A kísértés az, hogy egyszerre dobjuk be az összes kulcskockát, és deklaráljuk a problémát megoldottnak, de a gyakorlatban azt tapasztaltam, hogy a legjobb eredményt a fokozatos elfogadás adja. Kezdje a leggyakoribb animációkkal, mint például a fade vagy slide. Ezek olyan könnyű nyeremények, amelyek azonnali értéket mutatnak anélkül, hogy nagy átírást igényelnének. A névadás egy másik szempont, amely figyelmet érdemel. A következetes előtag vagy névtér nyilvánvalóvá teszi, hogy mely animációk tokenek, és melyek helyi egyediek. Ezenkívül megakadályozza a véletlen ütközéseket, és segít az új csapattagoknak egy pillantással felismerni a megosztott rendszert. A dokumentáció ugyanolyan fontos, mint maga a kód. Még egy rövid megjegyzés az egyes kulcskockák tokenje felett is órákat takaríthat meg a találgatásoktól. A fejlesztőnek képesnek kell lennie arra, hogy megnyitja a token fájlt, megkeresse a szükséges hatást, és közvetlenül az összetevőjébe másolja a használati mintát. A rugalmasság az, ami miatt ez a megközelítés megéri az erőfeszítést. Az ésszerű egyéni tulajdonságok feltárásával teret adunk a csapatoknak az animáció adaptálására a rendszer feltörése nélkül. Ugyanakkor igyekezzen nem túlbonyolítani. Adja meg azokat a gombokat, amelyek számítanak, a többit pedig hagyja véleménynyilvánítani. Végül ne feledje a kisegítő lehetőségeket. Nem minden animációnak van szüksége csökkentett mozgású alternatívára, de sok esetben igen. Ha korán elvégezzük ezeket a beállításokat, akkor soha nem kell később utólag beszerelnünk őket, és ez olyan szintű odafigyelést mutat, amelyet a felhasználók akkor is észrevesznek, ha soha nem említik.
Tapasztalataim szerint a kulcskockák tokenjeit a tervezési tokenek munkafolyamat részeként kezelve ragaszkodnak hozzájuk. Amint a helyükre kerültek, megszűnik a speciális effektusok érzése, és a tervezési nyelv részévé válnak, ami a termék mozgásának és reakcióinak természetes kiterjesztése. Becsomagolás Az animációk a felületek építésének egyik legörömtelibb része lehet, de szerkezet nélkül a frusztráció egyik legnagyobb forrásává is válhatnak. Ha a kulcskockákat tokenként kezeli, akkor az általában rendetlen és nehezen kezelhető dolgokat egy világos, kiszámítható rendszerré alakítja át. Az igazi érték nem csupán néhány sor kód mentése. Abban a bizalomban van, hogy amikor halványítást, csúsztatást, nagyítást vagy pörgetést használ, pontosan tudja, hogyan fog viselkedni a projekt során. Ez az egyedi tulajdonságokból származó rugalmasság a végtelen változatok káosza nélkül. És ez az alapba épített akadálymentesítésben van, nem pedig hozzáadvaegy utólagos gondolat. Láttam, hogy ezek az ötletek különböző csapatokban és különböző kódbázisokban működnek, és a minta mindig ugyanaz. Amint a tokenek a helyükre kerültek, a kulcskockák többé nem trükkök szétszórt gyűjteménye, és a tervezési nyelv részévé válnak. Szándékosabbá, következetesebbé és élethűbbé teszik a terméket. Ha egy dolgot veszünk ebből a cikkből, az legyen a következő: az animációk megérdemlik ugyanazt a törődést és felépítést, mint amit a színek, a tipográfia és a térközök tekintetében már mi is megadunk. A kulcskockákba tett kis befektetés minden alkalommal megtérül, amikor a felület mozog.
