Value
new Value(initial: number)Ett föränderligt tal med setValue, setOffset, flattenOffset, extractOffset, stopAnimation och resetAnimation.
API-referens
Varje export i @kkwaenggwari/animated, med sin signatur och guiden som förklarar den.
Värden och grafer
ValueXY
new ValueXY({ x?, y? })Parade x- och y-värden med samma operationer, plus getLayout och getTranslateTransform.
createValue
createValue(initial: number | Record<string, number>)Skapa ett tal eller en namngiven numerisk post utanför React. Att skapa startar ingenting.
Guide: Värden och stilAnimatedNode
node.getValue() · node.interpolate(config) · node.addListener(fn)Den skrivskyddade basen för varje värde och graf: getValue, interpolate och lyssnare.
AnimatedInterpolation
node.interpolate({ inputRange, outputRange, easing?, extrapolate? })En levande mappning från indata- till utdataintervall, med easing och extrapoleringen extend, clamp eller identity.
AnimatedComputed
new AnimatedComputed(inputs, (...values) => result);En ren skrivskyddad beräkning över en eller flera indata. Utdata som använder den körs i JavaScript.
Guide: Värden och stilinterpolateFn
interpolateFn({ value, inputRange, outputRange });Beräkna en interpolering en gång för ett vanligt tal.
Guide: Värden och stiladd
add(...inputs);Summan av tal och värden.
Guide: Värden och stilsubtract
subtract(a, b);Skillnaden mellan två indata.
Guide: Värden och stilmultiply
multiply(...inputs);Produkten av tal och värden.
Guide: Värden och stildivide
divide(a, b);Kvoten av två indata.
Guide: Värden och stilmodulo
modulo(a, b);Ett värde som börjar om, till exempel en oändlig rotation.
Guide: Värden och stildiffClamp
diffClamp(input, min, max);Följer indatans ändringar men håller sig inom ett intervall; användbart för sidhuvuden som döljs vid scrollning.
Guide: Värden och stilReact-hooks
useAnimatedValue
useAnimatedValue(initial, { scope?, id? }?)Äg ett tal eller en numerisk post under komponentens livstid. I style är det en CSS-variabel.
useAnimated
useAnimated(initial, value => { … }, deps?, { autoStart?, onComplete?, scope? }?)Äg ett värde plus varje controller, inmatning och utdata som deklareras i dess factory. Startar, startar om när beroenden ändras och städar.
Guide: Värden och stiluseAnimatedValueXY
useAnimatedValueXY({ x?, y? }?, options?)Äg ett komplett tvådimensionellt värde.
Guide: Värden och stiluseAnimatedCSS
useAnimatedCSS(node, { scope?, id? }?): stringGe en härledd nod som inte är ett calc()-uttryck en egen CSS-variabel, med komponentens livstid.
useAnimatedListener
useAnimatedListener(node, ({ value }) => void)Anropa en funktion vid varje ändring av en nod eller ValueXY; tas bort vid unmount.
useAnimatedPresence
useAnimatedPresence(visible, { enter, exit, onExitComplete? })Returnerar { mounted, animatedValue } för in och ut via hook.
AnimatedProvider
<AnimatedProvider scope={ref}>…</AnimatedProvider>;Sätt ett standard-scope för CSS-variabler för hookvärdena under den.
Guide: Värden och stilflushAnimatedUpdates
flushAnimatedUpdates();Tillämpa väntande utdata synkront, för deterministiska tester.
Guide: Värden och stilDrivers, komposition och tidslinjer
timing
timing(value, { toValue, duration?, delay?, easing? })Flytta ett värde längs en easingkurva under en fast tid.
Guide: Timing, fjädrar och kompositionspring
spring(value, { toValue, stiffness?, damping?, mass?, velocity? })Flytta ett värde med fjäderfysik och behåll hastigheten från en avbruten rörelse.
Guide: Timing, fjädrar och kompositiondecay
decay(value, { velocity, deceleration? })Starta med en hastighet och sakta in.
Guide: Timing, fjädrar och kompositiondelay
delay(ms);En controller som bara väntar.
Guide: Timing, fjädrar och kompositionsequence
sequence([a, b, c]);Kör controllers en efter en.
Guide: Timing, fjädrar och kompositionparallel
parallel([a, b], { stopTogether? }?)Kör controllers tillsammans.
Guide: Timing, fjädrar och kompositionstagger
stagger(ms, [a, b, c]);Starta controllers en efter en med ett fast intervall.
Guide: Timing, fjädrar och kompositionloop
loop(animation, { iterations?, resetBeforeIteration? }?)Upprepa en controller ett antal gånger eller för alltid.
Guide: Timing, fjädrar och kompositionkeyframes
keyframes(value, [0, 1, 0.5], { duration?, times?, repeat? }?)För ett värde genom flera tal, med valfria tider och upprepningar.
Guide: Timing, fjädrar och kompositionEasing
Easing.inOut(Easing.cubic) · Easing.bezier(x1, y1, x2, y2)Kurvor som motsvarar React Native: linear, quad, cubic, sin, circle, exp, elastic, back, bounce, bezier och in/out-hjälpare.
Guide: Timing, fjädrar och kompositioncreateTimeline
createTimeline({ track: [a, b] }, { duration?, repeat? }?)En sökbar klocka med namngivna spår, utanför React.
Guide: Timing, fjädrar och kompositionuseTimeline
useTimeline(tracks, { duration?, repeat?, autoStart? }?, deps?)En tidslinje som ägs av komponenten, vars spår fungerar direkt i vanlig style.
Guide: Timing, fjädrar och kompositionKomponenter och layout
Animated
<Animated.div seed pose tempo respond depart move />;Namnrymden för HTML- och SVG-värdar som Animated.div, plus kärnfunktionerna under React Native-namn.
Animated.wrap
Animated.wrap(Component) · Animated.createAnimatedComponent(Component)Få en komponent som vidarebefordrar ref att ta Animated-värdarnas props.
Guide: Animated-komponenterAnimated.Scope
<Animated.Scope pose? tempo? animation?>…</Animated.Scope>Dela ett posenamn, tempo och animationsstandarder med Animated-elementen inuti.
Guide: Animated-komponenterAnimated.Keep
<Animated.Keep seed? wait? onDeparted?>…</Animated.Keep>Håll barn med key monterade tills deras utgång är klar.
Guide: Animated-komponenterAnimated.Scene
<Animated.Scene tempo?>…</Animated.Scene>Animera layoutändringar för move-element och koppla ihop element med samma identitet.
createLayoutScene
createLayoutScene(options?) → { attach, capture, commit, dispose }Samma layoutsamordning med fångst och commit för andra renderare.
Guide: Animated-komponenteruseReorder
useReorder(items, onChange, { key?, axis?, tempo? }?)Omsortering med pekare och tangentbord av en kontrollerad lista längs en axel.
Guide: Animated-komponenterInmatning och kopplingar
input
input(targetRef, adapter, onEvent?)Koppla en inmatningsadapter till ett element som en ägd controller.
Guide: Inmatning och gesterfollow
follow(target, source, { stiffness?, damping?, mass? }?)Få ett värde att följa ett annat med en fjäder.
Guide: Inmatning och gesterconnect
connect(node, (value) => write(value));Skicka varje ändring av en nod till en funktion.
Guide: Inmatning och gesterevent
Animated.event([{ nativeEvent: { contentOffset: { y } } }]);Mappa nästlad händelsedata till värden, som i React Native.
Guide: Inmatning och gesterdragInput
dragInput({ x?, y?, axis?, bounds?, elastic?, momentum?, settle? })Dragning med pekare och tangentbord med gränser, elastiska kanter, momentum och settle.
Guide: Inmatning och gesterpinchInput
pinchInput({ scale?, rotation?, minScale?, maxScale? })Skala och rotation från en gest med två pekare.
Guide: Inmatning och gestermoveInput
moveInput({ x?, y?, relative?, reset? })Pekarkoordinater, valfritt relativt elementets mitt.
Guide: Inmatning och gesterscrollInput
scrollInput({ x?, y?, progressX?, progressY?, target?, through? })Scrollposition och förlopp för ett element, sidan eller ett element som passerar genom viewporten.
Guide: Inmatning och gesterwheelInput
wheelInput({ x?, y? })Hjuldeltan.
Guide: Inmatning och gesterviewportInput
viewportInput({ root?, margin?, amount?, once? })Om elementet är i viewporten.
Guide: Inmatning och gestermediaInput
mediaInput('(min-width: 768px)');Om en media query matchar.
Guide: Inmatning och gesterlongPressInput
longPressInput({ delay?, threshold? })En pekare som hålls efter en fördröjning och inom en rörelsetröskel.
Guide: Inmatning och gesterswipeInput
swipeInput({ direction?: 'left' | 'right' | 'up' | 'down' | 'any' })Svepets riktning, avstånd och hastighet.
Guide: Inmatning och gesterUtdata och diagnostik
bind
bind(element, style) → { update, inspect, dispose }Bind Animated-stilar till ett element utanför React; returnerar update, inspect och dispose.
inspect
inspect(element) → [{ property, driver, reason }]Uppspelningsväg och fallback-orsak för varje animerad egenskap på ett element.
Guide: Prestanda och uppspelningoutput
output(targetRef, { style?, attributes?, properties?, text? })Äg en utdata till stil, attribut, text eller egenskap inuti useAnimated.
bindOutput
bindOutput(target, mapping) → { flush, dispose }Koppla en utdatamappning direkt; returnerar flush och dispose.