Value
new Value(initial: number)Měnitelné číslo s setValue, setOffset, flattenOffset, extractOffset, stopAnimation a resetAnimation.
Reference API
Každý export @kkwaenggwari/animated s jeho signaturou a průvodcem, který ho vysvětluje.
Hodnoty a grafy
ValueXY
new ValueXY({ x?, y? })Spárované hodnoty x a y se stejnými operacemi, plus getLayout a getTranslateTransform.
createValue
createValue(initial: number | Record<string, number>)Vytvoří číslo nebo pojmenovaný číselný záznam mimo React. Vytvoření nic nespouští.
Průvodce: Hodnoty a stylAnimatedNode
node.getValue() · node.interpolate(config) · node.addListener(fn)Základ jen pro čtení každé hodnoty a grafu: getValue, interpolate a posluchači.
AnimatedInterpolation
node.interpolate({ inputRange, outputRange, easing?, extrapolate? })Živé mapování vstupních rozsahů na výstupní, s easing a extrapolací extend, clamp nebo identity.
AnimatedComputed
new AnimatedComputed(inputs, (...values) => result);Čistý výpočet jen pro čtení nad jedním či více vstupy. Výstupy, které ho používají, běží v JavaScriptu.
Průvodce: Hodnoty a stylinterpolateFn
interpolateFn({ value, inputRange, outputRange });Vyhodnotí interpolaci jednou pro obyčejné číslo.
Průvodce: Hodnoty a styladd
add(...inputs);Součet čísel a hodnot.
Průvodce: Hodnoty a stylsubtract
subtract(a, b);Rozdíl dvou vstupů.
Průvodce: Hodnoty a stylmultiply
multiply(...inputs);Součin čísel a hodnot.
Průvodce: Hodnoty a styldivide
divide(a, b);Podíl dvou vstupů.
Průvodce: Hodnoty a stylmodulo
modulo(a, b);Hodnota, která začíná znovu dokola, například pro nekonečnou rotaci.
Průvodce: Hodnoty a styldiffClamp
diffClamp(input, min, max);Sleduje změny vstupu, ale zůstává v rozsahu; užitečné pro záhlaví, která se při posouvání skrývají.
Průvodce: Hodnoty a stylHooky Reactu
useAnimatedValue
useAnimatedValue(initial, { scope?, id? }?)Vlastní číslo nebo číselný záznam po celou dobu života komponenty. Ve style je to proměnná CSS.
useAnimated
useAnimated(initial, value => { … }, deps?, { autoStart?, onComplete?, scope? }?)Vlastní hodnotu a každý controller, vstup a výstup deklarovaný v její factory. Spustí se, při změně závislostí se spustí znovu a uklidí po sobě.
Průvodce: Hodnoty a styluseAnimatedValueXY
useAnimatedValueXY({ x?, y? }?, options?)Vlastní úplnou dvourozměrnou hodnotu.
Průvodce: Hodnoty a styluseAnimatedCSS
useAnimatedCSS(node, { scope?, id? }?): stringDá odvozenému uzlu, který není výrazem calc(), vlastní proměnnou CSS s dobou života komponenty.
useAnimatedListener
useAnimatedListener(node, ({ value }) => void)Volá funkci při každé změně uzlu nebo ValueXY; odebere se při odpojení.
useAnimatedPresence
useAnimatedPresence(visible, { enter, exit, onExitComplete? })Vrací { mounted, animatedValue } pro příchod a odchod pomocí hooku.
AnimatedProvider
<AnimatedProvider scope={ref}>…</AnimatedProvider>;Nastaví výchozí scope proměnných CSS pro hodnoty hooků pod sebou.
Průvodce: Hodnoty a stylflushAnimatedUpdates
flushAnimatedUpdates();Synchronně použije čekající výstup, pro deterministické testy.
Průvodce: Hodnoty a stylDrivery, skládání a časové osy
timing
timing(value, { toValue, duration?, delay?, easing? })Pohne hodnotou po křivce easing za pevnou dobu.
Průvodce: Timing, pružiny a skládáníspring
spring(value, { toValue, stiffness?, damping?, mass?, velocity? })Pohne hodnotou podle fyziky pružiny a zachová rychlost přerušeného pohybu.
Průvodce: Timing, pružiny a skládánídecay
decay(value, { velocity, deceleration? })Začne s rychlostí a zpomaluje.
Průvodce: Timing, pružiny a skládánídelay
delay(ms);Controller, který jen čeká.
Průvodce: Timing, pružiny a skládánísequence
sequence([a, b, c]);Spouští controllery jeden po druhém.
Průvodce: Timing, pružiny a skládáníparallel
parallel([a, b], { stopTogether? }?)Spouští controllery společně.
Průvodce: Timing, pružiny a skládánístagger
stagger(ms, [a, b, c]);Spouští controllery jeden po druhém v pevném intervalu.
Průvodce: Timing, pružiny a skládáníloop
loop(animation, { iterations?, resetBeforeIteration? }?)Opakuje controller daný počet krát nebo donekonečna.
Průvodce: Timing, pružiny a skládáníkeyframes
keyframes(value, [0, 1, 0.5], { duration?, times?, repeat? }?)Provede hodnotu několika čísly s volitelnými časy a opakováním.
Průvodce: Timing, pružiny a skládáníEasing
Easing.inOut(Easing.cubic) · Easing.bezier(x1, y1, x2, y2)Křivky odpovídající React Native: linear, quad, cubic, sin, circle, exp, elastic, back, bounce, bezier a pomocníci in/out.
Průvodce: Timing, pružiny a skládánícreateTimeline
createTimeline({ track: [a, b] }, { duration?, repeat? }?)Posouvatelné hodiny s pojmenovanými stopami, mimo React.
Průvodce: Timing, pružiny a skládáníuseTimeline
useTimeline(tracks, { duration?, repeat?, autoStart? }?, deps?)Časová osa vlastněná komponentou, jejíž stopy fungují přímo v běžném style.
Průvodce: Timing, pružiny a skládáníKomponenty a rozvržení
Animated
<Animated.div seed pose tempo respond depart move />;Jmenný prostor hostitelů HTML a SVG jako Animated.div a k tomu základní funkce pod názvy z React Native.
Animated.wrap
Animated.wrap(Component) · Animated.createAnimatedComponent(Component)Umožní komponentě, která předává ref, přijímat props hostitelů Animated.
Průvodce: Komponenty AnimatedAnimated.Scope
<Animated.Scope pose? tempo? animation?>…</Animated.Scope>Sdílí název pózy, tempo a výchozí nastavení animace s prvky Animated uvnitř.
Průvodce: Komponenty AnimatedAnimated.Keep
<Animated.Keep seed? wait? onDeparted?>…</Animated.Keep>Drží potomky s key připojené, dokud jejich odchod neskončí.
Průvodce: Komponenty AnimatedAnimated.Scene
<Animated.Scene tempo?>…</Animated.Scene>Animuje změny rozvržení prvků move a propojuje prvky se stejnou identitou.
createLayoutScene
createLayoutScene(options?) → { attach, capture, commit, dispose }Stejná koordinace rozvržení zachycením a commitem pro jiné renderery.
Průvodce: Komponenty AnimateduseReorder
useReorder(items, onChange, { key?, axis?, tempo? }?)Změna pořadí řízeného seznamu podél jedné osy ukazatelem i klávesnicí.
Průvodce: Komponenty AnimatedVstup a propojení
input
input(targetRef, adapter, onEvent?)Připojí adaptér vstupu k prvku jako vlastněný controller.
Průvodce: Vstup a gestafollow
follow(target, source, { stiffness?, damping?, mass? }?)Přiměje jednu hodnotu následovat jinou s pružinou.
Průvodce: Vstup a gestaconnect
connect(node, (value) => write(value));Pošle každou změnu uzlu do funkce.
Průvodce: Vstup a gestaevent
Animated.event([{ nativeEvent: { contentOffset: { y } } }]);Mapuje vnořená data událostí na hodnoty, jako v React Native.
Průvodce: Vstup a gestadragInput
dragInput({ x?, y?, axis?, bounds?, elastic?, momentum?, settle? })Tažení ukazatelem i klávesnicí s mezemi, pružnými okraji, setrvačností a settle.
Průvodce: Vstup a gestapinchInput
pinchInput({ scale?, rotation?, minScale?, maxScale? })Měřítko a otočení z gesta dvěma ukazateli.
Průvodce: Vstup a gestamoveInput
moveInput({ x?, y?, relative?, reset? })Souřadnice ukazatele, volitelně vzhledem ke středu prvku.
Průvodce: Vstup a gestascrollInput
scrollInput({ x?, y?, progressX?, progressY?, target?, through? })Poloha a průběh posouvání prvku, stránky nebo prvku procházejícího viewportem.
Průvodce: Vstup a gestawheelInput
wheelInput({ x?, y? })Rozdíly kolečka myši.
Průvodce: Vstup a gestaviewportInput
viewportInput({ root?, margin?, amount?, once? })Zda je prvek ve viewportu.
Průvodce: Vstup a gestamediaInput
mediaInput('(min-width: 768px)');Zda odpovídá media query.
Průvodce: Vstup a gestalongPressInput
longPressInput({ delay?, threshold? })Ukazatel podržený déle než zpoždění a v mezích prahu pohybu.
Průvodce: Vstup a gestaswipeInput
swipeInput({ direction?: 'left' | 'right' | 'up' | 'down' | 'any' })Směr, vzdálenost a rychlost přejetí.
Průvodce: Vstup a gestaVýstup a diagnostika
bind
bind(element, style) → { update, inspect, dispose }Naváže styly Animated na prvek mimo React; vrací update, inspect a dispose.
inspect
inspect(element) → [{ property, driver, reason }]Cesta přehrávání a důvod fallbacku každé animované vlastnosti prvku.
Průvodce: Výkon a přehráváníoutput
output(targetRef, { style?, attributes?, properties?, text? })Vlastní výstup do stylu, atributu, textu nebo vlastnosti uvnitř useAnimated.
bindOutput
bindOutput(target, mapping) → { flush, dispose }Připojí mapování výstupu hned; vrací flush a dispose.