Value
new Value(initial: number)setValue, setOffset, flattenOffset, extractOffset, stopAnimation ve resetAnimation içeren değiştirilebilir bir sayı.
API başvurusu
@kkwaenggwari/animated'ın her export'u; imzası ve onu açıklayan kılavuzla.
Değerler ve grafikler
ValueXY
new ValueXY({ x?, y? })Aynı işlemlere sahip x ve y değer çifti; ayrıca getLayout ve getTranslateTransform.
createValue
createValue(initial: number | Record<string, number>)React dışında bir sayı ya da adlandırılmış sayısal kayıt oluşturur. Oluşturmak hiçbir şeyi başlatmaz.
Kılavuz: Değerler ve stilAnimatedNode
node.getValue() · node.interpolate(config) · node.addListener(fn)Her değerin ve grafiğin salt okunur temeli: getValue, interpolate ve listener'lar.
AnimatedInterpolation
node.interpolate({ inputRange, outputRange, easing?, extrapolate? })easing ve extend, clamp ya da identity dış değerlemesiyle girdi aralıklarından çıktı aralıklarına canlı bir eşleme.
AnimatedComputed
new AnimatedComputed(inputs, (...values) => result);Bir ya da daha fazla girdi üzerinde saf, salt okunur bir hesaplama. Onu kullanan çıktılar JavaScript'te çalışır.
Kılavuz: Değerler ve stilinterpolateFn
interpolateFn({ value, inputRange, outputRange });Düz bir sayı için bir interpolasyonu bir kez hesaplar.
Kılavuz: Değerler ve stiladd
add(...inputs);Sayıların ve değerlerin toplamı.
Kılavuz: Değerler ve stilsubtract
subtract(a, b);İki girdinin farkı.
Kılavuz: Değerler ve stilmultiply
multiply(...inputs);Sayıların ve değerlerin çarpımı.
Kılavuz: Değerler ve stildivide
divide(a, b);İki girdinin bölümü.
Kılavuz: Değerler ve stilmodulo
modulo(a, b);Sarmalanan bir değer; örneğin sonsuz bir dönüş için.
Kılavuz: Değerler ve stildiffClamp
diffClamp(input, min, max);Girdinin değişikliklerini izler ama bir aralıkta kalır; kaydırınca gizlenen üst bilgiler için kullanışlıdır.
Kılavuz: Değerler ve stilReact hook'ları
useAnimatedValue
useAnimatedValue(initial, { scope?, id? }?)Bileşenin ömrü boyunca bir sayıya ya da sayısal kayda sahip olur. style içinde bir CSS değişkenidir.
useAnimated
useAnimated(initial, value => { … }, deps?, { autoStart?, onComplete?, scope? }?)Bir değere ve factory'sinde bildirilen her denetleyiciye, girdiye ve çıktıya sahip olur. Başlatır, bağımlılık değişince yeniden başlatır ve temizler.
Kılavuz: Değerler ve stiluseAnimatedValueXY
useAnimatedValueXY({ x?, y? }?, options?)Eksiksiz iki boyutlu bir değere sahip olur.
Kılavuz: Değerler ve stiluseAnimatedCSS
useAnimatedCSS(node, { scope?, id? }?): stringcalc() ifadesi olmayan türetilmiş bir düğüme, bileşen ömrüne sahip kendi CSS değişkenini verir.
useAnimatedListener
useAnimatedListener(node, ({ value }) => void)Bir düğümün ya da ValueXY'nin her değişikliğinde bir fonksiyon çağırır; ayrılınca kaldırılır.
useAnimatedPresence
useAnimatedPresence(visible, { enter, exit, onExitComplete? })Hook tabanlı giriş ve çıkış için { mounted, animatedValue } döndürür.
AnimatedProvider
<AnimatedProvider scope={ref}>…</AnimatedProvider>;Altındaki hook değerleri için varsayılan CSS değişkeni scope'unu ayarlar.
Kılavuz: Değerler ve stilflushAnimatedUpdates
flushAnimatedUpdates();Belirlenimci testler için bekleyen çıktıyı senkron olarak uygular.
Kılavuz: Değerler ve stilDriver'lar, bileşim ve zaman çizelgeleri
timing
timing(value, { toValue, duration?, delay?, easing? })Bir değeri sabit süre boyunca bir easing eğrisi üzerinde hareket ettirir.
Kılavuz: Timing, yaylar ve bileşimspring
spring(value, { toValue, stiffness?, damping?, mass?, velocity? })Bir değeri yay fiziğiyle hareket ettirir; kesilen hareketin hızını korur.
Kılavuz: Timing, yaylar ve bileşimdecay
decay(value, { velocity, deceleration? })Bir hızla başlar ve yavaşlar.
Kılavuz: Timing, yaylar ve bileşimdelay
delay(ms);Yalnızca bekleyen bir denetleyici.
Kılavuz: Timing, yaylar ve bileşimsequence
sequence([a, b, c]);Denetleyicileri birbiri ardına çalıştırır.
Kılavuz: Timing, yaylar ve bileşimparallel
parallel([a, b], { stopTogether? }?)Denetleyicileri birlikte çalıştırır.
Kılavuz: Timing, yaylar ve bileşimstagger
stagger(ms, [a, b, c]);Denetleyicileri sabit aralıklarla art arda başlatır.
Kılavuz: Timing, yaylar ve bileşimloop
loop(animation, { iterations?, resetBeforeIteration? }?)Bir denetleyiciyi belirli sayıda ya da sonsuza dek tekrarlar.
Kılavuz: Timing, yaylar ve bileşimkeyframes
keyframes(value, [0, 1, 0.5], { duration?, times?, repeat? }?)Bir değeri isteğe bağlı zamanlar ve tekrarlarla birkaç sayı arasından geçirir.
Kılavuz: Timing, yaylar ve bileşimEasing
Easing.inOut(Easing.cubic) · Easing.bezier(x1, y1, x2, y2)React Native ile eşleşen eğriler: linear, quad, cubic, sin, circle, exp, elastic, back, bounce, bezier ve in/out yardımcıları.
Kılavuz: Timing, yaylar ve bileşimcreateTimeline
createTimeline({ track: [a, b] }, { duration?, repeat? }?)React dışında, adlandırılmış parçalara sahip konumlanabilir bir saat.
Kılavuz: Timing, yaylar ve bileşimuseTimeline
useTimeline(tracks, { duration?, repeat?, autoStart? }?, deps?)Parçaları doğrudan sıradan stilde çalışan, bileşene ait bir zaman çizelgesi.
Kılavuz: Timing, yaylar ve bileşimBileşenler ve düzen
Animated
<Animated.div seed pose tempo respond depart move />;Animated.div gibi HTML ve SVG ana bilgisayarlarının ad alanı; ayrıca React Native adlarıyla temel fonksiyonlar.
Animated.wrap
Animated.wrap(Component) · Animated.createAnimatedComponent(Component)Ref ileten bir bileşenin Animated ana bilgisayar props'unu kabul etmesini sağlar.
Kılavuz: Animated bileşenleriAnimated.Scope
<Animated.Scope pose? tempo? animation?>…</Animated.Scope>İçindeki Animated öğelerle bir pose adı, tempo ve animasyon varsayılanlarını paylaşır.
Kılavuz: Animated bileşenleriAnimated.Keep
<Animated.Keep seed? wait? onDeparted?>…</Animated.Keep>Key'li çocukları ayrılışları bitene kadar bağlı tutar.
Kılavuz: Animated bileşenleriAnimated.Scene
<Animated.Scene tempo?>…</Animated.Scene>move öğelerinin düzen değişikliklerini canlandırır ve aynı kimliğe sahip öğeleri bağlar.
createLayoutScene
createLayoutScene(options?) → { attach, capture, commit, dispose }Diğer render ediciler için aynı yakalama ve commit düzen koordinasyonu.
Kılavuz: Animated bileşenleriuseReorder
useReorder(items, onChange, { key?, axis?, tempo? }?)Denetimli bir listenin tek eksende işaretçi ve klavyeyle yeniden sıralanması.
Kılavuz: Animated bileşenleriGirdi ve bağlantılar
input
input(targetRef, adapter, onEvent?)Bir öğeye girdi adaptörünü sahip olunan bir denetleyici olarak bağlar.
Kılavuz: Girdi ve hareketlerfollow
follow(target, source, { stiffness?, damping?, mass? }?)Bir değerin yayla başka bir değeri izlemesini sağlar.
Kılavuz: Girdi ve hareketlerconnect
connect(node, (value) => write(value));Bir düğümün her değişikliğini bir fonksiyona gönderir.
Kılavuz: Girdi ve hareketlerevent
Animated.event([{ nativeEvent: { contentOffset: { y } } }]);İç içe olay verisini değerlere eşler; React Native'deki gibi.
Kılavuz: Girdi ve hareketlerdragInput
dragInput({ x?, y?, axis?, bounds?, elastic?, momentum?, settle? })Sınırlar, esnek kenarlar, momentum ve settle ile işaretçi ve klavye sürüklemesi.
Kılavuz: Girdi ve hareketlerpinchInput
pinchInput({ scale?, rotation?, minScale?, maxScale? })İki işaretçili bir hareketten ölçek ve dönüş.
Kılavuz: Girdi ve hareketlermoveInput
moveInput({ x?, y?, relative?, reset? })İşaretçi koordinatları; isteğe bağlı olarak öğenin merkezine göre.
Kılavuz: Girdi ve hareketlerscrollInput
scrollInput({ x?, y?, progressX?, progressY?, target?, through? })Bir öğenin, sayfanın ya da görünüm alanından geçen bir öğenin kaydırma konumu ve ilerlemesi.
Kılavuz: Girdi ve hareketlerwheelInput
wheelInput({ x?, y? })Tekerlek değişimleri.
Kılavuz: Girdi ve hareketlerviewportInput
viewportInput({ root?, margin?, amount?, once? })Öğenin görünüm alanında olup olmadığı.
Kılavuz: Girdi ve hareketlermediaInput
mediaInput('(min-width: 768px)');Bir media query'nin eşleşip eşleşmediği.
Kılavuz: Girdi ve hareketlerlongPressInput
longPressInput({ delay?, threshold? })Bir gecikmeden sonra ve bir hareket eşiği içinde basılı tutulan işaretçi.
Kılavuz: Girdi ve hareketlerswipeInput
swipeInput({ direction?: 'left' | 'right' | 'up' | 'down' | 'any' })Kaydırma yönü, mesafesi ve hızı.
Kılavuz: Girdi ve hareketlerÇıktı ve tanılama
bind
bind(element, style) → { update, inspect, dispose }Animated stillerini React dışında bir öğeye bağlar; update, inspect ve dispose döndürür.
inspect
inspect(element) → [{ property, driver, reason }]Bir öğenin her animasyonlu özelliğinin oynatma yolu ve yedek yol nedeni.
Kılavuz: Performans ve oynatmaoutput
output(targetRef, { style?, attributes?, properties?, text? })useAnimated içinde bir stil, öznitelik, metin ya da özellik çıktısının sahibi olur.
bindOutput
bindOutput(target, mapping) → { flush, dispose }Bir çıktı eşlemesini hemen bağlar; flush ve dispose döndürür.