Diziler için useTrail ve useChain

useTrail(count, config), her biri arasında yapılandırılabilir bir gecikmeyle sırayla animasyon uygulanan count adet yay oluşturur. İz başladığında ilk öğeye hemen animasyon uygulanır, ikincisi biraz sonra, üçüncüsü ondan sonra başlar ve böyle devam eder; bu da dışa açılma veya çağlayan etkisi oluşturur.

useTrail, izdeki her öğe için bir tane olmak üzere bir yay nesneleri dizisi döndürür. Her yay aynı yapıya, yani aynı anahtarlara sahiptir; ancak animasyonunu farklı bir zaman kaymasıyla başlatır. Her animasyonlu öğeyi kendisine karşılık gelen yayla oluşturmak için hem iz dizisi hem de öğe dizisi üzerinde aynı anda eşleme yaparsınız.

İz uygulanmış bir listeyi, iz dizisi üzerinde eşleme yaparak oluşturun: trail.map((spring, i) => React.createElement(animated.div, { style: spring, key: items[i].id }, items[i].content)). Her animated.div kendi yay nesnesini alır, bu nedenle öğelere sırayla animasyon uygulanır. Yaylar dizin sırasına göre çalışır: 0, 1, 2, 3...

useTrail, ileri ve geri animasyon için bir geçiş örüntüsünü destekler. Yönü denetlemek üzere bir boole open durumu geçirin: open doğru olduğunda iz gizliden görünüre doğru animasyon uygular; yanlış olduğunda görünürden gizliye doğru tersine döner. İz sıralamayı otomatik olarak tersine çevirir; öğelere son giren ilk çıkar sırasıyla animasyon uygulanır.

useTrail için yapılandırma nesnesi useSpring ile aynıdır: gerilim, sürtünme ve kütle. Öğeler arasındaki gecikme, her yayın başlamak için ne kadar süreye ihtiyaç duyduğuna bağlıdır; bunu genel yay fiziği belirler. Daha yüksek gerilime sahip daha sert yaylar daha hızlı kademelenme, daha yumuşak yaylar ise daha uzun çağlayanlar oluşturur.

useSpringRef(), bir yay kancasına ref seçeneği aracılığıyla bağlayabileceğiniz bir başvuru oluşturur. Bu başvuru, useChain'e yayın ne zaman başlayacağını denetleme olanağı verir. Sıralamak istediğiniz her yay veya iz için bir başvuru oluşturursunuz: const springRef = useSpringRef(); ardından bunu şu şekilde geçirirsiniz: useSpring({ ref: springRef, ... }).

useChain([ref1, ref2, ref3], [0, 0.5, 0.8]), birden çok yayı veya izi sıraya koyar. İlk bağımsız değişken, oynatılmaları gereken sıradaki springRefs dizisidir. İkinci bağımsız değişken, her yayın toplam zaman aralığının hangi bölümünde başlayacağını belirten, 0 ile 1 arasındaki zaman damgaları dizisidir.

useChain içinde [0, 0.5] gibi zaman damgaları, 1. yayın dizinin %0'ında, 2. yayın ise %50'sinde başladığı anlamına gelir. İsteğe bağlı üçüncü bağımsız değişken, milisaniye cinsinden toplam zaman aralığıdır (varsayılan değer 1000ms). Bu nedenle [0, 0.5] ve 2000ms kullanıldığında 1. yay 0ms'de, 2. yay 1000ms'de başlar.

Yaygın bir örüntü şudur: bir kapsayıcının genişlemesine animasyon uygulayın (boyut için useSpring), ardından içindeki öğelerin belirerek görünmesine animasyon uygulayın (liste için useTrail). Her ikisine de başvurular bağlayın, sonra useChain([sizeRef, trailRef], [0, 0.5]) kullanın; böylece kapsayıcı önce genişler, ardından öğeler zaman aralığının ortasında belirir. Bu, sinematik iki aşamalı bir giriş animasyonu oluşturur.

useChain, sayfa geçişleri için idealdir. Sayfalar arasında gezinirken eski sayfanın çıkış animasyonunu yeni sayfanın giriş animasyonuyla zincirleyin. Önce çıkış tamamlanır (zaman damgası 0), ardından giriş başlar (zaman damgası 0.6). Bu, ani bir geçiş yerine yumuşak bir devretme oluşturur.

useTrail, izdeki konumlarına bağlı olarak öğelere farklı hızlarda animasyon uygulayarak paralaks kaydırma efektleri oluşturabilir. İzde daha geride olan öğeler daha geç başlar ve farklı bir yapılandırmaya (daha düşük gerilim) sahip olabilir; bu da daha yavaş hareket etmelerine neden olur. Derinliğe dayalı bu zamanlama, farklı uzaklıklardaki nesnelerin paralaks etkisini taklit eder.

useTrail(count, config), sırayla animasyon uygulanan count adet yay oluşturur ve listelerin kademeli biçimde görünmesini sağlar. Oluşturma işlemi için iz ve öğeler üzerinde aynı anda eşleme yapın. useSpringRef(), useChain'in sıralama için kullandığı başvurular oluşturur. useChain([ref1, ref2], [0, 0.5]), kesirli zaman damgalarıyla birden çok yayı düzenler. Birlikte, genişletip sonra görünür kılma gibi karmaşık çok aşamalı dizileri mümkün kılarlar.