Animated.loop() Kullanarak React Native'de Sürekli Animasyon Nasıl Oluşturulur

React Native'in Animated API'sinin temel özelliklerinden biri, Animated.loop() süresiz olarak tekrar eden sürekli animasyon oluşturabileceğiniz bir yöntem.

React Native'de sürekli animasyon oluşturmak için Animated.loop() yönteminin nasıl kullanılacağını keşfedeceğiz ve bu animasyonları nasıl özelleştirip geliştireceğimizi öğreneceğiz.

Animated.loop() Yöntemini Anlama

Animated.loop() yöntemini kullanmak için önce bir Animasyonlu. Değer nesne. Bu değer, animasyon döngüsünün her karesinde güncellenir ve hedef bileşeni canlandırmak için kullanılır.

Bir kez Animasyonlu. Değer nesnesi oluşturuldu, onu animasyon davranışını tanımlayan bir animasyon yapılandırma nesnesiyle birlikte Animated.loop() yöntemine iletebilirsiniz.

Bu yapılandırma nesnesi, aşağıdakiler gibi özellikler içerebilir: süre, gevşetme, Ve gecikme, animasyonun nasıl davranacağını belirleyen.

Animasyonunuzu Döngüye Alma

Animated.loop() yöntemi varsayılan olarak animasyonun sonsuz bir döngüsünü oluşturur; bu, animasyonun manuel olarak durdurulana kadar tekrarlanmaya devam edeceği anlamına gelir. Ancak, ayarlayarak animasyon döngüsü için bir süre belirleyebilirsiniz. yinelemeler animasyon yapılandırma nesnesindeki özellik.

Döngülü bir döndürme animasyonu oluşturmak için Animation.loop()'un nasıl kullanılacağını gösteren aşağıdaki örnek:

içe aktarmak Tepki, { useState, useEffect } itibaren'tepki';
içe aktarmak { StyleSheet, Görünüm, Hareketli, Resim } itibaren"tepki-yerli";
ihracatvarsayılanişlevUygulama() {
sabit [spinValue] = kullanımDevlet(yeni Animasyonlu. Değer(0));
 useEffect(() => {
sabit spin = spinValue.interpolate({
 giriş aralığı: [0, 1],
 çıktı aralığı: ["0 derece", "360 derece"],
 });
 animasyonlu.döngü(
 animasyonlu.zamanlama(
 dönüş değeri,
 {
 değer: 1,
 süre: 2000,
 NativeDriver'ı kullanın: doğru,
 }
 )
 ).başlangıç();
 }, []);
geri dönmek (

 stil={{ Genişlik: 200, yükseklik: 200, dönüştürmek: [{ döndür: spinValue }] }}
 kaynak={{ uri: ' https://reactjs.org/logo-og.png' }}
 />
 </View>
 );
}
sabit stiller = StyleSheet.create({
 konteyner: {
 esnek: 1,
 Öğeleri hizala: 'merkez',
 İçeriği haklı çıkar: 'merkez',
 },
});

Bu örnekte, bir Animated oluşturuyoruz. değer nesnesi denir dönüş değeri ve başlangıç ​​değerini 0 olarak ayarlayın. sonra biz diyoruz döngü() yöntemi Hareketli.zamanlama() bağımsız değişkeni olarak spinValue durumunu alan nesne. Animated.timing() nesnesi, animasyonun zaman içinde nasıl ilerleyeceğini açıklar ve bu durumda bir görüntüyü 360 derece döndürür.

Döngü süresini ayarlamak için bir süre özelliği, animasyonun döngüden önce ne kadar süre çalışacağını belirleyecek olan Animated.timing() nesnesine. Duration özelliğini 2000 olarak ayarladık, yani yeniden başlatmaya 2 saniye kaldı.

Ayrıca animasyonun döngü sayısını da ayarlayabilirsiniz. yinelemeler loop() yöntemine özellik.

Örneğin, animasyonun durmadan önce beş kez dönmesini istediğinizi varsayalım. Bu durumda, Animated.loop() ile çağırabilirsiniz. yineleme: 5. Animasyonun süresiz olarak döngüye girmesini istiyorsanız, yinelemeler mülkiyet tamamen.

Animation.loop() kullanarak, süresini ayarlayarak ve CSS stilini doğru şekilde uygulamak döndürülen görünüm nesnesine, React Native'de düzgün döngülü animasyonlar oluşturabilirsiniz.

Karmaşık Animasyonla Çalışma

Karmaşık animasyonla çalışmak, tek bir animasyonla çalışmak kadar kolay değildir. Beklendiği gibi davranmalarını sağlamak için genellikle biraz daha fazla çalışma gerektirirler.

React Native'de karmaşık animasyonları döngüye alırken size yardımcı olacak iki ipucu:

1. Animasyonu Daha Küçük Parçalara Ayırın

Karmaşık animasyonları, ayrı ayrı döngüye alınabilen daha küçük, daha basit animasyonlara bölebilirsiniz. Örneğin, hem döndürmeyi hem de çevirmeyi içeren karmaşık bir animasyon, bağımsız olarak döngüye alınacak iki ayrı animasyona bölünebilir. Animasyonu daha küçük parçalara bölerek kodu basitleştirebilir ve işlenmesini kolaylaştırabilirsiniz.

2. Animated.sequence() Yöntemini Kullanın

bu animasyonlu.sekans() yöntemi, bir dizi animasyonu birbiri ardına çalıştırmanıza olanak tanır. Bu yöntem, tek döngülü animasyonları zincirleyerek karmaşık döngülü animasyonlar oluşturabilir. Bir görüntüde önce kararan, onu döndüren ve ardından tamamen kaybolan ve bittiğinde tüm sekansı tekrarlayan bir animasyon oluşturmak için Animated.sequence()'i kullanabilirsiniz.

ile birlikte sağlanan bu ipuçları React Native uygulamalarınızı optimize etmek için genel ipuçları performanslı döngülü animasyonlar oluşturmanıza yardımcı olur.

Animasyonunuzla Deney Yapın

React Native'deki döngülü animasyonlar, daha ilgi çekici ve dinamik bir kullanıcı deneyimi oluşturmak için güçlü bir araç olabilir. Hem görsel olarak çekici hem de performanslı animasyon elde etmek için döngülü animasyonlar oluşturmak için farklı teknikler denemelisiniz.