Animated1.0.0

Asi 5 minut · React 16.8+ · React DOM

Začínáme

Od instalace po gesta a pohyb příchodu a odchodu v šesti krocích. Každý krok je malá funkční komponenta.

  1. Instalace

    Animated nemá za běhu žádné závislosti. React 16.8+ je peer závislost.

    Vstupní bod balíčku je označený 'use client'. V App Router Next.js může serverový layout renderovat AnimatedProvider; hooky a Animated.<tag> používejte uvnitř Client Components.

    npm install @kkwaenggwari/animated

    Import @kkwaenggwari/animated se ve vašem editoru vyřeší.

  2. Pohněte první hodnotou

    useAnimatedValue(1) vlastní živé číslo po celou dobu života komponenty. Vložte ho přímo do style: stane se proměnnou CSS, takže React během jeho změn nerenderuje.

    timing(value, { toValue, duration }).start() jím pohne. Další stisk v půli cesty začne od aktuální průhlednosti.

    Příprava příkladu…

    Box zmizí a znovu se objeví a druhý stisk v půli cesty obrátí směr z místa, kde je.

  3. Odvoďte z jedné hodnoty mnoho výstupů

    interpolate převede hodnotu na délky, úhly nebo čísla. Bez easing se stane přesným calc() téže proměnné, takže pět drah stojí stejně jako jedna.

    Různé vstupní rozsahy téže hodnoty vytvoří kaskádu bez pěti samostatných animací.

    Příprava příkladu…

    Jeden stisk pohne pěti drahami v kaskádě; změna rozptylu změní jen rozsahy.

  4. Popište cíl

    Animated.button renderuje běžné tlačítko. seed je první snímek, pose je místo, kde má být teď, a tempo je způsob, jak se tam dostane.

    Když se pose změní v půli cesty, prvek zatočí z místa, kde je na obrazovce, a s pružinou si zachová rychlost.

    Příprava příkladu…

    Rychlé klikání na karty nikdy nezpůsobí, že by některá poskočila.

  5. Připojte vstup

    input(ref, moveInput(...)) zapisuje souřadnice ukazatele do hodnot. follow(target, source) přiměje jednu hodnotu následovat jinou s pružinou.

    Vše deklarované ve factory useAnimated patří komponentě: posluchači i pružiny se zastaví při odpojení nebo při změně závislosti.

    Příprava příkladu…

    Karta se nakloní k ukazateli a když ukazatel odejde, vrátí se do klidu.

  6. Animujte odchod

    Odebrání potomka Reactu ho obvykle odstraní okamžitě. Animated.Keep drží potomky s key, dokud jejich póza depart neskončí.

    wait renderuje nové potomky až po dokončení všech odchodů.

    Příprava příkladu…

    Zavřené zprávy odcházejí zvoleným pohybem, než zmizí.

Máte celý model

Hodnoty, cíle, vstup i odchody sdílejí stejné controllery, pravidla přerušení a úklid. Průvodci jdou u každého do hloubky.

Hledat

Pište a hledejte v dokumentaci.