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

Vedomosti v hodnote stoviek tisíc získaš za pár eur

Došiel 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émiovej sekcie.

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íš s Prevádzkovými podmienkami.

Čo od nás v ďalších lekciách dostaneš?
  • Prístup k jednotlivým lekciám podľa spôsobu obstarania.
  • 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().
Článok pre vás napísala Laura Baluchová
Avatar
Aktivity