React Native'de Dinamik Animasyonlar için Animated.spring() Yöntemini Kullanma

Bu React kitaplığı ve bu kullanışlı ipuçlarıyla zıplayan animasyonda ustalaşın.

React Native'in Animasyonlu API kitaplığı, çok az çabayla dinamik, akıcı animasyonlar oluşturmanıza yardımcı olabilir.

Yay benzeri efektli animasyonlar oluşturmayı öğrenin, ardından sürelerini ve hızlarını nasıl kontrol edeceğinizi öğrenin ve bunları gerçek dünya senaryolarına uygulayın.

Dinamik Animasyonlar Nedir?

Dinamik animasyonlar, hareketli nesnelerin hareketlerinin önceden programlanmadığı animasyonlardır. Bunları, kullanıcı etkileşimi veya ortamdaki değişikliklere yanıt olarak başlatabilirsiniz. Teknik en popüler olanıdır. video oyunu animasyonu, sosyal medya uygulamaları veya diğer etkileşimli medya biçimleri.

Dinamik animasyonlar, birkaç faktöre bağlı olarak değişebilen öngörülemeyen ve duyarlı hareketlere izin verdiği için kullanıcılar için daha sürükleyici ve ilgi çekici bir deneyim sağlayabilir.

Mobil uygulamalardaki animasyonlar yıllar geçtikçe daha karmaşık hale geldi. React Native'in varsayılan Animasyonlu API'si, bu karmaşıklıkları barındıracak şekilde gelişmiştir. bu

instagram viewer

Animated.spring() API'nin sağladığı yöntem, dinamik bir etki yaratarak React Native nesnelerini canlandırabilir.

Animasyonu Kontrol Etme

kullanırken Animated.spring() yöntemi, istediğiniz gibi davranmasını sağlamak için animasyon üzerinde kontrole sahip olmanız gerekir. Animated, React Native animasyonlarınızı manuel olarak kontrol etmek ve değiştirmek için bir dizi yöntem sağlar.

Bu yöntemlerden biri de durmak(), bu da animasyonun geçerli değerinde durmasına neden olur. Bu yöntem, bir animasyonu iptal etmeniz veya ilk durumuna sıfırlamanız gerektiğinde kullanışlıdır.

Örneğin:

sabit animasyonu durdur = () => {
 pozisyon.durdur(değer => {
 pozisyon.setValue(0);
 });
};

nasıl kullanabileceğinizi not edin. setValue() konum değerini başlangıç durumuna sıfırlama yöntemi 0.

Kullanabileceğiniz başka bir yöntem de Sıfırla(), animasyonu ilk durumuna döndürür. Bu yöntem, bir animasyonu yeniden başlatmanız gerektiğinde kullanışlıdır.

Gerçek Dünya Uygulamaları

pratik kullanımını keşfedebilirsiniz. Animated.spring() basit bir animasyon oluşturarak yöntem. Yuvarlak bir top, bir kullanıcı onunla etkileşime geçtiğinde bir yüzeye düşecek ve ardından hemen havaya geri dönecektir. Halihazırda birlikte çalışabileceğiniz bir tepki Native projeniz olmalıdır.

İlk olarak, topun konumunu izlemek için bir durum değişkeni oluşturun:

içe aktarmak Tepki, { useState } itibaren'tepki';
içe aktarmak { Animasyonlu } itibaren"tepki-yerli";sabit uygulama = () => {
sabit [pozisyon, setPosition] = useState(yeni Animasyonlu. Değer(0));

geri dönmek (
dönüştürmek: [{ çevirY: konum }] }}>
 {/* Top bileşeni burada */}
 </Animated.View>
 );
};

Kullanmak Animasyonlu. Değer adlı bir durum değişkeni oluşturmak için konum topun dikey konumunu takip edecek. sarın Görüş bileşen Animasyonlu. Görüş böylece ona animasyonlar uygulayabilirsiniz.

Ardından, topun düşmesini ve zıplamasını sağlayacak animasyon işlevini oluşturun:

sabit animasyonu başlat = () => {
 Animated.spring (konum, {
 değer: 300,
 sürtünme: 1,
 tansiyon: 10,
 NativeDriver'ı kullanın: doğru,
 }).başlangıç(() => {
 Animated.spring (konum, {
 değer: 0,
 sürtünme: 1,
 tansiyon: 10,
 NativeDriver'ı kullanın: doğru,
 }).başlangıç();
 });
};

Kullanmak Animated.spring() topu başlangıç konumu olan 0'dan son konumu olan 300'e taşıyacak bir animasyon oluşturmak için. Belirtin sürtünme Ve tansiyon ayarlarken topun sekme etkisini kontrol etmek için değerler NativeDriver'ı kullan ile doğru performansı artırmak için.

Daha sonra, bir kullanıcı topla etkileşime girdiğinde animasyonu tetikleyecek kodu uygulayabilirsiniz:

geri dönmek (

dönüştürmek: [{ çevirY: konum }] }}>
 {/* Top bileşeni burada */}
 </Animated.View>
 </TouchableWithoutFeedback>
);

Bu kod, Animasyonlu. Görüş bileşen DokunulabilirGeri Bildirim Olmadan böylece kullanıcı topa bastığında animasyon tetiklenir. Ayrıca, bileşen bağlandığında animasyonu çağırarak da tetikleyebilirsiniz. animasyonu başlat() işlev React'in içinde useEffect() kanca.

Bu kod ile, kullanılarak oluşturulmuş bir düşen top animasyonuna sahip olmalısınız. Animated.spring().