Sekitar 5 menit · React 16.8+ · React DOM

Memulai

Dari instalasi hingga gestur serta gerak masuk dan keluar dalam enam langkah. Setiap langkah adalah komponen kecil yang berjalan.

1
Instal
Animated tidak punya dependensi runtime. React 16.8+ adalah peer dependency.
Titik masuk paket ditandai dengan 'use client'. Di Next.js App Router, layout server dapat merender AnimatedProvider; gunakan hook dan Animated.<tag> di dalam Client Components.
$
```
npm install @kkwaenggwari/animated
```
Impor @kkwaenggwari/animated dikenali di editor Anda.
Gerakkan nilai pertama
useAnimatedValue(1) memiliki angka hidup selama komponen ada. Taruh langsung di style: ia menjadi variabel CSS, jadi React tidak merender saat nilainya berubah.
timing(value, { toValue, duration }).start() menggerakkannya. Menekan lagi di tengah jalan dimulai dari opasitas saat ini.
Menyiapkan contoh…
Bingkai memudar lalu kembali, dan tekanan kedua di tengah jalan membalik arah dari posisinya.
Turunkan banyak keluaran dari satu nilai
interpolate memetakan nilai ke panjang, sudut, atau angka. Tanpa easing, ia menjadi calc() yang tepat dari variabel yang sama, jadi lima lajur sama mahalnya dengan satu.
Rentang input berbeda dari nilai yang sama membuat kaskade tanpa lima animasi terpisah.
Menyiapkan contoh…
Satu tekan menggerakkan lima lajur secara berkaskade; mengubah sebaran hanya mengubah rentangnya.
Gambarkan tujuannya
Animated.button merender tombol biasa. seed adalah frame pertama, pose tempat ia seharusnya berada sekarang, dan tempo cara ia sampai ke sana.
Saat pose berubah di tengah jalan, elemen berbelok dari posisinya di layar dan, dengan pegas, mempertahankan kecepatannya.
Menyiapkan contoh…
Mengklik tab dengan cepat tidak pernah membuat satu pun melompat.
Sambungkan input
input(ref, moveInput(...)) menulis koordinat pointer ke dalam nilai. follow(target, source) membuat satu nilai mengikuti nilai lain dengan pegas.
Semua yang dideklarasikan di factory useAnimated dimiliki komponen: listener dan pegas berhenti saat unmount atau saat dependensi berubah.
Menyiapkan contoh…
Kartu miring ke arah pointer dan tenang kembali saat pointer pergi.
Animasikan kepergian
Menghapus child React biasanya langsung menghilangkannya. Animated.Keep mempertahankan children yang ber-key sampai pose depart mereka selesai.
wait merender children baru hanya setelah semua kepergian selesai.
Menyiapkan contoh…
Pesan yang dibuang pergi dengan gerak yang dipilih sebelum menghilang.

Anda sudah punya model lengkapnya

Nilai, tujuan, input, dan kepergian berbagi pengendali, aturan interupsi, dan pembersihan yang sama. Panduan membahas masing-masing secara mendalam.

Instal

Gerakkan nilai pertama

Turunkan banyak keluaran dari satu nilai

Gambarkan tujuannya

Sambungkan input

Animasikan kepergian

Anda sudah punya model lengkapnya