Etwa 5 Minuten · React 16.8+ · React DOM
Start
Von der Installation bis zu Gesten und Ein- und Ausblendungen in sechs Schritten. Jeder Schritt ist eine kleine, funktionierende Komponente.
Installieren
Animated hat keine Laufzeitabhängigkeiten. React 16.8+ ist eine Peer-Abhängigkeit.
Der Paket-Einstiegspunkt ist mit 'use client' markiert. Im Next.js App Router kann ein Server-Layout
AnimatedProviderrendern; Hooks undAnimated.<tag>nutzt du in Client Components.npm install @kkwaenggwari/animatedDer Import
@kkwaenggwari/animatedwird in deinem Editor aufgelöst.Deinen ersten Wert bewegen
useAnimatedValue(1)hält eine lebendige Zahl für die Lebensdauer der Komponente. Setz sie direkt instyle: Sie wird zu einer CSS-Variablen, also rendert React nicht, während sie sich ändert.timing(value, { toValue, duration }).start()bewegt sie. Ein erneuter Druck auf halbem Weg startet bei der aktuellen Deckkraft.Beispiel wird vorbereitet…
Die Box blendet aus und wieder ein, und ein zweiter Druck auf halbem Weg kehrt von ihrer Position aus um.
Viele Ausgaben aus einem Wert ableiten
interpolatebildet den Wert auf Längen, Winkel oder Zahlen ab. Ohne Easing wird daraus ein exaktescalc()derselben Variablen – fünf Bahnen kosten so viel wie eine.Verschiedene Eingabebereiche auf demselben Wert erzeugen eine Kaskade ohne fünf getrennte Animationen.
Beispiel wird vorbereitet…
Ein Druck bewegt fünf Bahnen als Kaskade; eine Änderung von spread ändert nur die Bereiche.
Ein Ziel beschreiben
Animated.buttonrendert einen normalen button.seedist der erste Frame,poseist, wo er jetzt sein soll, undtempoist, wie er dorthin kommt.Ändert sich
poseunterwegs, dreht das Element von seiner Position auf dem Bildschirm aus und behält mit einer Feder seine Geschwindigkeit.Beispiel wird vorbereitet…
Schnelles Klicken auf Karten lässt nie eine springen.
Eingaben verbinden
input(ref, moveInput(...))schreibt Zeigerkoordinaten in Werte.follow(target, source)lässt einen Wert einem anderen federnd folgen.Alles, was in einer
useAnimated-Factory deklariert wird, gehört der Komponente: Listener und Federn stoppen, wenn sie unmountet oder sich eine Abhängigkeit ändert.Beispiel wird vorbereitet…
Die Karte neigt sich zum Zeiger und kehrt zurück, wenn der Zeiger sie verlässt.
Den Abgang animieren
Ein entferntes React-Kind verschwindet normalerweise sofort.
Animated.Keephält Kinder mit key, bis ihredepart-Pose fertig ist.waitrendert neue Kinder erst, wenn alle Abgänge fertig sind.Beispiel wird vorbereitet…
Geschlossene Nachrichten gehen mit der gewählten Bewegung ab, bevor sie verschwinden.
Du hast das ganze Modell
Werte, Ziele, Eingaben und Abgänge teilen dieselben Controller, Unterbrechungsregeln und dasselbe Aufräumen. Die Guides gehen bei jedem tiefer.