Lekce 27 - Animace v Reactu - React Spring a Framer Motion
V předchozí lekci, Animace v Reactu - CSS a tsParticles, jsme si ukázali animování v React aplikaci pomocí CSS a také s knihovnou tsParticles. Výsledkem bylo spuštění efektu konfet po kliknutí na tlačítko.
V dnešním tutoriálu pokročilého Reactu se seznámíme
se dvěma knihovnami používanými k animacím. Konkrétně to budou knihovny
React Spring a Framer Motion a jejich hooky
useSpring() a useScroll().
Knihovna React Spring
Knihovna React Spring se zaměřuje na využití pružin a
fyzikálních modelů pro vytváření plynulých a přirozeně
působících animací. Umožňuje podrobné ovládání animací pomocí
konfigurace animační pružiny. Animace jsou založeny na
vlastnostech jako mass (hmotnost), tension (napětí)
nebo friction (tření).
Komponenta animated
Komponenta knihovny React Spring animated se používá k
obalení animovaných prvků. Je to klasická
High-Order-Component, kterou v Reactu známe. Základní myšlenka
High-Order-Component je, že vezme jednu nebo více komponent a
vrátí novou komponentu s rozšířenou funkcionalitou nebo jiným
chováním.
Animovaný <div> vypadá v kódu takto:
...konec náhledu článku...
Pokračuj dál
Došel jsi až sem a to je super! Věříme, že ti první lekce ukázaly něco nového a užitečného.
Chceš v kurzu pokračovat? Přejdi do prémiové sekce.
Koupit tento kurz
Před koupí tohoto článku je třeba koupit předchozí díl
Obsah článku spadá pod licenci Premium, koupí článku souhlasíš se smluvními podmínkami.
- Neomezený a trvalý přístup k jednotlivým lekcím.
- Kvalitní znalosti v oblasti IT.
- Dovednosti, které ti pomohou získat vysněnou a dobře placenou práci.
Popis článku
Požadovaný článek má následující obsah:
V tutoriálu pokročilého Reactu si ukážeme práci s animačními knihovnami React Spring a Framer Motion a jejich hooky useSpring() a useScroll().
Kredity získáš, když podpoříš naši síť. To můžeš udělat buď zasláním symbolické částky na podporu provozu nebo přidáním obsahu na síť.
