React Spring Temelleri: useSpring Kancası

Geleneksel CSS animasyonları sabit bir süre kullanır: animasyon X milisaniye boyunca oynar ve durur. react-spring ise değerleri yay fiziği kullanarak canlandırır; animasyon gerilim (yayın sertliği) ve sürtünme (yayın harekete ne kadar direndiği) tarafından yönlendirilir. Bu, doğal biçimde yavaşlayan ve organik hissettiren bir hareket üretir.

useSpring({ from, to }) kancası, canlandırılmış bir değer tanımlar. Başlangıç değerlerini from, hedef değerlerini ise to içinde belirtirsiniz. useSpring, her anahtarın bir SpringValue olduğu bir yaylar nesnesi döndürür; bu, ilgili sayısal veya renk değerinin canlandırılmış sürümüdür.

config seçeneği yay davranışını kontrol eder. gerilim (varsayılan 170) sertliği kontrol eder; daha yüksek değerler daha hızlı yerine oturur. sürtünme (varsayılan 26) sönümlemeyi kontrol eder; daha düşük değerler daha fazla zıplama oluşturur. kütle (varsayılan 1) eylemsizlik ekler. Bu üç değer birlikte animasyonun karakterini belirler.

react-spring, ayarlama gerektirmeden kullanabileceğiniz önceden ayarlanmış yapılandırmalarla birlikte gelir: config.default dengeli ve genel amaçlıdır, config.gentle yavaş ve akıcıdır, config.wobbly düşük sürtünmeyle zıplar, config.stiff hızlı ve çabuk tepki verir, config.slow ise çok kademelidir. Bunları react-spring'den içe aktarın.

useSpring tarafından döndürülen değerler normal sayılar değil, SpringValue nesneleridir. Bunları doğrudan JSX içinde oluşturamaz veya normal stil nesnelerinde kullanamazsınız. Spring güncellemelerine abone olmayı ve bunları DOM'a verimli biçimde uygulamayı bilen animated.* bileşenlerine uygulanmaları gerekir.

immediate: true değerinin hedef değerine anında sıçramasını sağlar ve yay animasyonunu devre dışı bırakır. Bu, ilk oluşturma sırasında, kullanıcı OS ayarlarında "hareketi azalt" seçeneğini etkinleştirdiğinde veya konumu görsel bir hareket olmadan programatik olarak sıfırlamanız gerektiğinde kullanışlıdır.

Bir yay animasyonunu, hangi değerlerin from ve to içinde bulunduğunu değiştirerek tersine çevirebilirsiniz. Yaygın bir yaklaşım, bir boole geçiş durumu depolayıp from/to değerlerini buna göre hesaplamaktır: geçiş durumu yanlış olduğunda 0'dan 1'e, doğru olduğunda 1'den 0'a animasyon uygulanır. react-spring durumlar arasında yumuşak bir geçiş sağlar.

useSpring iki öğeli bir dizi döndürebilir: const [springs, api] = useSpring(() => ({ from: { x: 0 } })). api nesnesi programatik denetim sağlar. Yeni bir değere animasyon uygulamak için api.start({ x: 100 }), animasyonu dondurmak için api.stop(), animasyon olmadan doğrudan yeni değere geçmek için api.set({ x: 50 }) çağrısını yapın.

Animasyon normal biçimde değişen React durumuna bağlı olduğunda bildirimsel biçim olan useSpring({ from, to }) kullanımını tercih edin. React'in yeniden oluşturma işlemlerine neden olmadan olay işleyicilerinden, hareketlerden veya eşzamansız işlemlerden animasyonları tetiklemeniz gerektiğinde api.start() ile buyruklu biçimi kullanın.

useSpring, yapılandırmasında yaşam döngüsü geri çağrımlarını kabul eder. onStart, yay animasyona başladığında çalışır. onChange, her karede geçerli değerle birlikte çalışır; bu, konumu izleyen yan etkiler için kullanışlıdır. onRest, yay son değerine ulaştığında çalışır ve animasyonun tamamlandığını bildirir.

Bildirimsel biçimde useSpring, kendisine geçirilen değerler değiştiğinde animasyonu otomatik olarak yeniden çalıştırır. Örneğin useSpring({ opacity: isVisible ? 1 : 0 }), isVisible her değiştiğinde opaklığa animasyon uygular. Bu, yay animasyonlarını bileşen durumuna bağlamanın en basit yoludur.

react-spring yapılandırmasında gerilim ve sürtünme neyi denetler?

react-spring, fizik kurallarıyla animasyon oluşturur: gerilim (sertlik), sürtünme (sönümleme) ve kütle hareketi belirler. useSpring({ from, to }), animated.* bileşenlerine uygulanan SpringValue nesnelerini döndürür. Önceden tanımlı yapılandırmalar (gentle, wobbly, stiff, slow) yaygın durumları kapsar. Buyruklu API [springs, api], api.start(), api.stop() ve api.set() aracılığıyla programatik denetim sağlar. onRest, animasyon son değerine ulaştığında çalışır.