Value
new Value(initial: number)Muuttuva luku metodeilla setValue, setOffset, flattenOffset, extractOffset, stopAnimation ja resetAnimation.
API-viite
Jokainen @kkwaenggwari/animated-paketin export allekirjoituksineen ja sen selittävine oppaineen.
Arvot ja graafit
ValueXY
new ValueXY({ x?, y? })x- ja y-arvojen pari samoilla toiminnoilla sekä getLayout ja getTranslateTransform.
createValue
createValue(initial: number | Record<string, number>)Luo luvun tai nimetyn numeerisen tietueen Reactin ulkopuolella. Luominen ei käynnistä mitään.
Opas: Arvot ja tyyliAnimatedNode
node.getValue() · node.interpolate(config) · node.addListener(fn)Jokaisen arvon ja graafin vain luku -perusta: getValue, interpolate ja listenerit.
AnimatedInterpolation
node.interpolate({ inputRange, outputRange, easing?, extrapolate? })Elävä kuvaus syötealueilta tulosalueille easing-asetuksella ja extend-, clamp- tai identity-ekstrapoloinnilla.
AnimatedComputed
new AnimatedComputed(inputs, (...values) => result);Puhdas vain luku -laskelma yhdestä tai useammasta syötteestä. Sitä käyttävät tulokset ajetaan JavaScriptissä.
Opas: Arvot ja tyyliinterpolateFn
interpolateFn({ value, inputRange, outputRange });Laskee interpoloinnin kerran tavalliselle luvulle.
Opas: Arvot ja tyyliadd
add(...inputs);Lukujen ja arvojen summa.
Opas: Arvot ja tyylisubtract
subtract(a, b);Kahden syötteen erotus.
Opas: Arvot ja tyylimultiply
multiply(...inputs);Lukujen ja arvojen tulo.
Opas: Arvot ja tyylidivide
divide(a, b);Kahden syötteen osamäärä.
Opas: Arvot ja tyylimodulo
modulo(a, b);Kiertyvä arvo, esimerkiksi loputtomaan kiertoon.
Opas: Arvot ja tyylidiffClamp
diffClamp(input, min, max);Seuraa syötteen muutoksia mutta pysyy alueella; hyödyllinen vierittäessä piiloutuville ylätunnisteille.
Opas: Arvot ja tyyliReact-hookit
useAnimatedValue
useAnimatedValue(initial, { scope?, id? }?)Omistaa luvun tai numeerisen tietueen komponentin elinkaaren ajan. style-propsissa se on CSS-muuttuja.
useAnimated
useAnimated(initial, value => { … }, deps?, { autoStart?, onComplete?, scope? }?)Omistaa arvon sekä jokaisen sen factoryssa määritellyn ohjaimen, syötteen ja tuloksen. Käynnistää, käynnistää uudelleen riippuvuuksien muuttuessa ja siivoaa.
Opas: Arvot ja tyyliuseAnimatedValueXY
useAnimatedValueXY({ x?, y? }?, options?)Omistaa kokonaisen kaksiulotteisen arvon.
Opas: Arvot ja tyyliuseAnimatedCSS
useAnimatedCSS(node, { scope?, id? }?): stringAntaa johdetulle solmulle, joka ei ole calc()-lauseke, oman CSS-muuttujan komponentin elinkaarella.
useAnimatedListener
useAnimatedListener(node, ({ value }) => void)Kutsuu funktiota solmun tai ValueXY-arvon jokaisella muutoksella; poistetaan irrotettaessa.
useAnimatedPresence
useAnimatedPresence(visible, { enter, exit, onExitComplete? })Palauttaa { mounted, animatedValue } hook-pohjaiseen saapumiseen ja poistumiseen.
AnimatedProvider
<AnimatedProvider scope={ref}>…</AnimatedProvider>;Asettaa oletusarvoisen CSS-muuttujien scopen alla oleville hookien arvoille.
Opas: Arvot ja tyyliflushAnimatedUpdates
flushAnimatedUpdates();Soveltaa odottavan tuloksen synkronisesti deterministisiä testejä varten.
Opas: Arvot ja tyyliDriverit, koostaminen ja aikajanat
timing
timing(value, { toValue, duration?, delay?, easing? })Liikuttaa arvoa easing-käyrää pitkin kiinteän keston ajan.
Opas: Timing, jouset ja koostaminenspring
spring(value, { toValue, stiffness?, damping?, mass?, velocity? })Liikuttaa arvoa jousifysiikalla säilyttäen keskeytetyn liikkeen nopeuden.
Opas: Timing, jouset ja koostaminendecay
decay(value, { velocity, deceleration? })Alkaa nopeudella ja hidastuu.
Opas: Timing, jouset ja koostaminendelay
delay(ms);Ohjain, joka vain odottaa.
Opas: Timing, jouset ja koostaminensequence
sequence([a, b, c]);Suorittaa ohjaimet peräkkäin.
Opas: Timing, jouset ja koostaminenparallel
parallel([a, b], { stopTogether? }?)Suorittaa ohjaimet yhdessä.
Opas: Timing, jouset ja koostaminenstagger
stagger(ms, [a, b, c]);Käynnistää ohjaimet peräkkäin kiinteällä välillä.
Opas: Timing, jouset ja koostaminenloop
loop(animation, { iterations?, resetBeforeIteration? }?)Toistaa ohjainta tietyn määrän kertoja tai loputtomasti.
Opas: Timing, jouset ja koostaminenkeyframes
keyframes(value, [0, 1, 0.5], { duration?, times?, repeat? }?)Vie arvon useiden lukujen läpi valinnaisilla ajoilla ja toistoilla.
Opas: Timing, jouset ja koostaminenEasing
Easing.inOut(Easing.cubic) · Easing.bezier(x1, y1, x2, y2)React Nativea vastaavat käyrät: linear, quad, cubic, sin, circle, exp, elastic, back, bounce, bezier sekä in/out-apufunktiot.
Opas: Timing, jouset ja koostaminencreateTimeline
createTimeline({ track: [a, b] }, { duration?, repeat? }?)Siirrettävä kello nimetyillä raidoilla, Reactin ulkopuolella.
Opas: Timing, jouset ja koostaminenuseTimeline
useTimeline(tracks, { duration?, repeat?, autoStart? }?, deps?)Komponentille kuuluva aikajana, jonka raidat toimivat suoraan tavallisessa tyylissä.
Opas: Timing, jouset ja koostaminenKomponentit ja asettelu
Animated
<Animated.div seed pose tempo respond depart move />;HTML- ja SVG-isäntien, kuten Animated.div, nimiavaruus sekä ydinfunktiot React Nativen nimillä.
Animated.wrap
Animated.wrap(Component) · Animated.createAnimatedComponent(Component)Saa refin välittävän komponentin hyväksymään Animated-isäntien props-arvot.
Opas: Animated-komponentitAnimated.Scope
<Animated.Scope pose? tempo? animation?>…</Animated.Scope>Jakaa asennon nimen, tempon ja animaation oletukset sisällään oleville Animated-elementeille.
Opas: Animated-komponentitAnimated.Keep
<Animated.Keep seed? wait? onDeparted?>…</Animated.Keep>Pitää key-avaimelliset lapset kiinnitettyinä, kunnes niiden poistuminen päättyy.
Opas: Animated-komponentitAnimated.Scene
<Animated.Scene tempo?>…</Animated.Scene>Animoi move-elementtien asettelumuutokset ja yhdistää saman identiteetin elementit.
createLayoutScene
createLayoutScene(options?) → { attach, capture, commit, dispose }Sama kaappaus- ja commit-asettelukoordinaatio muille renderöijille.
Opas: Animated-komponentituseReorder
useReorder(items, onChange, { key?, axis?, tempo? }?)Ohjatun listan järjestäminen yhdellä akselilla osoittimella ja näppäimistöllä.
Opas: Animated-komponentitSyöte ja kytkennät
input
input(targetRef, adapter, onEvent?)Liittää elementtiin syötesovittimen omistettuna ohjaimena.
Opas: Syöte ja eleetfollow
follow(target, source, { stiffness?, damping?, mass? }?)Saa yhden arvon seuraamaan toista jousella.
Opas: Syöte ja eleetconnect
connect(node, (value) => write(value));Lähettää solmun jokaisen muutoksen funktiolle.
Opas: Syöte ja eleetevent
Animated.event([{ nativeEvent: { contentOffset: { y } } }]);Kuvaa sisäkkäisen tapahtumadatan arvoiksi kuten React Nativessa.
Opas: Syöte ja eleetdragInput
dragInput({ x?, y?, axis?, bounds?, elastic?, momentum?, settle? })Osoitin- ja näppäimistövetäminen rajoilla, joustavilla reunoilla, liikemäärällä ja settle-funktiolla.
Opas: Syöte ja eleetpinchInput
pinchInput({ scale?, rotation?, minScale?, maxScale? })Skaalaus ja kierto kahden osoittimen eleestä.
Opas: Syöte ja eleetmoveInput
moveInput({ x?, y?, relative?, reset? })Osoittimen koordinaatit, halutessa suhteessa elementin keskipisteeseen.
Opas: Syöte ja eleetscrollInput
scrollInput({ x?, y?, progressX?, progressY?, target?, through? })Elementin, sivun tai näkymän läpi kulkevan elementin vierityskohta ja edistyminen.
Opas: Syöte ja eleetwheelInput
wheelInput({ x?, y? })Rullan muutokset.
Opas: Syöte ja eleetviewportInput
viewportInput({ root?, margin?, amount?, once? })Onko elementti näkymässä.
Opas: Syöte ja eleetmediaInput
mediaInput('(min-width: 768px)');Täsmääkö media query.
Opas: Syöte ja eleetlongPressInput
longPressInput({ delay?, threshold? })Viiveen jälkeen ja liikekynnyksen sisällä pohjassa pidetty osoitin.
Opas: Syöte ja eleetswipeInput
swipeInput({ direction?: 'left' | 'right' | 'up' | 'down' | 'any' })Pyyhkäisyn suunta, etäisyys ja nopeus.
Opas: Syöte ja eleetTulos ja diagnostiikka
bind
bind(element, style) → { update, inspect, dispose }Sitoo Animated-tyylit elementtiin Reactin ulkopuolella; palauttaa update-, inspect- ja dispose-funktiot.
inspect
inspect(element) → [{ property, driver, reason }]Elementin jokaisen animoidun ominaisuuden toistopolku ja varapolun syy.
Opas: Suorituskyky ja toistooutput
output(targetRef, { style?, attributes?, properties?, text? })Omistaa tyyli-, attribuutti-, teksti- tai ominaisuustuloksen useAnimated-kutsun sisällä.
bindOutput
bindOutput(target, mapping) → { flush, dispose }Liittää tuloskuvauksen heti; palauttaa flush- ja dispose-funktiot.