Value
new Value(initial: number)Zmienna liczba z setValue, setOffset, flattenOffset, extractOffset, stopAnimation i resetAnimation.
Dokumentacja API
Każdy eksport @kkwaenggwari/animated, z sygnaturą i przewodnikiem, który go wyjaśnia.
Wartości i grafy
ValueXY
new ValueXY({ x?, y? })Sparowane wartości x i y z tymi samymi operacjami oraz getLayout i getTranslateTransform.
createValue
createValue(initial: number | Record<string, number>)Tworzy liczbę lub nazwany rekord liczbowy poza React. Utworzenie niczego nie uruchamia.
Przewodnik: Wartości i styleAnimatedNode
node.getValue() · node.interpolate(config) · node.addListener(fn)Baza tylko do odczytu każdej wartości i grafu: getValue, interpolate i słuchacze.
AnimatedInterpolation
node.interpolate({ inputRange, outputRange, easing?, extrapolate? })Żywe mapowanie zakresów wejściowych na wyjściowe, z easing i ekstrapolacją extend, clamp lub identity.
AnimatedComputed
new AnimatedComputed(inputs, (...values) => result);Czyste obliczenie tylko do odczytu na jednym lub kilku wejściach. Wyjścia, które go używają, działają w kodzie JavaScript.
Przewodnik: Wartości i styleinterpolateFn
interpolateFn({ value, inputRange, outputRange });Oblicza interpolację raz dla zwykłej liczby.
Przewodnik: Wartości i styleadd
add(...inputs);Suma liczb i wartości.
Przewodnik: Wartości i stylesubtract
subtract(a, b);Różnica dwóch wejść.
Przewodnik: Wartości i stylemultiply
multiply(...inputs);Iloczyn liczb i wartości.
Przewodnik: Wartości i styledivide
divide(a, b);Iloraz dwóch wejść.
Przewodnik: Wartości i stylemodulo
modulo(a, b);Wartość zawijana od początku, na przykład dla niekończącego się obrotu.
Przewodnik: Wartości i stylediffClamp
diffClamp(input, min, max);Podąża za zmianami wejścia, ale zostaje w zakresie; przydatne dla nagłówków chowających się przy przewijaniu.
Przewodnik: Wartości i styleHooki React
useAnimatedValue
useAnimatedValue(initial, { scope?, id? }?)Posiadaj liczbę lub rekord liczbowy przez cały czas życia komponentu. W style jest zmienną CSS.
useAnimated
useAnimated(initial, value => { … }, deps?, { autoStart?, onComplete?, scope? }?)Posiadaj wartość oraz każdy kontroler, wejście i wyjście zadeklarowane w jej fabryce. Startuje, restartuje się przy zmianie zależności i sprząta.
Przewodnik: Wartości i styleuseAnimatedValueXY
useAnimatedValueXY({ x?, y? }?, options?)Posiadaj kompletną wartość dwuwymiarową.
Przewodnik: Wartości i styleuseAnimatedCSS
useAnimatedCSS(node, { scope?, id? }?): stringDaj pochodnemu węzłowi, który nie jest wyrażeniem calc(), własną zmienną CSS z czasem życia komponentu.
useAnimatedListener
useAnimatedListener(node, ({ value }) => void)Wywołuj funkcję przy każdej zmianie węzła lub ValueXY; usuwane przy odmontowaniu.
useAnimatedPresence
useAnimatedPresence(visible, { enter, exit, onExitComplete? })Zwraca { mounted, animatedValue } dla wejścia i wyjścia opartych na hooku.
AnimatedProvider
<AnimatedProvider scope={ref}>…</AnimatedProvider>;Ustawia domyślny zakres zmiennych CSS dla wartości hooków poniżej.
Przewodnik: Wartości i styleflushAnimatedUpdates
flushAnimatedUpdates();Stosuje oczekujące wyjście synchronicznie, dla deterministycznych testów.
Przewodnik: Wartości i styleSterowniki, kompozycja i osie czasu
timing
timing(value, { toValue, duration?, delay?, easing? })Porusza wartość po krzywej easing przez stały czas.
Przewodnik: Timing, sprężyny i kompozycjaspring
spring(value, { toValue, stiffness?, damping?, mass?, velocity? })Porusza wartość z fizyką sprężyny, zachowując prędkość przerwanego ruchu.
Przewodnik: Timing, sprężyny i kompozycjadecay
decay(value, { velocity, deceleration? })Startuje z prędkością i zwalnia.
Przewodnik: Timing, sprężyny i kompozycjadelay
delay(ms);Kontroler, który tylko czeka.
Przewodnik: Timing, sprężyny i kompozycjasequence
sequence([a, b, c]);Uruchamia kontrolery jeden po drugim.
Przewodnik: Timing, sprężyny i kompozycjaparallel
parallel([a, b], { stopTogether? }?)Uruchamia kontrolery razem.
Przewodnik: Timing, sprężyny i kompozycjastagger
stagger(ms, [a, b, c]);Startuje kontrolery jeden po drugim w stałym odstępie.
Przewodnik: Timing, sprężyny i kompozycjaloop
loop(animation, { iterations?, resetBeforeIteration? }?)Powtarza kontroler określoną liczbę razy lub bez końca.
Przewodnik: Timing, sprężyny i kompozycjakeyframes
keyframes(value, [0, 1, 0.5], { duration?, times?, repeat? }?)Prowadzi wartość przez kilka liczb, z opcjonalnymi czasami i powtórzeniami.
Przewodnik: Timing, sprężyny i kompozycjaEasing
Easing.inOut(Easing.cubic) · Easing.bezier(x1, y1, x2, y2)Krzywe odpowiadające React Native: linear, quad, cubic, sin, circle, exp, elastic, back, bounce, bezier i pomocniki in/out.
Przewodnik: Timing, sprężyny i kompozycjacreateTimeline
createTimeline({ track: [a, b] }, { duration?, repeat? }?)Przewijalny zegar z nazwanymi ścieżkami, poza React.
Przewodnik: Timing, sprężyny i kompozycjauseTimeline
useTimeline(tracks, { duration?, repeat?, autoStart? }?, deps?)Oś czasu należąca do komponentu, której ścieżki działają bezpośrednio w zwykłym style.
Przewodnik: Timing, sprężyny i kompozycjaKomponenty i układ
Animated
<Animated.div seed pose tempo respond depart move />;Przestrzeń nazw hostów HTML i SVG takich jak Animated.div oraz podstawowe funkcje pod nazwami z React Native.
Animated.wrap
Animated.wrap(Component) · Animated.createAnimatedComponent(Component)Sprawia, że komponent przekazujący ref przyjmuje props hostów Animated.
Przewodnik: Komponenty AnimatedAnimated.Scope
<Animated.Scope pose? tempo? animation?>…</Animated.Scope>Udostępnia nazwę pozy, tempo i domyślne ustawienia animacji elementom Animated wewnątrz.
Przewodnik: Komponenty AnimatedAnimated.Keep
<Animated.Keep seed? wait? onDeparted?>…</Animated.Keep>Utrzymuje dzieci z key zamontowane, aż skończy się ich wyjście.
Przewodnik: Komponenty AnimatedAnimated.Scene
<Animated.Scene tempo?>…</Animated.Scene>Animuje zmiany układu elementów move i łączy elementy o tej samej tożsamości.
createLayoutScene
createLayoutScene(options?) → { attach, capture, commit, dispose }Ta sama koordynacja układu przez przechwytywanie i zatwierdzanie dla innych rendererów.
Przewodnik: Komponenty AnimateduseReorder
useReorder(items, onChange, { key?, axis?, tempo? }?)Zmiana kolejności kontrolowanej listy wzdłuż jednej osi wskaźnikiem i klawiaturą.
Przewodnik: Komponenty AnimatedWejście i połączenia
input
input(targetRef, adapter, onEvent?)Podłącza adapter wejścia do elementu jako posiadany kontroler.
Przewodnik: Wejście i gestyfollow
follow(target, source, { stiffness?, damping?, mass? }?)Sprawia, że jedna wartość sprężyście podąża za drugą.
Przewodnik: Wejście i gestyconnect
connect(node, (value) => write(value));Wysyła każdą zmianę węzła do funkcji.
Przewodnik: Wejście i gestyevent
Animated.event([{ nativeEvent: { contentOffset: { y } } }]);Mapuje zagnieżdżone dane zdarzeń na wartości, jak w React Native.
Przewodnik: Wejście i gestydragInput
dragInput({ x?, y?, axis?, bounds?, elastic?, momentum?, settle? })Przeciąganie wskaźnikiem i klawiaturą z granicami, elastycznymi krawędziami, pędem i settle.
Przewodnik: Wejście i gestypinchInput
pinchInput({ scale?, rotation?, minScale?, maxScale? })Skala i obrót z gestu dwoma wskaźnikami.
Przewodnik: Wejście i gestymoveInput
moveInput({ x?, y?, relative?, reset? })Współrzędne wskaźnika, opcjonalnie względem środka elementu.
Przewodnik: Wejście i gestyscrollInput
scrollInput({ x?, y?, progressX?, progressY?, target?, through? })Pozycja i postęp przewijania elementu, strony lub elementu przechodzącego przez obszar widoku.
Przewodnik: Wejście i gestywheelInput
wheelInput({ x?, y? })Delty kółka myszy.
Przewodnik: Wejście i gestyviewportInput
viewportInput({ root?, margin?, amount?, once? })Czy element jest w obszarze widoku.
Przewodnik: Wejście i gestymediaInput
mediaInput('(min-width: 768px)');Czy media query pasuje.
Przewodnik: Wejście i gestylongPressInput
longPressInput({ delay?, threshold? })Wskaźnik przytrzymany dłużej niż opóźnienie i w granicach progu ruchu.
Przewodnik: Wejście i gestyswipeInput
swipeInput({ direction?: 'left' | 'right' | 'up' | 'down' | 'any' })Kierunek, odległość i prędkość przesunięcia.
Przewodnik: Wejście i gestyWyjście i diagnostyka
bind
bind(element, style) → { update, inspect, dispose }Wiąże style Animated z elementem poza React; zwraca update, inspect i dispose.
inspect
inspect(element) → [{ property, driver, reason }]Ścieżka odtwarzania i powód fallbacku każdej animowanej właściwości elementu.
Przewodnik: Wydajność i odtwarzanieoutput
output(targetRef, { style?, attributes?, properties?, text? })Posiada wyjście do stylu, atrybutu, tekstu lub właściwości wewnątrz useAnimated.
bindOutput
bindOutput(target, mapping) → { flush, dispose }Od razu podłącza mapowanie wyjścia; zwraca flush i dispose.