Value
new Value(initial: number)Módosítható szám setValue, setOffset, flattenOffset, extractOffset, stopAnimation és resetAnimation metódussal.
API-referencia
A @kkwaenggwari/animated minden exportja a szignatúrájával és a hozzá tartozó útmutatóval.
Értékek és gráfok
ValueXY
new ValueXY({ x?, y? })Ugyanazokkal a műveletekkel rendelkező x és y értékpár, plusz getLayout és getTranslateTransform.
createValue
createValue(initial: number | Record<string, number>)Számot vagy elnevezett numerikus rekordot hoz létre a Reacten kívül. A létrehozás semmit nem indít el.
Útmutató: Értékek és stílusAnimatedNode
node.getValue() · node.interpolate(config) · node.addListener(fn)Minden érték és gráf csak olvasható alapja: getValue, interpolate és listenerek.
AnimatedInterpolation
node.interpolate({ inputRange, outputRange, easing?, extrapolate? })Élő leképezés bemeneti tartományokból kimeneti tartományokba easing-gel és extend, clamp vagy identity extrapolációval.
AnimatedComputed
new AnimatedComputed(inputs, (...values) => result);Tiszta, csak olvasható számítás egy vagy több bemeneten. Az ezt használó kimenetek JavaScriptben futnak.
Útmutató: Értékek és stílusinterpolateFn
interpolateFn({ value, inputRange, outputRange });Egy interpolációt egyszer kiértékel egy sima számra.
Útmutató: Értékek és stílusadd
add(...inputs);Számok és értékek összege.
Útmutató: Értékek és stílussubtract
subtract(a, b);Két bemenet különbsége.
Útmutató: Értékek és stílusmultiply
multiply(...inputs);Számok és értékek szorzata.
Útmutató: Értékek és stílusdivide
divide(a, b);Két bemenet hányadosa.
Útmutató: Értékek és stílusmodulo
modulo(a, b);Körbeforduló érték, például végtelen forgáshoz.
Útmutató: Értékek és stílusdiffClamp
diffClamp(input, min, max);Követi a bemenet változásait, de egy tartományon belül marad; görgetéskor elrejtőző fejlécekhez hasznos.
Útmutató: Értékek és stílusReact-hookok
useAnimatedValue
useAnimatedValue(initial, { scope?, id? }?)Számot vagy numerikus rekordot birtokol a komponens élettartama alatt. A style-ban CSS-változó.
useAnimated
useAnimated(initial, value => { … }, deps?, { autoStart?, onComplete?, scope? }?)Birtokol egy értéket, valamint a factoryjában deklarált minden vezérlőt, bemenetet és kimenetet. Indít, függőségváltozáskor újraindít, és kitakarít.
Útmutató: Értékek és stílususeAnimatedValueXY
useAnimatedValueXY({ x?, y? }?, options?)Teljes kétdimenziós értéket birtokol.
Útmutató: Értékek és stílususeAnimatedCSS
useAnimatedCSS(node, { scope?, id? }?): stringEgy nem calc() kifejezésű származtatott csomópontnak saját CSS-változót ad, a komponens élettartamával.
useAnimatedListener
useAnimatedListener(node, ({ value }) => void)Egy csomópont vagy ValueXY minden változásakor meghív egy függvényt; leválasztáskor eltávolítja.
useAnimatedPresence
useAnimatedPresence(visible, { enter, exit, onExitComplete? }){ mounted, animatedValue } értéket ad vissza hookalapú belépéshez és kilépéshez.
AnimatedProvider
<AnimatedProvider scope={ref}>…</AnimatedProvider>;Beállítja az alatta lévő hookértékek alapértelmezett CSS-változó-scope-ját.
Útmutató: Értékek és stílusflushAnimatedUpdates
flushAnimatedUpdates();Szinkron alkalmazza a függő kimenetet, determinisztikus tesztekhez.
Útmutató: Értékek és stílusDriverek, kompozíció és idővonalak
timing
timing(value, { toValue, duration?, delay?, easing? })Egy értéket easing-görbén mozgat rögzített időtartam alatt.
Útmutató: Timing, rugók és kompozícióspring
spring(value, { toValue, stiffness?, damping?, mass?, velocity? })Egy értéket rugófizikával mozgat, megtartva a megszakított mozgás sebességét.
Útmutató: Timing, rugók és kompozíciódecay
decay(value, { velocity, deceleration? })Egy sebességgel indul, és lassul.
Útmutató: Timing, rugók és kompozíciódelay
delay(ms);Csak váró vezérlő.
Útmutató: Timing, rugók és kompozíciósequence
sequence([a, b, c]);Vezérlőket futtat egymás után.
Útmutató: Timing, rugók és kompozícióparallel
parallel([a, b], { stopTogether? }?)Vezérlőket futtat együtt.
Útmutató: Timing, rugók és kompozícióstagger
stagger(ms, [a, b, c]);Vezérlőket indít egymás után rögzített időközzel.
Útmutató: Timing, rugók és kompozícióloop
loop(animation, { iterations?, resetBeforeIteration? }?)Egy vezérlőt adott számú alkalommal vagy végtelenül ismétel.
Útmutató: Timing, rugók és kompozíciókeyframes
keyframes(value, [0, 1, 0.5], { duration?, times?, repeat? }?)Egy értéket több számon vezet végig, opcionális időpontokkal és ismétléssel.
Útmutató: Timing, rugók és kompozícióEasing
Easing.inOut(Easing.cubic) · Easing.bezier(x1, y1, x2, y2)A React Native-belivel megegyező görbék: linear, quad, cubic, sin, circle, exp, elastic, back, bounce, bezier és in/out segédfüggvények.
Útmutató: Timing, rugók és kompozíciócreateTimeline
createTimeline({ track: [a, b] }, { duration?, repeat? }?)Tekerhető óra elnevezett sávokkal, a Reacten kívül.
Útmutató: Timing, rugók és kompozícióuseTimeline
useTimeline(tracks, { duration?, repeat?, autoStart? }?, deps?)A komponenshez tartozó idővonal, amelynek sávjai közvetlenül a sima stílusban működnek.
Útmutató: Timing, rugók és kompozícióKomponensek és elrendezés
Animated
<Animated.div seed pose tempo respond depart move />;Az olyan HTML- és SVG-gazdák névtere, mint az Animated.div, valamint a React Native neveivel elérhető alapfüggvények.
Animated.wrap
Animated.wrap(Component) · Animated.createAnimatedComponent(Component)Lehetővé teszi, hogy egy ref-továbbító komponens fogadja az Animated gazdák props-ait.
Útmutató: Animated komponensekAnimated.Scope
<Animated.Scope pose? tempo? animation?>…</Animated.Scope>Póznevet, tempót és animációs alapértékeket oszt meg a benne lévő Animated elemekkel.
Útmutató: Animated komponensekAnimated.Keep
<Animated.Keep seed? wait? onDeparted?>…</Animated.Keep>A key-jel rendelkező gyermekeket csatolva tartja, amíg a távozásuk véget nem ér.
Útmutató: Animated komponensekAnimated.Scene
<Animated.Scene tempo?>…</Animated.Scene>Animálja a move elemek elrendezésváltozásait, és összeköti az azonos identitású elemeket.
createLayoutScene
createLayoutScene(options?) → { attach, capture, commit, dispose }Ugyanaz a rögzítési és commit-elrendezési koordináció más renderelőkhöz.
Útmutató: Animated komponensekuseReorder
useReorder(items, onChange, { key?, axis?, tempo? }?)Vezérelt lista átrendezése egy tengely mentén mutatóval és billentyűzettel.
Útmutató: Animated komponensekBemenet és kapcsolatok
input
input(targetRef, adapter, onEvent?)Bemeneti adaptert csatol egy elemhez birtokolt vezérlőként.
Útmutató: Bemenet és gesztusokfollow
follow(target, source, { stiffness?, damping?, mass? }?)Az egyik értéket rugóval egy másik után vezeti.
Útmutató: Bemenet és gesztusokconnect
connect(node, (value) => write(value));Egy csomópont minden változását egy függvénynek küldi.
Útmutató: Bemenet és gesztusokevent
Animated.event([{ nativeEvent: { contentOffset: { y } } }]);Beágyazott eseményadatokat képez le értékekre, mint React Native-ben.
Útmutató: Bemenet és gesztusokdragInput
dragInput({ x?, y?, axis?, bounds?, elastic?, momentum?, settle? })Mutatós és billentyűzetes húzás határokkal, rugalmas szélekkel, lendülettel és settle-lel.
Útmutató: Bemenet és gesztusokpinchInput
pinchInput({ scale?, rotation?, minScale?, maxScale? })Méretezés és forgatás kétujjas gesztusból.
Útmutató: Bemenet és gesztusokmoveInput
moveInput({ x?, y?, relative?, reset? })A mutató koordinátái, igény szerint az elem középpontjához képest.
Útmutató: Bemenet és gesztusokscrollInput
scrollInput({ x?, y?, progressX?, progressY?, target?, through? })Egy elem, az oldal vagy a nézetablakon áthaladó elem görgetési pozíciója és előrehaladása.
Útmutató: Bemenet és gesztusokwheelInput
wheelInput({ x?, y? })Görgetőkerék-elmozdulások.
Útmutató: Bemenet és gesztusokviewportInput
viewportInput({ root?, margin?, amount?, once? })A nézetablakban van-e az elem.
Útmutató: Bemenet és gesztusokmediaInput
mediaInput('(min-width: 768px)');Teljesül-e egy media query.
Útmutató: Bemenet és gesztusoklongPressInput
longPressInput({ delay?, threshold? })Késleltetés után és egy mozgási küszöbön belül nyomva tartott mutató.
Útmutató: Bemenet és gesztusokswipeInput
swipeInput({ direction?: 'left' | 'right' | 'up' | 'down' | 'any' })A csúsztatás iránya, távolsága és sebessége.
Útmutató: Bemenet és gesztusokKimenet és diagnosztika
bind
bind(element, style) → { update, inspect, dispose }Animated stílusokat köt egy elemhez a Reacten kívül; update, inspect és dispose függvényt ad vissza.
inspect
inspect(element) → [{ property, driver, reason }]Egy elem minden animált tulajdonságának lejátszási útja és tartalékútvonal-oka.
Útmutató: Teljesítmény és lejátszásoutput
output(targetRef, { style?, attributes?, properties?, text? })Stílus-, attribútum-, szöveg- vagy tulajdonságkimenetet birtokol a useAnimated-en belül.
bindOutput
bindOutput(target, mapping) → { flush, dispose }Azonnal csatol egy kimeneti leképezést; flush-t és dispose-t ad vissza.