Animated1.0.0

Około 5 minut · React 16.8+ · React DOM

Zacznij

Od instalacji do gestów i ruchu wejścia i wyjścia w sześciu krokach. Każdy krok to mały, działający komponent.

  1. Instalacja

    Animated nie ma zależności w czasie działania. React 16.8+ to zależność peer.

    Punkt wejścia pakietu jest oznaczony 'use client'. W App Router Next.js serwerowy layout może renderować AnimatedProvider; hooków i Animated.<tag> używaj wewnątrz Client Components.

    npm install @kkwaenggwari/animated

    Import @kkwaenggwari/animated rozwiązuje się w twoim edytorze.

  2. Porusz pierwszą wartość

    useAnimatedValue(1) posiada żywą liczbę przez cały czas życia komponentu. Wstaw ją prosto do style: staje się zmienną CSS, więc React nie renderuje, gdy się zmienia.

    timing(value, { toValue, duration }).start() ją porusza. Ponowne naciśnięcie w połowie zaczyna od bieżącej przezroczystości.

    Przygotowywanie przykładu…

    Pudełko znika i wraca, a drugie naciśnięcie w połowie odwraca kierunek od miejsca, w którym jest.

  3. Wyprowadź wiele wyjść z jednej wartości

    interpolate mapuje wartość na długości, kąty lub liczby. Bez easing staje się dokładnym calc() tej samej zmiennej, więc pięć torów kosztuje tyle co jeden.

    Różne zakresy wejściowe tej samej wartości tworzą kaskadę bez pięciu osobnych animacji.

    Przygotowywanie przykładu…

    Jedno naciśnięcie porusza pięć torów kaskadą; zmiana rozrzutu zmienia tylko zakresy.

  4. Opisz cel

    Animated.button renderuje zwykły przycisk. seed to pierwsza klatka, pose to miejsce, w którym ma być teraz, a tempo to sposób, w jaki tam dotrze.

    Gdy pose zmienia się w połowie drogi, element skręca od miejsca na ekranie, zachowując prędkość sprężyny.

    Przygotowywanie przykładu…

    Szybkie klikanie kart nigdy nie sprawia, że któraś skacze.

  5. Podłącz wejście

    input(ref, moveInput(...)) zapisuje współrzędne wskaźnika do wartości. follow(target, source) sprawia, że jedna wartość sprężyście podąża za drugą.

    Wszystko zadeklarowane w fabryce useAnimated należy do komponentu: słuchacze i sprężyny zatrzymują się przy odmontowaniu lub zmianie zależności.

    Przygotowywanie przykładu…

    Karta przechyla się w stronę wskaźnika i wraca na miejsce, gdy wskaźnik odchodzi.

  6. Animuj wyjście

    Usunięcie dziecka React zwykle usuwa je od razu. Animated.Keep zatrzymuje dzieci z key, dopóki nie skończy się ich poza depart.

    wait renderuje nowe dzieci dopiero, gdy skończą się wszystkie wyjścia.

    Przygotowywanie przykładu…

    Odrzucone wiadomości odchodzą wybranym ruchem, zanim znikną.

Znasz już cały model

Wartości, cele, wejście i wyjścia dzielą te same kontrolery, zasady przerywania i sprzątanie. Przewodniki zgłębiają każdy z nich.

Szukaj

Zacznij pisać, aby przeszukać dokumentację.