Value
new Value(initial: number)Een veranderlijk getal met setValue, setOffset, flattenOffset, extractOffset, stopAnimation en resetAnimation.
API-naslag
Elke export van @kkwaenggwari/animated, met zijn signatuur en de gids die hem uitlegt.
Waarden en grafen
ValueXY
new ValueXY({ x?, y? })Gekoppelde x- en y-waarden met dezelfde bewerkingen, plus getLayout en getTranslateTransform.
createValue
createValue(initial: number | Record<string, number>)Maak een getal of een benoemd numeriek record buiten React. Aanmaken start niets.
Gids: Waarden en stijlAnimatedNode
node.getValue() · node.interpolate(config) · node.addListener(fn)De alleen-lezenbasis van elke waarde en graaf: getValue, interpolate en listeners.
AnimatedInterpolation
node.interpolate({ inputRange, outputRange, easing?, extrapolate? })Een levende mapping van invoer- naar uitvoerbereiken, met easing en extend-, clamp- of identity-extrapolatie.
AnimatedComputed
new AnimatedComputed(inputs, (...values) => result);Een pure alleen-lezenberekening over een of meer invoerwaarden. Uitvoer die het gebruikt, draait in JavaScript.
Gids: Waarden en stijlinterpolateFn
interpolateFn({ value, inputRange, outputRange });Evalueer een interpolatie één keer voor een gewoon getal.
Gids: Waarden en stijladd
add(...inputs);De som van getallen en waarden.
Gids: Waarden en stijlsubtract
subtract(a, b);Het verschil van twee invoerwaarden.
Gids: Waarden en stijlmultiply
multiply(...inputs);Het product van getallen en waarden.
Gids: Waarden en stijldivide
divide(a, b);Het quotiënt van twee invoerwaarden.
Gids: Waarden en stijlmodulo
modulo(a, b);Een waarde die rondloopt, bijvoorbeeld een eindeloze rotatie.
Gids: Waarden en stijldiffClamp
diffClamp(input, min, max);Volgt de veranderingen van de invoer maar blijft binnen een bereik; handig voor headers die bij scrollen verdwijnen.
Gids: Waarden en stijlReact-hooks
useAnimatedValue
useAnimatedValue(initial, { scope?, id? }?)Bezit een getal of numeriek record zolang het component bestaat. In style is het een CSS-variabele.
useAnimated
useAnimated(initial, value => { … }, deps?, { autoStart?, onComplete?, scope? }?)Bezit een waarde plus elke controller, invoer en uitvoer die in de factory is gedeclareerd. Start, start opnieuw bij gewijzigde afhankelijkheden en ruimt op.
Gids: Waarden en stijluseAnimatedValueXY
useAnimatedValueXY({ x?, y? }?, options?)Bezit een volledige tweedimensionale waarde.
Gids: Waarden en stijluseAnimatedCSS
useAnimatedCSS(node, { scope?, id? }?): stringGeef een afgeleide node die geen calc()-expressie is een eigen CSS-variabele, met de levensduur van het component.
useAnimatedListener
useAnimatedListener(node, ({ value }) => void)Roep een functie aan bij elke wijziging van een node of ValueXY; verwijderd bij unmount.
useAnimatedPresence
useAnimatedPresence(visible, { enter, exit, onExitComplete? })Geeft { mounted, animatedValue } terug voor binnenkomen en vertrekken via een hook.
AnimatedProvider
<AnimatedProvider scope={ref}>…</AnimatedProvider>;Stel een standaardscope voor CSS-variabelen in voor de hookwaarden eronder.
Gids: Waarden en stijlflushAnimatedUpdates
flushAnimatedUpdates();Pas openstaande uitvoer synchroon toe, voor deterministische tests.
Gids: Waarden en stijlDrivers, compositie en tijdlijnen
timing
timing(value, { toValue, duration?, delay?, easing? })Beweeg een waarde langs een easingcurve gedurende een vaste duur.
Gids: Timing, veren en compositiespring
spring(value, { toValue, stiffness?, damping?, mass?, velocity? })Beweeg een waarde met veerfysica en behoud de snelheid van een onderbroken beweging.
Gids: Timing, veren en compositiedecay
decay(value, { velocity, deceleration? })Begin met een snelheid en rem af.
Gids: Timing, veren en compositiedelay
delay(ms);Een controller die alleen wacht.
Gids: Timing, veren en compositiesequence
sequence([a, b, c]);Draai controllers na elkaar.
Gids: Timing, veren en compositieparallel
parallel([a, b], { stopTogether? }?)Draai controllers tegelijk.
Gids: Timing, veren en compositiestagger
stagger(ms, [a, b, c]);Start controllers na elkaar met een vast interval.
Gids: Timing, veren en compositieloop
loop(animation, { iterations?, resetBeforeIteration? }?)Herhaal een controller een aantal keer of eindeloos.
Gids: Timing, veren en compositiekeyframes
keyframes(value, [0, 1, 0.5], { duration?, times?, repeat? }?)Voer een waarde door meerdere getallen, met optionele tijden en herhalingen.
Gids: Timing, veren en compositieEasing
Easing.inOut(Easing.cubic) · Easing.bezier(x1, y1, x2, y2)Curves die overeenkomen met React Native: linear, quad, cubic, sin, circle, exp, elastic, back, bounce, bezier en in/out-helpers.
Gids: Timing, veren en compositiecreateTimeline
createTimeline({ track: [a, b] }, { duration?, repeat? }?)Een doorzoekbare klok met benoemde sporen, buiten React.
Gids: Timing, veren en compositieuseTimeline
useTimeline(tracks, { duration?, repeat?, autoStart? }?, deps?)Een tijdlijn die van het component is en waarvan de sporen direct in gewone style werken.
Gids: Timing, veren en compositieComponenten en layout
Animated
<Animated.div seed pose tempo respond depart move />;De namespace van HTML- en SVG-hosts zoals Animated.div, plus de kernfuncties onder React Native-namen.
Animated.wrap
Animated.wrap(Component) · Animated.createAnimatedComponent(Component)Laat een component dat een ref doorgeeft de props van Animated-hosts accepteren.
Gids: Animated-componentenAnimated.Scope
<Animated.Scope pose? tempo? animation?>…</Animated.Scope>Deel een posenaam, tempo en animatiestandaarden met de Animated-elementen erbinnen.
Gids: Animated-componentenAnimated.Keep
<Animated.Keep seed? wait? onDeparted?>…</Animated.Keep>Houd kinderen met een key gemount totdat hun vertrek klaar is.
Gids: Animated-componentenAnimated.Scene
<Animated.Scene tempo?>…</Animated.Scene>Animeer layoutwijzigingen van move-elementen en verbind elementen met dezelfde identiteit.
createLayoutScene
createLayoutScene(options?) → { attach, capture, commit, dispose }Dezelfde capture-en-commit-layoutcoördinatie voor andere renderers.
Gids: Animated-componentenuseReorder
useReorder(items, onChange, { key?, axis?, tempo? }?)Herordenen met aanwijzer en toetsenbord van een gecontroleerde lijst langs één as.
Gids: Animated-componentenInvoer en verbindingen
input
input(targetRef, adapter, onEvent?)Koppel een invoeradapter als eigen controller aan een element.
Gids: Invoer en gebarenfollow
follow(target, source, { stiffness?, damping?, mass? }?)Laat de ene waarde met een veer achter de andere aan gaan.
Gids: Invoer en gebarenconnect
connect(node, (value) => write(value));Stuur elke wijziging van een node naar een functie.
Gids: Invoer en gebarenevent
Animated.event([{ nativeEvent: { contentOffset: { y } } }]);Zet geneste eventdata om in waarden, zoals in React Native.
Gids: Invoer en gebarendragInput
dragInput({ x?, y?, axis?, bounds?, elastic?, momentum?, settle? })Slepen met aanwijzer en toetsenbord, met grenzen, elastische randen, momentum en settle.
Gids: Invoer en gebarenpinchInput
pinchInput({ scale?, rotation?, minScale?, maxScale? })Schaal en rotatie uit een gebaar met twee aanwijzers.
Gids: Invoer en gebarenmoveInput
moveInput({ x?, y?, relative?, reset? })Aanwijzercoördinaten, optioneel ten opzichte van het midden van het element.
Gids: Invoer en gebarenscrollInput
scrollInput({ x?, y?, progressX?, progressY?, target?, through? })Scrollpositie en -voortgang van een element, de pagina of een element dat door de viewport gaat.
Gids: Invoer en gebarenwheelInput
wheelInput({ x?, y? })Wieldelta's.
Gids: Invoer en gebarenviewportInput
viewportInput({ root?, margin?, amount?, once? })Of het element in de viewport is.
Gids: Invoer en gebarenmediaInput
mediaInput('(min-width: 768px)');Of een media query overeenkomt.
Gids: Invoer en gebarenlongPressInput
longPressInput({ delay?, threshold? })Een vastgehouden aanwijzer na een vertraging en binnen een bewegingsdrempel.
Gids: Invoer en gebarenswipeInput
swipeInput({ direction?: 'left' | 'right' | 'up' | 'down' | 'any' })Richting, afstand en snelheid van een veegbeweging.
Gids: Invoer en gebarenUitvoer en diagnose
bind
bind(element, style) → { update, inspect, dispose }Koppel Animated-stijlen aan een element buiten React; geeft update, inspect en dispose terug.
inspect
inspect(element) → [{ property, driver, reason }]Het afspeelpad en de fallback-reden van elke geanimeerde eigenschap van een element.
Gids: Prestaties en afspelenoutput
output(targetRef, { style?, attributes?, properties?, text? })Bezit een uitvoer naar stijl, attribuut, tekst of eigenschap binnen useAnimated.
bindOutput
bindOutput(target, mapping) → { flush, dispose }Koppel een uitvoermapping direct; geeft flush en dispose terug.