Value
new Value(initial: number)Et foranderlig tall med setValue, setOffset, flattenOffset, extractOffset, stopAnimation og resetAnimation.
API-referanse
Hver eksport i @kkwaenggwari/animated med signaturen og guiden som forklarer den.
Verdier og grafer
ValueXY
new ValueXY({ x?, y? })Parede x- og y-verdier med de samme operasjonene, pluss getLayout og getTranslateTransform.
createValue
createValue(initial: number | Record<string, number>)Opprett et tall eller en navngitt numerisk post utenfor React. Å opprette starter ingenting.
Guide: Verdier og stilAnimatedNode
node.getValue() · node.interpolate(config) · node.addListener(fn)Den skrivebeskyttede basen for hver verdi og graf: getValue, interpolate og lyttere.
AnimatedInterpolation
node.interpolate({ inputRange, outputRange, easing?, extrapolate? })En levende mapping fra inndata- til utdataintervaller, med easing og extend-, clamp- eller identity-ekstrapolering.
AnimatedComputed
new AnimatedComputed(inputs, (...values) => result);En ren skrivebeskyttet beregning over én eller flere inndata. Utdata som bruker den, kjører i JavaScript.
Guide: Verdier og stilinterpolateFn
interpolateFn({ value, inputRange, outputRange });Beregn en interpolasjon én gang for et vanlig tall.
Guide: Verdier og stiladd
add(...inputs);Summen av tall og verdier.
Guide: Verdier og stilsubtract
subtract(a, b);Differansen mellom to inndata.
Guide: Verdier og stilmultiply
multiply(...inputs);Produktet av tall og verdier.
Guide: Verdier og stildivide
divide(a, b);Kvotienten av to inndata.
Guide: Verdier og stilmodulo
modulo(a, b);En verdi som starter på nytt, for eksempel en endeløs rotasjon.
Guide: Verdier og stildiffClamp
diffClamp(input, min, max);Følger endringene i inndataen, men holder seg innenfor et intervall; nyttig for topptekster som skjules ved rulling.
Guide: Verdier og stilReact-hooks
useAnimatedValue
useAnimatedValue(initial, { scope?, id? }?)Eie et tall eller en numerisk post i hele komponentens levetid. I style er det en CSS-variabel.
useAnimated
useAnimated(initial, value => { … }, deps?, { autoStart?, onComplete?, scope? }?)Eie en verdi pluss hver kontroller, inndata og utdata som deklareres i factoryen. Starter, starter på nytt ved endrede avhengigheter og rydder opp.
Guide: Verdier og stiluseAnimatedValueXY
useAnimatedValueXY({ x?, y? }?, options?)Eie en fullstendig todimensjonal verdi.
Guide: Verdier og stiluseAnimatedCSS
useAnimatedCSS(node, { scope?, id? }?): stringGi en avledet node som ikke er et calc()-uttrykk, sin egen CSS-variabel med komponentens levetid.
useAnimatedListener
useAnimatedListener(node, ({ value }) => void)Kall en funksjon ved hver endring av en node eller ValueXY; fjernes ved unmount.
useAnimatedPresence
useAnimatedPresence(visible, { enter, exit, onExitComplete? })Returnerer { mounted, animatedValue } for inn og ut basert på hook.
AnimatedProvider
<AnimatedProvider scope={ref}>…</AnimatedProvider>;Sett et standard-scope for CSS-variabler for hook-verdiene under den.
Guide: Verdier og stilflushAnimatedUpdates
flushAnimatedUpdates();Bruk ventende utdata synkront, for deterministiske tester.
Guide: Verdier og stilDrivere, komposisjon og tidslinjer
timing
timing(value, { toValue, duration?, delay?, easing? })Flytt en verdi langs en easing-kurve i en fast varighet.
Guide: Timing, fjærer og komposisjonspring
spring(value, { toValue, stiffness?, damping?, mass?, velocity? })Flytt en verdi med fjærfysikk og behold hastigheten fra en avbrutt bevegelse.
Guide: Timing, fjærer og komposisjondecay
decay(value, { velocity, deceleration? })Start med en hastighet og brems opp.
Guide: Timing, fjærer og komposisjondelay
delay(ms);En kontroller som bare venter.
Guide: Timing, fjærer og komposisjonsequence
sequence([a, b, c]);Kjør kontrollere etter hverandre.
Guide: Timing, fjærer og komposisjonparallel
parallel([a, b], { stopTogether? }?)Kjør kontrollere sammen.
Guide: Timing, fjærer og komposisjonstagger
stagger(ms, [a, b, c]);Start kontrollere etter hverandre med fast intervall.
Guide: Timing, fjærer og komposisjonloop
loop(animation, { iterations?, resetBeforeIteration? }?)Gjenta en kontroller et antall ganger eller for alltid.
Guide: Timing, fjærer og komposisjonkeyframes
keyframes(value, [0, 1, 0.5], { duration?, times?, repeat? }?)Før en verdi gjennom flere tall med valgfrie tider og gjentakelser.
Guide: Timing, fjærer og komposisjonEasing
Easing.inOut(Easing.cubic) · Easing.bezier(x1, y1, x2, y2)Kurver som tilsvarer React Native: linear, quad, cubic, sin, circle, exp, elastic, back, bounce, bezier og in/out-hjelpere.
Guide: Timing, fjærer og komposisjoncreateTimeline
createTimeline({ track: [a, b] }, { duration?, repeat? }?)En søkbar klokke med navngitte spor, utenfor React.
Guide: Timing, fjærer og komposisjonuseTimeline
useTimeline(tracks, { duration?, repeat?, autoStart? }?, deps?)En tidslinje som komponenten eier, der sporene fungerer direkte i vanlig style.
Guide: Timing, fjærer og komposisjonKomponenter og layout
Animated
<Animated.div seed pose tempo respond depart move />;Navnerommet for HTML- og SVG-verter som Animated.div, pluss kjernefunksjonene under navnene fra React Native.
Animated.wrap
Animated.wrap(Component) · Animated.createAnimatedComponent(Component)La en komponent som videresender ref, ta props fra Animated-vertene.
Guide: Animated-komponenterAnimated.Scope
<Animated.Scope pose? tempo? animation?>…</Animated.Scope>Del et pose-navn, tempo og animasjonsstandarder med Animated-elementene inni.
Guide: Animated-komponenterAnimated.Keep
<Animated.Keep seed? wait? onDeparted?>…</Animated.Keep>Hold barn med key montert til utgangen deres er ferdig.
Guide: Animated-komponenterAnimated.Scene
<Animated.Scene tempo?>…</Animated.Scene>Animer layoutendringer for move-elementer og koble sammen elementer med samme identitet.
createLayoutScene
createLayoutScene(options?) → { attach, capture, commit, dispose }Den samme layoutkoordineringen med opptak og commit for andre renderere.
Guide: Animated-komponenteruseReorder
useReorder(items, onChange, { key?, axis?, tempo? }?)Omsortering med peker og tastatur av en kontrollert liste langs én akse.
Guide: Animated-komponenterInndata og koblinger
input
input(targetRef, adapter, onEvent?)Koble en inndataadapter til et element som en eid kontroller.
Guide: Inndata og bevegelserfollow
follow(target, source, { stiffness?, damping?, mass? }?)Få én verdi til å følge en annen med en fjær.
Guide: Inndata og bevegelserconnect
connect(node, (value) => write(value));Send hver endring av en node til en funksjon.
Guide: Inndata og bevegelserevent
Animated.event([{ nativeEvent: { contentOffset: { y } } }]);Map nøstede hendelsesdata til verdier, som i React Native.
Guide: Inndata og bevegelserdragInput
dragInput({ x?, y?, axis?, bounds?, elastic?, momentum?, settle? })Dra med peker og tastatur med grenser, elastiske kanter, momentum og settle.
Guide: Inndata og bevegelserpinchInput
pinchInput({ scale?, rotation?, minScale?, maxScale? })Skala og rotasjon fra en bevegelse med to pekere.
Guide: Inndata og bevegelsermoveInput
moveInput({ x?, y?, relative?, reset? })Pekerkoordinater, eventuelt relativt til midten av elementet.
Guide: Inndata og bevegelserscrollInput
scrollInput({ x?, y?, progressX?, progressY?, target?, through? })Rulleposisjon og -fremdrift for et element, siden eller et element som passerer gjennom viewporten.
Guide: Inndata og bevegelserwheelInput
wheelInput({ x?, y? })Hjuldeltaer.
Guide: Inndata og bevegelserviewportInput
viewportInput({ root?, margin?, amount?, once? })Om elementet er i viewporten.
Guide: Inndata og bevegelsermediaInput
mediaInput('(min-width: 768px)');Om en media query samsvarer.
Guide: Inndata og bevegelserlongPressInput
longPressInput({ delay?, threshold? })En peker som holdes etter en forsinkelse og innenfor en bevegelsesterskel.
Guide: Inndata og bevegelserswipeInput
swipeInput({ direction?: 'left' | 'right' | 'up' | 'down' | 'any' })Sveipets retning, avstand og hastighet.
Guide: Inndata og bevegelserUtdata og diagnostikk
bind
bind(element, style) → { update, inspect, dispose }Bind Animated-stiler til et element utenfor React; returnerer update, inspect og dispose.
inspect
inspect(element) → [{ property, driver, reason }]Avspillingsvei og fallback-årsak for hver animerte egenskap på et element.
Guide: Ytelse og avspillingoutput
output(targetRef, { style?, attributes?, properties?, text? })Eie utdata til stil, attributt, tekst eller egenskap inne i useAnimated.
bindOutput
bindOutput(target, mapping) → { flush, dispose }Koble en utdatamapping med en gang; returnerer flush og dispose.