Value
new Value(initial: number)Angka yang dapat diubah dengan setValue, setOffset, flattenOffset, extractOffset, stopAnimation, dan resetAnimation.
Referensi API
Setiap ekspor @kkwaenggwari/animated, dengan signature dan panduan yang menjelaskannya.
Nilai dan graf
ValueXY
new ValueXY({ x?, y? })Pasangan nilai x dan y dengan operasi yang sama, ditambah getLayout dan getTranslateTransform.
createValue
createValue(initial: number | Record<string, number>)Buat angka atau record angka bernama di luar React. Pembuatan tidak menjalankan apa pun.
Panduan: Nilai dan gayaAnimatedNode
node.getValue() · node.interpolate(config) · node.addListener(fn)Dasar hanya-baca dari setiap nilai dan graf: getValue, interpolate, dan listener.
AnimatedInterpolation
node.interpolate({ inputRange, outputRange, easing?, extrapolate? })Pemetaan hidup dari rentang input ke rentang keluaran, dengan easing dan ekstrapolasi extend, clamp, atau identity.
AnimatedComputed
new AnimatedComputed(inputs, (...values) => result);Perhitungan murni hanya-baca atas satu input atau lebih. Keluaran yang memakainya berjalan di JavaScript.
Panduan: Nilai dan gayainterpolateFn
interpolateFn({ value, inputRange, outputRange });Hitung interpolasi sekali untuk angka biasa.
Panduan: Nilai dan gayaadd
add(...inputs);Jumlah dari angka dan nilai.
Panduan: Nilai dan gayasubtract
subtract(a, b);Selisih dua input.
Panduan: Nilai dan gayamultiply
multiply(...inputs);Hasil kali angka dan nilai.
Panduan: Nilai dan gayadivide
divide(a, b);Hasil bagi dua input.
Panduan: Nilai dan gayamodulo
modulo(a, b);Nilai yang berputar kembali, misalnya untuk rotasi tanpa akhir.
Panduan: Nilai dan gayadiffClamp
diffClamp(input, min, max);Mengikuti perubahan input tetapi tetap dalam rentang; berguna untuk header yang tersembunyi saat menggulir.
Panduan: Nilai dan gayaHook React
useAnimatedValue
useAnimatedValue(initial, { scope?, id? }?)Miliki angka atau record angka selama masa hidup komponen. Di style, ia adalah variabel CSS.
useAnimated
useAnimated(initial, value => { … }, deps?, { autoStart?, onComplete?, scope? }?)Miliki nilai beserta setiap pengendali, input, dan keluaran yang dideklarasikan di factory-nya. Memulai, memulai ulang saat dependensi berubah, dan membersihkan.
Panduan: Nilai dan gayauseAnimatedValueXY
useAnimatedValueXY({ x?, y? }?, options?)Miliki nilai dua dimensi yang lengkap.
Panduan: Nilai dan gayauseAnimatedCSS
useAnimatedCSS(node, { scope?, id? }?): stringBeri node turunan yang bukan ekspresi calc() variabel CSS sendiri, dengan masa hidup komponen.
useAnimatedListener
useAnimatedListener(node, ({ value }) => void)Panggil fungsi pada setiap perubahan node atau ValueXY; dilepas saat unmount.
useAnimatedPresence
useAnimatedPresence(visible, { enter, exit, onExitComplete? })Kembalikan { mounted, animatedValue } untuk masuk dan keluar berbasis hook.
AnimatedProvider
<AnimatedProvider scope={ref}>…</AnimatedProvider>;Tetapkan scope variabel CSS bawaan untuk nilai hook di bawahnya.
Panduan: Nilai dan gayaflushAnimatedUpdates
flushAnimatedUpdates();Terapkan keluaran tertunda secara sinkron, untuk test deterministik.
Panduan: Nilai dan gayaDriver, komposisi, dan timeline
timing
timing(value, { toValue, duration?, delay?, easing? })Gerakkan nilai sepanjang kurva easing selama durasi tetap.
Panduan: Timing, pegas, dan komposisispring
spring(value, { toValue, stiffness?, damping?, mass?, velocity? })Gerakkan nilai dengan fisika pegas, mempertahankan kecepatan gerak yang diinterupsi.
Panduan: Timing, pegas, dan komposisidecay
decay(value, { velocity, deceleration? })Mulai dengan kecepatan lalu melambat.
Panduan: Timing, pegas, dan komposisidelay
delay(ms);Pengendali yang hanya menunggu.
Panduan: Timing, pegas, dan komposisisequence
sequence([a, b, c]);Jalankan pengendali satu per satu.
Panduan: Timing, pegas, dan komposisiparallel
parallel([a, b], { stopTogether? }?)Jalankan pengendali bersamaan.
Panduan: Timing, pegas, dan komposisistagger
stagger(ms, [a, b, c]);Mulai pengendali satu per satu dengan interval tetap.
Panduan: Timing, pegas, dan komposisiloop
loop(animation, { iterations?, resetBeforeIteration? }?)Ulangi pengendali beberapa kali atau tanpa henti.
Panduan: Timing, pegas, dan komposisikeyframes
keyframes(value, [0, 1, 0.5], { duration?, times?, repeat? }?)Bawa nilai melewati beberapa angka, dengan waktu dan pengulangan opsional.
Panduan: Timing, pegas, dan komposisiEasing
Easing.inOut(Easing.cubic) · Easing.bezier(x1, y1, x2, y2)Kurva yang sesuai dengan React Native: linear, quad, cubic, sin, circle, exp, elastic, back, bounce, bezier, dan helper in/out.
Panduan: Timing, pegas, dan komposisicreateTimeline
createTimeline({ track: [a, b] }, { duration?, repeat? }?)Jam yang bisa di-seek dengan trek bernama, di luar React.
Panduan: Timing, pegas, dan komposisiuseTimeline
useTimeline(tracks, { duration?, repeat?, autoStart? }?, deps?)Timeline milik komponen yang treknya bekerja langsung di gaya biasa.
Panduan: Timing, pegas, dan komposisiKomponen dan tata letak
Animated
<Animated.div seed pose tempo respond depart move />;Namespace host HTML dan SVG seperti Animated.div, ditambah fungsi inti dengan nama React Native.
Animated.wrap
Animated.wrap(Component) · Animated.createAnimatedComponent(Component)Buat komponen yang meneruskan ref menerima props host Animated.
Panduan: Komponen AnimatedAnimated.Scope
<Animated.Scope pose? tempo? animation?>…</Animated.Scope>Bagikan nama pose, tempo, dan nilai bawaan animasi ke elemen Animated di dalamnya.
Panduan: Komponen AnimatedAnimated.Keep
<Animated.Keep seed? wait? onDeparted?>…</Animated.Keep>Pertahankan children ber-key tetap terpasang sampai kepergiannya selesai.
Panduan: Komponen AnimatedAnimated.Scene
<Animated.Scene tempo?>…</Animated.Scene>Animasikan perubahan tata letak elemen move dan hubungkan elemen dengan identitas yang sama.
createLayoutScene
createLayoutScene(options?) → { attach, capture, commit, dispose }Koordinasi capture dan commit tata letak yang sama untuk renderer lain.
Panduan: Komponen AnimateduseReorder
useReorder(items, onChange, { key?, axis?, tempo? }?)Pengurutan daftar terkendali di satu sumbu dengan pointer dan keyboard.
Panduan: Komponen AnimatedInput dan sambungan
input
input(targetRef, adapter, onEvent?)Pasang adaptor input pada elemen sebagai pengendali yang dimiliki.
Panduan: Input dan gesturfollow
follow(target, source, { stiffness?, damping?, mass? }?)Buat satu nilai mengikuti nilai lain dengan pegas.
Panduan: Input dan gesturconnect
connect(node, (value) => write(value));Kirim setiap perubahan node ke sebuah fungsi.
Panduan: Input dan gesturevent
Animated.event([{ nativeEvent: { contentOffset: { y } } }]);Petakan data event bersarang ke nilai, seperti di React Native.
Panduan: Input dan gesturdragInput
dragInput({ x?, y?, axis?, bounds?, elastic?, momentum?, settle? })Seret dengan pointer dan keyboard dengan batas, tepi elastis, momentum, dan settle.
Panduan: Input dan gesturpinchInput
pinchInput({ scale?, rotation?, minScale?, maxScale? })Skala dan rotasi dari gestur dua pointer.
Panduan: Input dan gesturmoveInput
moveInput({ x?, y?, relative?, reset? })Koordinat pointer, opsional relatif terhadap pusat elemen.
Panduan: Input dan gesturscrollInput
scrollInput({ x?, y?, progressX?, progressY?, target?, through? })Posisi dan progres gulir sebuah elemen, halaman, atau elemen yang melintasi viewport.
Panduan: Input dan gesturwheelInput
wheelInput({ x?, y? })Delta roda.
Panduan: Input dan gesturviewportInput
viewportInput({ root?, margin?, amount?, once? })Apakah elemen berada di viewport.
Panduan: Input dan gesturmediaInput
mediaInput('(min-width: 768px)');Apakah media query cocok.
Panduan: Input dan gesturlongPressInput
longPressInput({ delay?, threshold? })Pointer yang ditahan setelah jeda dan dalam ambang gerakan.
Panduan: Input dan gesturswipeInput
swipeInput({ direction?: 'left' | 'right' | 'up' | 'down' | 'any' })Arah, jarak, dan kecepatan geser.
Panduan: Input dan gesturKeluaran dan diagnostik
bind
bind(element, style) → { update, inspect, dispose }Ikat gaya Animated ke elemen di luar React; mengembalikan update, inspect, dan dispose.
inspect
inspect(element) → [{ property, driver, reason }]Jalur pemutaran dan alasan fallback setiap properti beranimasi pada sebuah elemen.
Panduan: Performa dan pemutaranoutput
output(targetRef, { style?, attributes?, properties?, text? })Miliki keluaran gaya, atribut, teks, atau properti di dalam useAnimated.
bindOutput
bindOutput(target, mapping) → { flush, dispose }Pasang pemetaan keluaran seketika; mengembalikan flush dan dispose.