Canlandırılmış Bileşenler ve Stil Enterpolasyonu

react-spring, tüm HTML öğelerinin animasyonlu sürümlerini sağlar: animated.div, animated.span, animated.img, animated.button ve benzerleri. Bunlar, yerel karşılıklarının doğrudan yerine geçer; aralarındaki önemli fark, stil özellikleri olarak SpringValue nesnelerini kabul edebilmeleridir.

Normal React öğeleri stili, sabit değerler içeren düz bir nesne olarak alır. SpringValues, React'in yeniden oluşturma döngüsünden geçmeden her animasyon karesinde güncellenen özel nesnelerdir. Yalnızca animated.* bileşenleri SpringValue güncellemelerine nasıl abone olunacağını ve en yüksek performans için React'i tamamen devre dışı bırakarak DOM stilinin doğrudan nasıl değiştirileceğini bilir.

Yay değerlerini animated bileşenlerinde doğrudan CSS stil özellikleri olarak uygulayın. Örneğin: style={{ opacity: opacity, transform: transform }}; burada opacity ve transform, useSpring tarafından döndürülen SpringValue değerleridir. animated.div, her RAF (requestAnimationFrame) adımında bu değerleri okur ve DOM düğümüne uygular.

SpringValue değerlerinin çıktılarını dönüştürmek için bir .to() yöntemi vardır. Yaygın bir kullanım, sayısal bir yay değerini CSS dizesine dönüştürmektir: x.to(v => "translateX(" + v + "px)"). İşlev geçerli sayısal değeri alır ve stil olarak uygulanan dönüştürülmüş çıktıyı döndürür.

.to() yöntemi, aralık eşleme için dizi girdilerini de kabul eder: x.to([0, 1], ["#ff0000", "#00ff00"]), yay değerini [0, 1] aralığından kırmızıdan yeşile uzanan renk aralığına eşler. Sayısal yayları renklere, dizelere veya düz bir sayıyla temsil edilemeyen herhangi bir değere aradeğerlemenin yolu budur.

Bir yay aynı anda birden çok değeri izlediğinde bunları birlikte aradeğerleyebilirsiniz. { x, y } değerlerini izleyen bir yay için şunu yazabilirsiniz: x.to((xVal, yVal) => "translate(" + xVal + "px," + yVal + "px)"). .to() geri çağrımı, yay yapılandırmasında göründükleri sırayla tüm değerleri alır.

Kendi bileşenlerinizi animated() ile sarmalayabilirsiniz: const AnimatedCard = animated(Card). Sarmalanan bileşen bir style özelliğini kabul etmeli ve bunu bir DOM öğesine iletmelidir. Böylece AnimatedCard, tıpkı animated.div gibi stil özelliğinde SpringValue değerlerini alabilir.

Karmaşık animasyonlar çoğu zaman birden çok yayı birleştirir. Örneğin bir giriş animasyonu, opaklık için bir yay ve dikey konum için başka bir yay kullanabilir. İkisini de aynı animated.div üzerinde uygulayabilirsiniz: style={{ opacity: opacitySpring.opacity, transform: positionSpring.y.to(y => "translateY(" + y + "px)") }}.

react-spring'in en önemli performans özelliği, animasyonlu değer güncellemelerinin React uzlaştırıcısını atlamasıdır. Bir yay animasyon uygularken React, her karede bileşeni yeniden oluşturmaz. Bunun yerine animated.* bileşeni, her requestAnimationFrame geri çağrımında DOM düğümünün stil özelliğini doğrudan günceller ve React ek yükü olmadan 60 fps animasyonları mümkün kılar.

Aradeğerlemeyle kullanılan yaygın animasyon örüntüleri: opacity.to([0, 1], [0, 1]) ile bileşen bağlandığında belirme, scale.to(s => "scale(" + s + ")") ile üzerine gelindiğinde büyüme ve rotation.to(r => "rotate(" + r + "deg)") ile geçiş yapıldığında dönme. Bu dönüşümleri zincirlemek bileşik etkiler oluşturur.

Varsayılan olarak, aralık dizileriyle kullanılan .to() tanımlı aralığın dışına taşabilir. Bunu extrapolate seçeneğiyle denetleyebilirsiniz: x.to({ range: [0, 1], output: [0, 100], extrapolate: "clamp" }), yay hedef değeri aşsa bile çıktının 0'ın altına veya 100'ün üstüne çıkmasını önler. Bu, ilerleme çubukları ve sınırlandırılmış animasyonlar için kullanışlıdır.

Yay değerlerini uygularken neden düz bir div yerine animated.div kullanmanız gerekir?

animated.div, animated.span ve animated(CustomComponent), stil özelliklerinde SpringValue değerlerini kabul eden doğrudan kullanılabilir karşılıklardır. .to() yöntemi yay değerlerini aradeğerler: CSS dizelerine, renk aralıklarına veya herhangi bir çıktı biçimine dönüştürebilir. Birden çok yay tek bir öğede doğal biçimde birleştirilir. Temel performans kazanımı şudur: yay güncellemeleri, RAF geri çağrımlarında DOM stillerini doğrudan değiştirerek React'in yeniden oluşturma işlemlerini atlar.