Value
new Value(initial: number)Et foranderligt tal med setValue, setOffset, flattenOffset, extractOffset, stopAnimation og resetAnimation.
API-reference
Hver export i @kkwaenggwari/animated med sin signatur og den guide, der forklarer den.
Værdier og grafer
ValueXY
new ValueXY({ x?, y? })Parrede x- og y-værdier med de samme operationer plus getLayout og getTranslateTransform.
createValue
createValue(initial: number | Record<string, number>)Opret et tal eller en navngiven numerisk post uden for React. Oprettelse starter intet.
Guide: Værdier og stilAnimatedNode
node.getValue() · node.interpolate(config) · node.addListener(fn)Den skrivebeskyttede base for hver værdi og graf: getValue, interpolate og listeners.
AnimatedInterpolation
node.interpolate({ inputRange, outputRange, easing?, extrapolate? })En levende mapping fra input- til outputintervaller med easing og extend-, clamp- eller identity-ekstrapolation.
AnimatedComputed
new AnimatedComputed(inputs, (...values) => result);En ren skrivebeskyttet beregning over et eller flere input. Output, der bruger den, kører i JavaScript.
Guide: Værdier og stilinterpolateFn
interpolateFn({ value, inputRange, outputRange });Evaluér en interpolation én gang for et almindeligt tal.
Guide: Værdier og stiladd
add(...inputs);Summen af tal og værdier.
Guide: Værdier og stilsubtract
subtract(a, b);Forskellen mellem to input.
Guide: Værdier og stilmultiply
multiply(...inputs);Produktet af tal og værdier.
Guide: Værdier og stildivide
divide(a, b);Kvotienten af to input.
Guide: Værdier og stilmodulo
modulo(a, b);En værdi, der starter forfra, for eksempel en endeløs rotation.
Guide: Værdier og stildiffClamp
diffClamp(input, min, max);Følger inputtets ændringer, men holder sig inden for et interval; nyttigt til sidehoveder, der skjules ved scroll.
Guide: Værdier og stilReact-hooks
useAnimatedValue
useAnimatedValue(initial, { scope?, id? }?)Ej et tal eller en numerisk post i komponentens levetid. I style er det en CSS-variabel.
useAnimated
useAnimated(initial, value => { … }, deps?, { autoStart?, onComplete?, scope? }?)Ej en værdi plus hver controller, hvert input og output, der er erklæret i dens factory. Starter, genstarter ved ændrede afhængigheder og rydder op.
Guide: Værdier og stiluseAnimatedValueXY
useAnimatedValueXY({ x?, y? }?, options?)Ej en komplet todimensionel værdi.
Guide: Værdier og stiluseAnimatedCSS
useAnimatedCSS(node, { scope?, id? }?): stringGiv en afledt node, der ikke er et calc()-udtryk, sin egen CSS-variabel med komponentens levetid.
useAnimatedListener
useAnimatedListener(node, ({ value }) => void)Kald en funktion ved hver ændring af en node eller ValueXY; fjernes ved unmount.
useAnimatedPresence
useAnimatedPresence(visible, { enter, exit, onExitComplete? })Returnerer { mounted, animatedValue } til hook-baseret ind og ud.
AnimatedProvider
<AnimatedProvider scope={ref}>…</AnimatedProvider>;Sæt et standard-scope for CSS-variabler for hook-værdierne under den.
Guide: Værdier og stilflushAnimatedUpdates
flushAnimatedUpdates();Anvend ventende output synkront, til deterministiske tests.
Guide: Værdier og stilDrivers, komposition og tidslinjer
timing
timing(value, { toValue, duration?, delay?, easing? })Flyt en værdi langs en easing-kurve i en fast varighed.
Guide: Timing, fjedre og kompositionspring
spring(value, { toValue, stiffness?, damping?, mass?, velocity? })Flyt en værdi med fjederfysik og bevar hastigheden fra en afbrudt bevægelse.
Guide: Timing, fjedre og kompositiondecay
decay(value, { velocity, deceleration? })Start med en hastighed, og sæt farten ned.
Guide: Timing, fjedre og kompositiondelay
delay(ms);En controller, der kun venter.
Guide: Timing, fjedre og kompositionsequence
sequence([a, b, c]);Kør controllere efter hinanden.
Guide: Timing, fjedre og kompositionparallel
parallel([a, b], { stopTogether? }?)Kør controllere samtidig.
Guide: Timing, fjedre og kompositionstagger
stagger(ms, [a, b, c]);Start controllere efter hinanden med et fast interval.
Guide: Timing, fjedre og kompositionloop
loop(animation, { iterations?, resetBeforeIteration? }?)Gentag en controller et antal gange eller for evigt.
Guide: Timing, fjedre og kompositionkeyframes
keyframes(value, [0, 1, 0.5], { duration?, times?, repeat? }?)Før en værdi gennem flere tal med valgfrie tider og gentagelser.
Guide: Timing, fjedre og kompositionEasing
Easing.inOut(Easing.cubic) · Easing.bezier(x1, y1, x2, y2)Kurver, der svarer til React Native: linear, quad, cubic, sin, circle, exp, elastic, back, bounce, bezier og in/out-hjælpere.
Guide: Timing, fjedre og kompositioncreateTimeline
createTimeline({ track: [a, b] }, { duration?, repeat? }?)Et søgbart ur med navngivne spor uden for React.
Guide: Timing, fjedre og kompositionuseTimeline
useTimeline(tracks, { duration?, repeat?, autoStart? }?, deps?)En tidslinje, som komponenten ejer, hvis spor virker direkte i almindelig style.
Guide: Timing, fjedre og kompositionKomponenter og layout
Animated
<Animated.div seed pose tempo respond depart move />;Navnerummet for HTML- og SVG-værter som Animated.div plus kernefunktionerne under React Native-navne.
Animated.wrap
Animated.wrap(Component) · Animated.createAnimatedComponent(Component)Få en komponent, der videresender ref, til at tage Animated-værternes props.
Guide: Animated-komponenterAnimated.Scope
<Animated.Scope pose? tempo? animation?>…</Animated.Scope>Del et pose-navn, tempo og animationsstandarder med Animated-elementerne indeni.
Guide: Animated-komponenterAnimated.Keep
<Animated.Keep seed? wait? onDeparted?>…</Animated.Keep>Hold børn med key monteret, indtil deres udgang er færdig.
Guide: Animated-komponenterAnimated.Scene
<Animated.Scene tempo?>…</Animated.Scene>Animér layoutændringer for move-elementer, og forbind elementer med samme identitet.
createLayoutScene
createLayoutScene(options?) → { attach, capture, commit, dispose }Den samme layoutkoordinering med capture og commit til andre renderere.
Guide: Animated-komponenteruseReorder
useReorder(items, onChange, { key?, axis?, tempo? }?)Omsortering med markør og tastatur af en kontrolleret liste langs én akse.
Guide: Animated-komponenterInput og forbindelser
input
input(targetRef, adapter, onEvent?)Forbind en inputadapter til et element som en ejet controller.
Guide: Input og gestusfollow
follow(target, source, { stiffness?, damping?, mass? }?)Få én værdi til at følge en anden med en fjeder.
Guide: Input og gestusconnect
connect(node, (value) => write(value));Send hver ændring af en node til en funktion.
Guide: Input og gestusevent
Animated.event([{ nativeEvent: { contentOffset: { y } } }]);Map indlejrede eventdata til værdier, som i React Native.
Guide: Input og gestusdragInput
dragInput({ x?, y?, axis?, bounds?, elastic?, momentum?, settle? })Træk med markør og tastatur med grænser, elastiske kanter, momentum og settle.
Guide: Input og gestuspinchInput
pinchInput({ scale?, rotation?, minScale?, maxScale? })Skala og rotation fra en gestus med to pegepunkter.
Guide: Input og gestusmoveInput
moveInput({ x?, y?, relative?, reset? })Markørkoordinater, eventuelt relativt til elementets midte.
Guide: Input og gestusscrollInput
scrollInput({ x?, y?, progressX?, progressY?, target?, through? })Scrollposition og -fremskridt for et element, siden eller et element, der passerer gennem viewporten.
Guide: Input og gestuswheelInput
wheelInput({ x?, y? })Hjul-deltaer.
Guide: Input og gestusviewportInput
viewportInput({ root?, margin?, amount?, once? })Om elementet er i viewporten.
Guide: Input og gestusmediaInput
mediaInput('(min-width: 768px)');Om en media query matcher.
Guide: Input og gestuslongPressInput
longPressInput({ delay?, threshold? })En markør, der holdes efter en forsinkelse og inden for en bevægelsestærskel.
Guide: Input og gestusswipeInput
swipeInput({ direction?: 'left' | 'right' | 'up' | 'down' | 'any' })Swipets retning, afstand og hastighed.
Guide: Input og gestusOutput og diagnostik
bind
bind(element, style) → { update, inspect, dispose }Bind Animated-stilarter til et element uden for React; returnerer update, inspect og dispose.
inspect
inspect(element) → [{ property, driver, reason }]Afspilningsvej og fallback-årsag for hver animeret egenskab på et element.
Guide: Ydeevne og afspilningoutput
output(targetRef, { style?, attributes?, properties?, text? })Ej et output til stil, attribut, tekst eller egenskab inde i useAnimated.
bindOutput
bindOutput(target, mapping) → { flush, dispose }Forbind en output-mapping med det samme; returnerer flush og dispose.