Hladké jako máslo: Dosažení 60 FPS animací s CSS3

Animační prvky v mobilních aplikacích jsou snadné.

Správné animování prvků v mobilních aplikacích může být také snadné… pokud se budete řídit našimi tipy zde.

I když v současné době všichni používají animace CSS3 v mobilu, mnoho z nich to nedělá správně. Je třeba vzít v úvahu osvědčené postupy, které jsou neustále a značně ignorovány. Děje se to hlavně proto, že stále existují lidé, kteří opravdu nechápou skutečné důvody, proč tyto praktiky existují, a jsou tak energicky podporováni.

V dnešní době existuje tak velké spektrum specifikací zařízení, že pokud svůj kód neoptimalizujete, aby to bylo možné zvážit, namísto animací, které jsou hladké jako máslo, skončíte tím, že budete mít nejvyšší podíl.

Pamatujte: i když tam jsou nějaká špičková vlajková zařízení, která neustále tlačí obálku, stále máte většinu světa používající typ zařízení, které ve srovnání s těmito monstra není nic jiného než počítadlo s LCD.

Chceme vám dát ruku při správném využití síly CSS3. Abychom to dokázali, musíme nejprve pochopit pár věcí.

Porozumět časové ose

Co dělá prohlížeč při vykreslování a hraní s prvky? Tato velmi jednoduchá časová osa se nazývá Critical Rendering Path.

Zdroj obrázku: www.csstriggers.com

Abychom dosáhli hladkých animací, musíme se zaměřit na změnu vlastností, které ovlivňují krok Složený, namísto přidání tohoto stresu do předchozích vrstev.

1. Styly

Prohlížeč začne počítat styly, které se mají použít v prvcích - Přepočítat styl.

2. Rozvržení

V následující vrstvě začne prohlížeč generovat tvar a polohu pro každý z těchto prvků - Layout. Zde prohlížeč nastavuje vlastnosti stránky, jako je šířka a výška, stejně jako její okraje, nebo například levý / horní / pravý / dolní.

3. Malování

Prohlížeč nyní začne vyplňovat pixely pro každý prvek do vrstev. Mezi vlastnosti, které používá, patří mimo jiné: stín stín, poloměr ohraničení, barva, barva pozadí.

4. Kompozitní

To je místo, kde chcete dělat své kouzlo, protože v tomto okamžiku prohlížeč začne kreslit všechny vrstvy na obrazovce.

Moderní prohlížeče mohou animovat čtyři styly pěkně, docela dobře, s využitím vlastností transformace a krytí.

  • Pozice - transformace: translateX (n) translateY (n) translateZ (n);
  • Měřítko - transformace: měřítko (n);
  • Rotace - transformace: rotace (ndeg);
  • Krytí - krytí: n;

Jak dosáhnout 60 snímků za sekundu

S ohledem na to je na čase vyhrnout si rukávy a začít pracovat.

Začněme s HTML. Vytvoříme velmi jednoduchou strukturu a umístíme naši nabídku aplikací do třídy rozvržení.

Jde o to špatná cesta

Vidíte ty vlastnosti, které jsme změnili? Neměli byste používat přechody s vlastnostmi vlevo / nahoru / vpravo / dole. Ti nevytvářejí tekutou animaci, protože prohlížeč pokaždé vytvářejí rozvržení, které ovlivní všechny jejich děti.

Výsledek je něco takového:

Tato animace není vůbec plynulá. Zkontrolovali jsme s časovou osou DevTools, abychom zjistili, co se děje pod kapotou, a to byl výsledek:

Zelené oblasti představují čas strávený vykreslením animace.

To jasně ukazuje, že FPS jsou nepravidelné a že výkon je poměrně pomalý.

„Zelený pruh označuje FPS. Vysoká lišta označuje, že animace se vykresluje při 60 FPS. Nízký sloupec označuje sub-60 FPS. V ideálním případě tedy chcete, aby byl zelený pruh po celé časové ose trvale vysoký. Tyto červené pruhy také označují škubnutí, takže alternativně je dalším způsobem, jak posoudit svůj pokrok, vyloučení těchto červených pruhů. “
Děkuji, Kayce Basques!

Pomocí Transformace

Vlastnosti transformace ovlivňují kompozit. Zde oznamujeme prohlížeči, že vrstvy budou natřeny a připraveny k provozu, jakmile začne animace, takže při vykreslování animace existuje méně škytavek.

Přesně to ukazuje Timeline:

Výsledky se začínají zlepšovat, FPS jsou pravidelnější, a proto je animace plynulejší.

Spouštění animací v GPU

Vezměme si tedy zářez. Aby to opravdu fungovalo hladce a máslem, použijeme k vykreslení animace GPU.

Přestože některé prohlížeče budou stále potřebovat translateZ () nebo translate3d () jako záložní, vlastnost will-change je budoucnost. To dělá to, že povýší prvky do jiné vrstvy, takže prohlížeč nemusí zvažovat vykreslení rozložení nebo malování.

Vidíš, jak hladké to je? Časová osa zdůvodňuje, že:

FPS animace jsou mnohem konstantní a animace se zde vykresluje mnohem rychleji. Ale stále tam běží dlouhý rám. Na začátku je ještě trochu úzký profil.

Pamatujete si strukturu HTML vytvořenou hned na začátku? Řídíme div v nabídce aplikací na této struktuře pomocí JavaScriptu:

Problém je v tom, že přidáním této třídy do prvku div jsme znovu vytvořili styly prohlížeče - a to ovlivní výkon vykreslování.

60 FPS hladké jako máslo

Co když místo toho vytvoříme nabídku mimo oblast výřezu? Pokud to budete mít v izolované oblasti, zajistíte, že ovlivníte pouze prvek, který chcete skutečně animovat.

Navrhujeme tedy následující strukturu HTML:

A nyní můžeme ovládat stav nabídky poněkud odlišným způsobem. Budeme manipulovat s animacemi ve třídě, která bude odstraněna po uplynutí doby přechodu, pomocí funkce přechodu v JavaScriptu.

Pojďme to všechno dohromady a zkontrolujte výsledky.

Zde je kompletní plně povolený příklad CSS3 se vším na správném místě:

A co nám Timeline ukazuje?

Hladké jako máslo, vidíte?

Úpravy (17. srpna): Kvůli populární poptávce je zde pro vás pracovní příklad:

Upravit (23. února 2017): Část II tohoto článku je aktivní! FLIP vašich 60 FPS animací, FLIP'em dobrý

José Rosário | Mobile and Front-End Expert ve společnosti OutSystems

S tímto máslem si můžete péct dort! Řekněte svým přátelům: LinkedIn | Twitter | Facebook | E-mailem