Value
new Value(initial: number)Eine veränderbare Zahl mit setValue, setOffset, flattenOffset, extractOffset, stopAnimation und resetAnimation.
API-Referenz
Jeder Export von @kkwaenggwari/animated mit Signatur und dem Guide, der ihn erklärt.
Werte und Graphen
ValueXY
new ValueXY({ x?, y? })Gepaarte x- und y-Werte mit denselben Operationen, dazu getLayout und getTranslateTransform.
createValue
createValue(initial: number | Record<string, number>)Eine Zahl oder einen benannten Zahlen-Record außerhalb von React erstellen. Das Erstellen löst nichts aus.
Guide: Werte und styleAnimatedNode
node.getValue() · node.interpolate(config) · node.addListener(fn)Die schreibgeschützte Basis jedes Werts und Graphen: getValue, interpolate und Listener.
AnimatedInterpolation
node.interpolate({ inputRange, outputRange, easing?, extrapolate? })Eine lebendige Zuordnung von Eingabe- zu Ausgabebereichen, mit easing und Extrapolation extend, clamp oder identity.
AnimatedComputed
new AnimatedComputed(inputs, (...values) => result);Eine reine, schreibgeschützte Berechnung über eine oder mehrere Eingaben. Ausgaben, die sie nutzen, laufen in JavaScript.
Guide: Werte und styleinterpolateFn
interpolateFn({ value, inputRange, outputRange });Eine Interpolation einmal für eine einfache Zahl auswerten.
Guide: Werte und styleadd
add(...inputs);Die Summe von Zahlen und Werten.
Guide: Werte und stylesubtract
subtract(a, b);Die Differenz zweier Eingaben.
Guide: Werte und stylemultiply
multiply(...inputs);Das Produkt von Zahlen und Werten.
Guide: Werte und styledivide
divide(a, b);Der Quotient zweier Eingaben.
Guide: Werte und stylemodulo
modulo(a, b);Ein umlaufender Wert, etwa für eine endlose Drehung.
Guide: Werte und stylediffClamp
diffClamp(input, min, max);Folgt den Änderungen der Eingabe, bleibt aber in einem Bereich; nützlich für Kopfzeilen, die sich beim Scrollen verstecken.
Guide: Werte und styleReact-Hooks
useAnimatedValue
useAnimatedValue(initial, { scope?, id? }?)Eine Zahl oder einen Zahlen-Record für die Lebensdauer der Komponente halten. In style ist er eine CSS-Variable.
useAnimated
useAnimated(initial, value => { … }, deps?, { autoStart?, onComplete?, scope? }?)Einen Wert und jeden in seiner Factory deklarierten Controller, jede Eingabe und Ausgabe halten. Startet, startet bei geänderten Abhängigkeiten neu und räumt auf.
Guide: Werte und styleuseAnimatedValueXY
useAnimatedValueXY({ x?, y? }?, options?)Einen vollständigen zweidimensionalen Wert halten.
Guide: Werte und styleuseAnimatedCSS
useAnimatedCSS(node, { scope?, id? }?): stringEinem abgeleiteten Knoten, der kein calc()-Ausdruck ist, eine eigene CSS-Variable mit Komponenten-Lebensdauer geben.
useAnimatedListener
useAnimatedListener(node, ({ value }) => void)Bei jeder Änderung eines Knotens oder ValueXY eine Funktion aufrufen; beim Unmount entfernt.
useAnimatedPresence
useAnimatedPresence(visible, { enter, exit, onExitComplete? }){ mounted, animatedValue } für Hook-basiertes Erscheinen und Verschwinden zurückgeben.
AnimatedProvider
<AnimatedProvider scope={ref}>…</AnimatedProvider>;Einen Standard-Scope für CSS-Variablen der darunterliegenden Hook-Werte setzen.
Guide: Werte und styleflushAnimatedUpdates
flushAnimatedUpdates();Ausstehende Ausgaben synchron anwenden, für deterministische Tests.
Guide: Werte und styleDriver, Komposition und Timelines
timing
timing(value, { toValue, duration?, delay?, easing? })Einen Wert über eine feste Dauer entlang einer Easing-Kurve bewegen.
Guide: Timing, Federn und Kompositionspring
spring(value, { toValue, stiffness?, damping?, mass?, velocity? })Einen Wert mit Federphysik bewegen und die Geschwindigkeit einer unterbrochenen Bewegung behalten.
Guide: Timing, Federn und Kompositiondecay
decay(value, { velocity, deceleration? })Mit einer Geschwindigkeit starten und abbremsen.
Guide: Timing, Federn und Kompositiondelay
delay(ms);Ein Controller, der nur wartet.
Guide: Timing, Federn und Kompositionsequence
sequence([a, b, c]);Controller nacheinander ausführen.
Guide: Timing, Federn und Kompositionparallel
parallel([a, b], { stopTogether? }?)Controller gleichzeitig ausführen.
Guide: Timing, Federn und Kompositionstagger
stagger(ms, [a, b, c]);Controller nacheinander in festem Abstand starten.
Guide: Timing, Federn und Kompositionloop
loop(animation, { iterations?, resetBeforeIteration? }?)Einen Controller mehrmals oder endlos wiederholen.
Guide: Timing, Federn und Kompositionkeyframes
keyframes(value, [0, 1, 0.5], { duration?, times?, repeat? }?)Einen Wert durch mehrere Zahlen führen, mit optionalen Zeiten und Wiederholungen.
Guide: Timing, Federn und KompositionEasing
Easing.inOut(Easing.cubic) · Easing.bezier(x1, y1, x2, y2)Kurven wie in React Native: linear, quad, cubic, sin, circle, exp, elastic, back, bounce, bezier und in/out-Helfer.
Guide: Timing, Federn und KompositioncreateTimeline
createTimeline({ track: [a, b] }, { duration?, repeat? }?)Eine spulbare Uhr mit benannten Spuren, außerhalb von React.
Guide: Timing, Federn und KompositionuseTimeline
useTimeline(tracks, { duration?, repeat?, autoStart? }?, deps?)Eine Timeline, die der Komponente gehört und deren Spuren direkt in normalem style funktionieren.
Guide: Timing, Federn und KompositionKomponenten und Layout
Animated
<Animated.div seed pose tempo respond depart move />;Der Namespace der HTML- und SVG-Hosts wie Animated.div, dazu die Kernfunktionen unter React-Native-Namen.
Animated.wrap
Animated.wrap(Component) · Animated.createAnimatedComponent(Component)Eine Komponente, die ihre ref weiterleitet, die props der Animated-Hosts akzeptieren lassen.
Guide: Animated-KomponentenAnimated.Scope
<Animated.Scope pose? tempo? animation?>…</Animated.Scope>Einen Pose-Namen, ein tempo und Animationsstandards mit den Animated-Elementen darin teilen.
Guide: Animated-KomponentenAnimated.Keep
<Animated.Keep seed? wait? onDeparted?>…</Animated.Keep>Kinder mit key gemountet halten, bis ihr Abgang fertig ist.
Guide: Animated-KomponentenAnimated.Scene
<Animated.Scene tempo?>…</Animated.Scene>Layoutänderungen von move-Elementen animieren und Elemente mit derselben Identität verbinden.
createLayoutScene
createLayoutScene(options?) → { attach, capture, commit, dispose }Dieselbe Layoutkoordination per Capture und Commit für andere Renderer.
Guide: Animated-KomponentenuseReorder
useReorder(items, onChange, { key?, axis?, tempo? }?)Umsortieren einer kontrollierten Liste entlang einer Achse, per Zeiger und Tastatur.
Guide: Animated-KomponentenEingaben und Verbindungen
input
input(targetRef, adapter, onEvent?)Einen Eingabe-Adapter als besessenen Controller an ein Element hängen.
Guide: Eingaben und Gestenfollow
follow(target, source, { stiffness?, damping?, mass? }?)Einen Wert einem anderen federnd folgen lassen.
Guide: Eingaben und Gestenconnect
connect(node, (value) => write(value));Jede Änderung eines Knotens an eine Funktion senden.
Guide: Eingaben und Gestenevent
Animated.event([{ nativeEvent: { contentOffset: { y } } }]);Verschachtelte Event-Daten auf Werte abbilden, wie in React Native.
Guide: Eingaben und GestendragInput
dragInput({ x?, y?, axis?, bounds?, elastic?, momentum?, settle? })Ziehen per Zeiger und Tastatur mit Grenzen, elastischen Rändern, Schwung und settle.
Guide: Eingaben und GestenpinchInput
pinchInput({ scale?, rotation?, minScale?, maxScale? })Skalierung und Drehung aus einer Zwei-Zeiger-Geste.
Guide: Eingaben und GestenmoveInput
moveInput({ x?, y?, relative?, reset? })Zeigerkoordinaten, optional relativ zur Mitte des Elements.
Guide: Eingaben und GestenscrollInput
scrollInput({ x?, y?, progressX?, progressY?, target?, through? })Scrollposition und Fortschritt eines Elements, der Seite oder eines Elements, das den Viewport durchquert.
Guide: Eingaben und GestenwheelInput
wheelInput({ x?, y? })Mausrad-Deltas.
Guide: Eingaben und GestenviewportInput
viewportInput({ root?, margin?, amount?, once? })Ob das Element im Viewport ist.
Guide: Eingaben und GestenmediaInput
mediaInput('(min-width: 768px)');Ob eine Media Query zutrifft.
Guide: Eingaben und GestenlongPressInput
longPressInput({ delay?, threshold? })Ein gehaltener Zeiger nach einer Verzögerung und innerhalb einer Bewegungsschwelle.
Guide: Eingaben und GestenswipeInput
swipeInput({ direction?: 'left' | 'right' | 'up' | 'down' | 'any' })Richtung, Distanz und Geschwindigkeit einer Wischgeste.
Guide: Eingaben und GestenAusgabe und Diagnose
bind
bind(element, style) → { update, inspect, dispose }Animated-Styles außerhalb von React an ein Element binden; gibt update, inspect und dispose zurück.
inspect
inspect(element) → [{ property, driver, reason }]Der Wiedergabeweg und der Fallback-Grund jeder animierten Eigenschaft eines Elements.
Guide: Performance und Wiedergabeoutput
output(targetRef, { style?, attributes?, properties?, text? })Eine Style-, Attribut-, Text- oder Eigenschafts-Ausgabe innerhalb von useAnimated besitzen.
bindOutput
bindOutput(target, mapping) → { flush, dispose }Ein Ausgabe-Mapping sofort anhängen; gibt flush und dispose zurück.