useTrail dan useChain untuk Urutan

useTrail(count, config) membuat count pegas yang beranimasi secara berurutan dengan jeda yang dapat dikonfigurasi di antara setiap pegas. Saat rangkaian dimulai, elemen pertama langsung beranimasi, elemen kedua mulai sesaat kemudian, elemen ketiga menyusul, dan seterusnya—menciptakan efek menyebar atau beruntun.

useTrail mengembalikan larik objek pegas, satu untuk setiap elemen dalam rangkaian. Setiap pegas memiliki struktur yang sama (kunci yang sama), tetapi memulai animasinya pada pergeseran waktu yang berbeda. Anda memetakan larik rangkaian dan larik elemen secara bersamaan untuk merender setiap elemen beranimasi dengan pegas yang sesuai.

Tampilkan daftar berurutan dengan memetakan larik rangkaian: trail.map((spring, i) => React.createElement(animated.div, { style: spring, key: items[i].id }, items[i].content)). Setiap animated.div menerima objek pegasnya sendiri, sehingga elemen-elemen beranimasi secara berurutan. Pegas berjalan sesuai urutan indeks: 0, 1, 2, 3...

useTrail mendukung pola pengalih untuk animasi maju dan mundur. Berikan status benar/salah open untuk mengendalikan arah: ketika open bernilai true, rangkaian beranimasi dari tersembunyi menjadi terlihat; ketika bernilai false, rangkaian berbalik dari terlihat menjadi tersembunyi. Rangkaian secara otomatis membalik urutannya—elemen-elemen beranimasi keluar dalam urutan terbalik (yang terakhir masuk, pertama keluar).

Objek konfigurasi untuk useTrail sama dengan useSpring: tegangan, gesekan, dan massa. Jeda antar elemen ditentukan oleh waktu yang diperlukan setiap pegas untuk mulai, yang dikendalikan oleh fisika pegas secara keseluruhan. Pegas yang lebih kaku dengan tegangan lebih tinggi menghasilkan pengaturan jeda bertahap yang lebih cepat; pegas yang lebih lembut menghasilkan rangkaian yang lebih panjang.

useSpringRef() membuat referensi yang Anda pasang ke pengait pegas melalui opsi ref-nya. Referensi tersebut memberi useChain kendali atas waktu mulai pegas. Anda membuat satu referensi untuk setiap pegas atau rangkaian yang ingin Anda urutkan: const springRef = useSpringRef(), lalu meneruskannya: useSpring({ ref: springRef, ... }).

useChain([ref1, ref2, ref3], [0, 0.5, 0.8]) mengurutkan beberapa pegas atau rangkaian. Argumen pertama adalah larik springRefs dalam urutan pemutaran yang diinginkan. Argumen kedua adalah larik tanda waktu antara 0 dan 1, yang menunjukkan kapan setiap pegas dimulai sebagai pecahan dari keseluruhan rentang waktu.

Dalam useChain, tanda waktu seperti [0, 0.5] berarti pegas 1 dimulai pada 0% urutan dan pegas 2 dimulai pada 50% urutan. Argumen ketiga yang bersifat opsional adalah keseluruhan rentang waktu dalam milidetik (bawaan 1000 ms). Jadi, dengan [0, 0.5] dan 2000 ms, pegas 1 dimulai pada 0 ms dan pegas 2 dimulai pada 1000 ms.

Pola yang umum: menganimasikan wadah yang meluas (useSpring untuk ukuran), lalu menganimasikan elemen di dalamnya agar memudar masuk (useTrail untuk daftar). Pasang referensi pada keduanya, lalu gunakan useChain([sizeRef, trailRef], [0, 0.5]) agar wadah meluas terlebih dahulu, kemudian elemen memudar masuk di pertengahan durasi. Ini menciptakan animasi masuk dua tahap yang sinematik.

useChain sangat ideal untuk transisi halaman. Saat berpindah antarhalaman, rangkai animasi keluar halaman lama dengan animasi masuk halaman baru. Animasi keluar selesai terlebih dahulu (tanda waktu 0), lalu animasi masuk dimulai (tanda waktu 0,6). Hasilnya adalah perpindahan yang mulus, bukan pergantian yang mendadak.

useTrail dapat membuat efek gulir paralaks dengan menganimasikan elemen pada kecepatan berbeda berdasarkan posisinya dalam rangkaian. Elemen yang lebih jauh dalam rangkaian mulai lebih lambat dan mungkin memiliki konfigurasi berbeda (tegangan lebih rendah), sehingga pergerakannya lebih lambat. Pengaturan waktu berbasis kedalaman ini menyimulasikan efek paralaks objek pada jarak yang berbeda.

Bagaimana useTrail menciptakan jeda bertahap antar elemen dalam animasi?

useTrail(count, config) membuat sejumlah pegas yang beranimasi secara berurutan, sehingga menciptakan tampilan daftar secara bertahap. Petakan rangkaian dan elemen secara bersamaan untuk menampilkannya. useSpringRef() membuat referensi yang digunakan useChain untuk mengurutkan animasi. useChain([ref1, ref2], [0, 0.5]) mengorkestrasi beberapa pegas dengan tanda waktu pecahan. Bersama-sama, keduanya memungkinkan urutan kompleks dalam beberapa tahap, seperti animasi perluas-lalu-tampilkan.