Value
new Value(initial: number)Keičiamas skaičius su setValue, setOffset, flattenOffset, extractOffset, stopAnimation ir resetAnimation.
API žinynas
Kiekvienas @kkwaenggwari/animated eksportas su signatūra ir jį paaiškinančiu vadovu.
Reikšmės ir grafai
ValueXY
new ValueXY({ x?, y? })x ir y reikšmių pora su tomis pačiomis operacijomis, taip pat getLayout ir getTranslateTransform.
createValue
createValue(initial: number | Record<string, number>)Sukuria skaičių ar pavadintą skaitinį įrašą už React ribų. Sukūrimas nieko nepaleidžia.
Vadovas: Reikšmės ir stiliusAnimatedNode
node.getValue() · node.interpolate(config) · node.addListener(fn)Kiekvienos reikšmės ir grafo tik skaitymo pagrindas: getValue, interpolate ir listener.
AnimatedInterpolation
node.interpolate({ inputRange, outputRange, easing?, extrapolate? })Gyvas susiejimas iš įvesties į išvesties diapazonus su easing ir extend, clamp ar identity ekstrapoliacija.
AnimatedComputed
new AnimatedComputed(inputs, (...values) => result);Grynas tik skaitymo skaičiavimas su viena ar keliomis įvestimis. Jį naudojančios išvestys vykdomos JavaScript.
Vadovas: Reikšmės ir stiliusinterpolateFn
interpolateFn({ value, inputRange, outputRange });Vieną kartą apskaičiuoja interpoliaciją paprastam skaičiui.
Vadovas: Reikšmės ir stiliusadd
add(...inputs);Skaičių ir reikšmių suma.
Vadovas: Reikšmės ir stiliussubtract
subtract(a, b);Dviejų įvesčių skirtumas.
Vadovas: Reikšmės ir stiliusmultiply
multiply(...inputs);Skaičių ir reikšmių sandauga.
Vadovas: Reikšmės ir stiliusdivide
divide(a, b);Dviejų įvesčių dalmuo.
Vadovas: Reikšmės ir stiliusmodulo
modulo(a, b);Apsukanti reikšmė, pavyzdžiui, begaliniam sukimuisi.
Vadovas: Reikšmės ir stiliusdiffClamp
diffClamp(input, min, max);Seka įvesties pokyčius, bet lieka diapazone; naudinga slenkant pasislepiančioms antraštėms.
Vadovas: Reikšmės ir stiliusReact hook
useAnimatedValue
useAnimatedValue(initial, { scope?, id? }?)Valdo skaičių ar skaitinį įrašą visą komponento gyvavimo laiką. style viduje tai CSS kintamasis.
useAnimated
useAnimated(initial, value => { … }, deps?, { autoStart?, onComplete?, scope? }?)Valdo reikšmę ir kiekvieną jos factory aprašytą valdiklį, įvestį bei išvestį. Paleidžia, paleidžia iš naujo pasikeitus priklausomybėms ir sutvarko.
Vadovas: Reikšmės ir stiliususeAnimatedValueXY
useAnimatedValueXY({ x?, y? }?, options?)Valdo visą dvimatę reikšmę.
Vadovas: Reikšmės ir stiliususeAnimatedCSS
useAnimatedCSS(node, { scope?, id? }?): stringIšvestiniam mazgui, kuris nėra calc() išraiška, suteikia savo CSS kintamąjį su komponento gyvavimo laiku.
useAnimatedListener
useAnimatedListener(node, ({ value }) => void)Iškviečia funkciją po kiekvieno mazgo ar ValueXY pakeitimo; pašalinama atjungiant.
useAnimatedPresence
useAnimatedPresence(visible, { enter, exit, onExitComplete? })Grąžina { mounted, animatedValue } įėjimui ir išėjimui su hook.
AnimatedProvider
<AnimatedProvider scope={ref}>…</AnimatedProvider>;Nustato numatytąjį CSS kintamųjų scope po juo esančioms hook reikšmėms.
Vadovas: Reikšmės ir stiliusflushAnimatedUpdates
flushAnimatedUpdates();Sinchroniškai pritaiko laukiančią išvestį deterministiniams testams.
Vadovas: Reikšmės ir stiliusDriver, kompozicija ir laiko juostos
timing
timing(value, { toValue, duration?, delay?, easing? })Judina reikšmę easing kreive per fiksuotą trukmę.
Vadovas: Timing, spyruoklės ir kompozicijaspring
spring(value, { toValue, stiffness?, damping?, mass?, velocity? })Judina reikšmę spyruoklės fizika, išlaikydama pertraukto judesio greitį.
Vadovas: Timing, spyruoklės ir kompozicijadecay
decay(value, { velocity, deceleration? })Pradeda nuo greičio ir lėtėja.
Vadovas: Timing, spyruoklės ir kompozicijadelay
delay(ms);Valdiklis, kuris tik laukia.
Vadovas: Timing, spyruoklės ir kompozicijasequence
sequence([a, b, c]);Vykdo valdiklius vieną po kito.
Vadovas: Timing, spyruoklės ir kompozicijaparallel
parallel([a, b], { stopTogether? }?)Vykdo valdiklius kartu.
Vadovas: Timing, spyruoklės ir kompozicijastagger
stagger(ms, [a, b, c]);Paleidžia valdiklius vieną po kito fiksuotu intervalu.
Vadovas: Timing, spyruoklės ir kompozicijaloop
loop(animation, { iterations?, resetBeforeIteration? }?)Kartoja valdiklį nurodytą kartų skaičių arba be galo.
Vadovas: Timing, spyruoklės ir kompozicijakeyframes
keyframes(value, [0, 1, 0.5], { duration?, times?, repeat? }?)Praveda reikšmę per kelis skaičius su neprivalomais laikais ir kartojimais.
Vadovas: Timing, spyruoklės ir kompozicijaEasing
Easing.inOut(Easing.cubic) · Easing.bezier(x1, y1, x2, y2)React Native atitinkančios kreivės: linear, quad, cubic, sin, circle, exp, elastic, back, bounce, bezier ir in/out pagalbinės.
Vadovas: Timing, spyruoklės ir kompozicijacreateTimeline
createTimeline({ track: [a, b] }, { duration?, repeat? }?)Persukamas laikrodis su pavadintais takeliais, už React ribų.
Vadovas: Timing, spyruoklės ir kompozicijauseTimeline
useTimeline(tracks, { duration?, repeat?, autoStart? }?, deps?)Komponentui priklausanti laiko juosta, kurios takeliai veikia tiesiai paprastame stiliuje.
Vadovas: Timing, spyruoklės ir kompozicijaKomponentai ir išdėstymas
Animated
<Animated.div seed pose tempo respond depart move />;HTML ir SVG šeimininkų, tokių kaip Animated.div, vardų sritis, taip pat pagrindinės funkcijos React Native pavadinimais.
Animated.wrap
Animated.wrap(Component) · Animated.createAnimatedComponent(Component)Leidžia ref perduodančiam komponentui priimti Animated šeimininkų props.
Vadovas: Animated komponentaiAnimated.Scope
<Animated.Scope pose? tempo? animation?>…</Animated.Scope>Dalijasi pozos pavadinimu, tempo ir animacijos numatytosiomis reikšmėmis su viduje esančiais Animated elementais.
Vadovas: Animated komponentaiAnimated.Keep
<Animated.Keep seed? wait? onDeparted?>…</Animated.Keep>Išlaiko vaikus su key prijungtus, kol baigiasi jų išėjimas.
Vadovas: Animated komponentaiAnimated.Scene
<Animated.Scene tempo?>…</Animated.Scene>Animuoja move elementų išdėstymo pokyčius ir sujungia elementus su ta pačia tapatybe.
createLayoutScene
createLayoutScene(options?) → { attach, capture, commit, dispose }Tas pats išdėstymo fiksavimo ir commit koordinavimas kitiems atvaizdavimo varikliams.
Vadovas: Animated komponentaiuseReorder
useReorder(items, onChange, { key?, axis?, tempo? }?)Valdomo sąrašo pertvarkymas viena ašimi žymekliu ir klaviatūra.
Vadovas: Animated komponentaiĮvestis ir ryšiai
input
input(targetRef, adapter, onEvent?)Prijungia įvesties adapterį prie elemento kaip valdomą valdiklį.
Vadovas: Įvestis ir gestaifollow
follow(target, source, { stiffness?, damping?, mass? }?)Priverčia vieną reikšmę sekti kitą su spyruokle.
Vadovas: Įvestis ir gestaiconnect
connect(node, (value) => write(value));Siunčia kiekvieną mazgo pakeitimą funkcijai.
Vadovas: Įvestis ir gestaievent
Animated.event([{ nativeEvent: { contentOffset: { y } } }]);Susieja įdėtus įvykių duomenis su reikšmėmis, kaip React Native.
Vadovas: Įvestis ir gestaidragInput
dragInput({ x?, y?, axis?, bounds?, elastic?, momentum?, settle? })Vilkimas žymekliu ir klaviatūra su ribomis, elastingais kraštais, inercija ir settle.
Vadovas: Įvestis ir gestaipinchInput
pinchInput({ scale?, rotation?, minScale?, maxScale? })Mastelis ir posūkis iš dviejų žymeklių gesto.
Vadovas: Įvestis ir gestaimoveInput
moveInput({ x?, y?, relative?, reset? })Žymeklio koordinatės, pasirinktinai elemento centro atžvilgiu.
Vadovas: Įvestis ir gestaiscrollInput
scrollInput({ x?, y?, progressX?, progressY?, target?, through? })Elemento, puslapio ar per matomąją sritį pereinančio elemento slinkimo padėtis ir eiga.
Vadovas: Įvestis ir gestaiwheelInput
wheelInput({ x?, y? })Ratuko poslinkiai.
Vadovas: Įvestis ir gestaiviewportInput
viewportInput({ root?, margin?, amount?, once? })Ar elementas yra matomojoje srityje.
Vadovas: Įvestis ir gestaimediaInput
mediaInput('(min-width: 768px)');Ar media query atitinka.
Vadovas: Įvestis ir gestailongPressInput
longPressInput({ delay?, threshold? })Po delsos ir neviršijant judesio slenksčio laikomas žymeklis.
Vadovas: Įvestis ir gestaiswipeInput
swipeInput({ direction?: 'left' | 'right' | 'up' | 'down' | 'any' })Braukimo kryptis, atstumas ir greitis.
Vadovas: Įvestis ir gestaiIšvestis ir diagnostika
bind
bind(element, style) → { update, inspect, dispose }Susieja Animated stilius su elementu už React ribų; grąžina update, inspect ir dispose.
inspect
inspect(element) → [{ property, driver, reason }]Kiekvienos animuojamos elemento savybės grojimo kelias ir atsarginio kelio priežastis.
Vadovas: Našumas ir grojimasoutput
output(targetRef, { style?, attributes?, properties?, text? })Valdo stiliaus, atributo, teksto ar savybės išvestį useAnimated viduje.
bindOutput
bindOutput(target, mapping) → { flush, dispose }Iškart prijungia išvesties susiejimą; grąžina flush ir dispose.