React Native'de bileşenlerinizi kolay ve daha iyi bir şekilde nasıl canlandıracağınızı öğrenin.

Animasyonlar, bir uygulamaya hayat vererek onu kullanıcı için daha ilgi çekici ve sezgisel hale getirebilir. Ancak React Native animasyonlarında yeniyseniz, başlamak biraz göz korkutucu olabilir.

React Native animasyonlarını keşfedin ve güzel, akıcı animasyonlar oluşturmaya nasıl başlayabileceğinizi öğrenin.

Basic React Native Animasyonlar Nasıl Çalışır?

Animasyonlar, farklı ekranlar veya öğeler arasında yumuşak geçişler oluşturabilir. Bilgileri vurgulayabilir veya kullanıcı eylemleri hakkında geri bildirim sağlayabilirler. Animasyonlar basit veya karmaşık olabilir ve 2B veya 3B hareketli grafikler gibi çeşitli teknikler kullanabilir.

React Native'in taşınabilirliği onu kullanmaya değer kılıyor birkaç platformu hedefliyorsanız. En güçlü özelliklerinden biri, mobil uygulamalar için güzel animasyonlar oluşturma yeteneğidir.

İstenen bileşenin konum durumunu değiştirerek bir React Native nesnesine animasyon uygulayabilirsiniz.

instagram viewer

Örneğin:

içe aktarmak Tepki, { useState, useEffect } itibaren'tepki';
içe aktarmak { Görünüm, Stil Sayfası } itibaren"tepki-yerli";
sabit uygulama = () => {
// Kutu konumunu izlemek için durumu başlat
sabit [boxPosition, setBoxPosition] = useState(0);


// Her 1 saniyede bir kutu konumunu güncellemek için useEffect kancasını kullanın
 useEffect(() => {
sabit aralık = setInterval(() => {
// Geçerli konuma 10 ekleyerek kutu konumunu güncelleyin
 setBoxPosition(öncekiPozisyon => öncekiPozisyon + 10);
 }, 1000);


// Bileşen zaman aralığını temizlemek için bir temizleme işlevi döndürür.
// bağlantıyı kaldırır
geri dönmek() => clearInterval (aralık);
 }, []);


// Satır içi stilde durum değişkenini kullanarak kutu konumunu ayarlayın
sabit kutu stili = {
 dönüştür: [{ çevirY: kutuPozisyonu }]
 };


geri dönmek (


 </View>
 );
};


sabit stiller = StyleSheet.create({
 konteyner: {
 esnek: 1,
 Öğeleri hizala: 'merkez',
 İçeriği haklı çıkar: 'merkez',
 },
 kutu: {
 Genişlik: 100,
 yükseklik: 100,
 arka plan rengi: 'mavi',
 },
});
ihracatvarsayılan Uygulama;

Bu kod, her saniye aşağı doğru hareket eden mavi bir kutu oluşturur. Animasyon, useEffect güncelleyen bir zamanlayıcı oluşturmak için kanca kutu Pozisyonu her 1 saniyede bir durum değişkeni.

Bu, bazı durumlarda işe yarasa da, gidilecek en iyi seçenek değildir. React Native'deki durum güncellemeleri zaman uyumsuz olarak çalışır, ancak animasyonların doğru çalışması için senkronize durum güncellemelerine güvenir. Animasyonunuzu eşzamansız olarak uygulamak, durum güncellemelerinin bileşenin işlenmiş çıktısına hemen yansıtılmamasına neden olarak animasyonlarınızın zamanlamasını bozar.

Bunlar, aşağıdakiler gibi birkaç animasyon kitaplığıdır: animasyonlu kütüphane, tepki-yerli-yeniden canlandırılmış, Ve tepki-yerel-animasyon React Native'de yüksek performanslı animasyonlar oluşturmak için. Bu animasyon kitaplıklarının her biri, eşzamansız durum güncellemeleri sorununu ortadan kaldırır ve son derece idealdir.

React Native Animasyonlu API

Animated, React Native'in sağladığı bir API'dir. Kullanıcı etkileşimlerine veya durum değişikliklerine yanıt veren düzgün animasyonlar oluşturmak için kullanabilirsiniz.

Animated API, bileşenlerinizin çeşitli stil özelliklerine enterpolasyon uygulayabileceğiniz ve bunlarla eşleyebileceğiniz animasyonlu değerler oluşturmanıza olanak tanır. Daha sonra çeşitli animasyon yöntemlerini kullanarak bu değerleri zaman içinde güncelleyebilirsiniz. Bileşenlerinizin stilleri, animasyonlu değerler değiştikçe güncellenecek ve bu da düzgün animasyonlarla sonuçlanacaktır.

Animasyon, React Native'in düzen sistemiyle gerçekten iyi çalışıyor. Bu nedenle, daha da iyi bir görünüm için animasyonlarınız kullanıcı arabiriminizin geri kalanıyla düzgün bir şekilde entegre edilecektir.

React Native projenizde Animated'ı kullanmaya başlamak için, animasyonlu gelen modültepki-yerli' kodunuza:

içe aktarmak { Animasyonlu } itibaren"tepki-yerli";

Animasyonlu içe aktarıldığında, animasyonlar oluşturmaya başlayabilirsiniz. Bunu yapmak için önce animasyon boyunca değiştireceğiniz bir animasyonlu değer oluşturun:

sabit animasyonluDeğer = yeni Animasyonlu. Değer(0);

bu Animasyonlu. Değer React Native Animated API'de değişken bir değeri temsil eden bir sınıftır. Bunu bir başlangıç ​​değeriyle başlatabilir ve ardından Animated API tarafından sağlanan çeşitli animasyon yöntemlerini kullanarak zaman içinde güncelleyebilirsiniz.zamanlama(), .bahar(), Ve .çürümek(), animasyonun süresini, hareket hızı işlevini ve diğer parametreleri belirterek.

Animasyonlu değer, bir React bileşenindeki durum değerine benzer.

bir başlatabilirsiniz Animasyonlu. Değer bileşenin ilk durum değeriyle karşılaştırın ve ardından zaman içinde bunu kullanarak güncelleyin. setState yöntem.

Örneğin, durum değeri olan bir bileşeniniz var. saymak, kullanıcının bu düğmeyi kaç kez tıkladığını temsil eder.

oluşturabilirsiniz Animasyonlu. Değer ve ilk durum değeriyle başlat saymak:

sabit uygulama = () => {
sabit [sayım, setCount] = kullanımDevlet(0);
sabit animasyonluDeğer = yeni Animasyonlu. Değer (sayı);
};

Daha sonra, ne zaman saymak durum değeri güncellemeleri, güncelleyebilirsiniz animasyonluDeğer fazla:

sabit handlebuttonClick = () => {
 setCounter (sayım + 1);
 Animated.timing (animatedValue, {
 toValue: say + 1,
 süre: 500,
 NativeDriver'ı kullanın: doğru
 }).başlangıç();
};

Bu örnek güncellemeler animasyonluDeğer kullanmak Hareketli.zamanlama() bir kullanıcı düğmeyi her tıkladığında yöntem. bu animasyonluDeğer animasyonu yönlendirir ve değeri 500 milisaniyenin üzerinde değiştirir.

ilişkilendirerek Animasyonlu. Değer bir durum değerine bu şekilde, bileşeninizin durumundaki değişikliklere yanıt veren animasyonlar oluşturabilirsiniz.

Artık animasyonlu bir değeri nasıl değiştireceğinizi anladığınıza göre, animasyonlu değeri Enterpolasyona geçirebilir ve bunu bileşeninizin bir stil özelliğiyle eşleyebilirsiniz. Animated.interpolate() yöntem.

Örneğin:

sabit opaklık = animasyonluValue.interpolate({
 giriş aralığı: [0, 1],
 çıktı aralığı: [0, 1]
});
geri dönmek (

 {/* bileşen içeriğiniz */}
 </View>
);

Bu, ekranda yavaş yavaş kaybolan bir animasyon yaratacaktır. Görüş animasyonlu değer 0'dan 1'e değiştikçe bileşen.

Animasyon Türlerini Anlamak

Animasyon türlerini ve nasıl çalıştıklarını anlamak, iyi animasyonlar oluşturmak için önemlidir.

Kullanmak NativeDriver'ı kullan Animasyonlu seçeneği performansı artırır. Bu seçenek, animasyonları yerel UI iş parçacığına aktarmanıza izin verir. Gerekli JavaScript işleme miktarını azaltarak performansı önemli ölçüde artırabilir.

Ancak, tüm animasyon türleri yerel sürücüyü desteklemez. Yerel sürücüyü renk veya düzen değişiklikleri içeren animasyonlarla kullanmaya çalışmak beklenmeyen davranışlara neden olabilir.

Ek olarak, karmaşık dizileri içeren animasyonlar, sınırlı işlem gücü veya belleği olan cihazlarda önemli performans sorunlarına neden olabilir. Bu performans açıkları, React Native projeniz daha düşük bir sürüm çalıştırıyorsa da dikkate değer olabilir. Hermes motorunu destekleyin.

Farklı animasyon türlerinin güçlü yönlerini ve sınırlamalarını anlamak, kullanım durumunuz için doğru yaklaşımı seçmenize yardımcı olabilir.

React Native Animasyonlarla Rahat Edin

Animasyonlar, React Native uygulamalarında ilgi çekici ve dinamik kullanıcı arayüzleri oluşturmak için güçlü bir araçtır. Animated API, hem basit hem de karmaşık sekans animasyonları oluşturmak için esnek ve performanslı bir yol sağlar.

Yine de animasyonların performans üzerindeki etkisini göz önünde bulundurmak ve durumunuza uygun yaklaşımı ve kitaplığı seçmek önemlidir.