A CSS animáció létrehozása

Hogyan lehet létrehozni a töltőterhelés animációját a CSS-ben

Optimalizálás érzékelt Töltse le az időt a tartalomkeret létrehozásával

A mozgás fontos szerepet játszik az alkalmazásokban. Ez segíthet abban, hogy interfészek kifejezőbb és intuitív, valamint biztosítani a legfontosabb információkat, mint például visszacsatolás, amely irányítani képes a felhasználó figyelmét, hogy fontos részei az oldalt.

Amikor az animáció betöltése, a mozgás is nagy szerepet játszhat az észlelt teljesítmény javításában. A megfelelő sebességgel, az irányba vagy a lassú mozgáshoz a terhelés termelékenyebbé tehető.

Jó példa az állítólagos teljesítmény növekedésére – csontváz rakodók. A csontváz betöltő olyan helyőrzőként működhet, amelyek még mindig betöltöttek, segítve a felhasználónak, hogy összpontosítson a haladásra, és ne a várakozási időre. Hangsúlyozza a Google Designer Luke Wromblevski-t:

“Képernyőkeret – ez valójában az oldal üres változata, amelyre az információ fokozatosan betöltődik. Úgy érzi, hogy minden azonnal megtörténik, mert az információ fokozatosan megjelenik a képernyőn. “.

Termék tervező Bill Changa előresegíti a keverékhez, elmagyarázza, hogyan kell hozzáadni mozgás ezekre épültek tovább javítja észlelt teljesítmény:

Alváz képernyők használó egy mozgalom, amely mozog balról jobbra tartják időtartama rövidebb, mint csontvázak, hogy pulzál (fényelnyelés fokozatosan növekszik és csökken)

Ezt fogjuk létrehozni ebben a cikkben. Meg fogjuk vizsgálni az animáció javítását, hogy a megfigyelő panel letöltése egy egyszerű boot számlálóból a töltőanyag-terhelés animációjához.

És a végén kiderül:

Az animáció elég egyszerű, de nagyon hatékony. Szeretnénk animálni a gradientált balról jobbra. Azt is szeretnénk biztosítani, hogy a gradiens áthaladjon a tartályon, hogy eltűnjön, mielőtt elkezdené az egészet.

Amikor a mozgalomra gondolunk, általában az MS között valahol az időtartamra kell törekednünk . Mindaz, ami kevesebb, mint ez az időtartam, az animáció túl gyors lesz az észleléshez; Mindent, amit fentebb jeleznek, lassúnak tűnhet, arra kényszerítve a felhasználókat, hogy azt gondolják, hogy többet várnak, mint amennyit ténylegesen. Fontos megjegyezni, hogy annál nehezebb és nagyobb az animáció, a lassabbnak kell lennie.

A fenti GIF-en az animáció több mint 2 másodpercet vesz igénybe, mivel az alkalmazás teljesítménye lelassul. Ezért kisebb időtartamra megyünk. Azonban nagy méretei miatt még mindig több, mint asszony.

Azt is szeretnénk használni egy kellemes lassulást, hogy az animáció természetesebb legyen. A valós világban semmi sem mozog állandó lineáris sebességgel.

Ahhoz, hogy teljes mértékben megértsük, hogy az animáció hogyan fog működni, a legjobb, ha ezt egy másik animáció segítségével magyarázza meg:

Gradiens animáció

Itt animálni a gradiens balról jobbra, kezdve a külső tartály. Megtörni:

• Kezdő pozíció: A gradiens a látómezőn kívül helyezkedik el, jobb oldala a rögzített tartály elejére vonatkozik.
• Kezdje a negatív eltolással : A gradiens helyzete negatív értékkel kezdődik, amely megfelel a szélességének. Tehát, ha a gradiens szélessége képpont, kezdeti értéke lesz .
• Gradiens elrejtése : Annak megakadályozása, hogy a tartályon kívül megjelenjen, meg kell adnunk .
• Animáció visszaállítása : Az animáció befejezése után a gradiens helyzete visszaáll az elejére.

A HTML oldaláról csak egy elemöltővel dolgozunk. Hadd legyen:

Minden animáció az elem belsejében lesz. Ez egy pszeudo-elem, amelyet gyakran használnak kozmetikumok hozzáadására a kiválasztott elemre. Gondolj egy pszeudo-elemre, mint egy kulcsszó hozzáadva a választóhoz, amely lehetővé teszi, hogy stilizáljon néhány alkatrészt. De mielőtt ezt megtenné, definiáljuk a szülő több stílusát:

A fent meghatározott fontos szabályok – ez az utolsó két sor. Teljesen elhelyezünk egy elemet a tartályában, így az elem aggregátumának van álláspontja és az érték beállítása . Ez megakadályozza a gradiens leképezést a helyőrzőelemen kívül. Menj a pszeudo-elemre:

Használja a pszeudo-elemet

Elemezzük ezt a pszeudo-elem kódot:

• Amint láthatja, mivel a gradiens szélessége képpont, a kezdeti értéknek a bal oldali képpontnak kell lennie.
• Egy másik fontos rész a háttér tulajdonsága. Átlátszóvá kell lépnie, hogy átlátszóvá váljon, hogy tökéletesen keverje össze egy tartály háttérrel. A gradiens színe pontosan 50%.
• És az animációhoz meg kell változtatnia az ingatlant:

A finom animációk kezelésével láthatjuk, hogy megvalósításuk nem igényel sok nehézséget. Az általuk nyújtott felhasználói élmény azonban meghaladja a rájuk töltött időt és erőfeszítéseket.

Ha Ön is módosíthatja a rögzített szélességű a színátmenet százalék, akkor is újra az animáció különböző alakban és méretben. Csak egyszer kell írnia, majd a saját belátása szerint.

Milyen animációk tetszenek a betöltéskor? Tudassa velünk a megjegyzésekben. Köszönöm az idődet.