27. diel - Animácie v React - React Spring a Framer Motion
V predchádzajúcej lekcii, Animácie v React - CSS a tsParticles , sme si ukázali animovanie v React aplikácii pomocou CSS a tiež s knižnicou tsParticles. Výsledkom bolo spustenie efektu konfiet po kliknutí na tlačidlo.
V dnešnom tutoriále pokročilého Reactu sa zoznámime s
dvoma knižnicami používanými na animácie. Konkrétne to budú knižnice
React Spring a Framer Motion a ich hooky
useSpring() a useScroll().
Knižnica React Spring
Knižnica React Spring sa zameriava na využitie pružín a
fyzikálnych modelov na vytváranie plynulých a prirodzene
pôsobiacich animácií. Umožňuje podrobné ovládanie animácií pomocou
konfigurácie animačnej pružiny. Animácie sú založené na
vlastnostiach ako mass (hmotnosť), tension (napätie)
alebo friction (trenie).
Komponent animated
Komponent knižnice React Spring animated sa používa na
obalenie animovaných prvkov. Je to klasická
High-Order-Component, ktorú v Reactu poznáme. Základná
myšlienka High-Order-Component je, že vezme jeden alebo viac
komponentov a vráti nový komponent s rozšírenou funkcionalitou alebo iným
správaním.
Animovaný <div> vyzerá v kóde takto:
...koniec náhľadu článku...
Pokračuj ďalej
Minul si až sem a to je super! Veríme, že ti prvé lekcie ukázali niečo nového a užitočného.
Chceš v kurze pokračovať? Prejdi do prémiové sekcie.
Kúpiť tento kurz
Pred kúpou tohto článku je potrebné kúpiť predchádzajúci diel
Obsah článku spadá pod licenciu Premium, kúpou článku súhlasíš so zmluvnými podmienkami.
- Neobmedzený a trvalý prístup k jednotlivým lekciím.
- Kvalitné znalosti v oblasti IT.
- Zručnosti, ktoré ti pomôžu získať vysnívanú a dobre platenú prácu.
Popis článku
Požadovaný článok má nasledujúci obsah:
V tutoriále pokročilého Reactu si ukážeme prácu s animačnými knižnicami React Spring a Framer Motion a ich hooky useSpring() a useScroll().
Kredity získaš, keď podporíš našu sieť. To môžeš urobiť buď zaslaním symbolickej sumy na podporu prevádzky alebo pridaním obsahu na sieť.
