Kullanıcı eylemlerine animasyonla tepki vermenin etkileşimi nasıl artırabileceğini keşfedin.

Animasyonlar canlı hissettirmelidir. Bir kullanıcının etkileşimine yanıt vermelerini sağlayarak React Native animasyonları için ilgi çekici bir kullanıcı deneyimi oluşturabilirsiniz. Bu etkileşimler doğrudan kullanıcıdan olabilir veya belirli değişikliklerle dolaylı olarak harekete geçirilebilir.

React Native'de Dokunma Olaylarını ve Hareketleri Anlama

React Native öğeleri, bir kullanıcının dokunma ve hareketlerine yanıt verebilir. React Native Gesture Responder, bu dokunma olaylarını ve hareketlerini algılayabilir.

Jest Yanıtlayıcı, React Native kitaplığındaki birçok bileşeni bu özellikle donatır. Düğme Ve DokunulabilirOpaklık basmaya veya dokunmaya yanıt veren bileşenler.

Ancak Jest Yanıtlayıcı, yalnızca basit bileşenleri basit hareketlerle donatır. React Native, daha karmaşık dokunma olaylarını işlemek ve algılamak için PanResponder API'sini kullanır. Kıstırma, döndürme veya sürükleme gibi daha karmaşık dokunma etkileşimlerine yanıt veren özel hareket tanıyıcılar oluşturmanıza olanak tanır.

instagram viewer

PanResponder API, belirli dokunma olaylarından herhangi biri için geri aramalar ayarlayarak uygulamanızın bu hareketlere nasıl yanıt vereceğini tanımlayabilir.

Dokunmatik Olaylarla Animasyonları Tetikleme

Dokunma etkinlikleri, bir kullanıcının bir mobil uygulamayla sahip olabileceği en yaygın etkileşim şeklidir. Belirli kullanıcı dokunma olaylarına yanıt olarak belirli animasyonları tetiklemeyi seçebilirsiniz.

İle Farklı bileşenleri canlandırmak için Native'in Animated API'sini React, kullanıcı etkileşimlerine dayalı animasyonları tetiklemek için dokunma olaylarını algılayabilir ve bunlarla çalışabilirsiniz.

Örneğin, bir görüntünün opaklığını canlandırmak için Animated API'yi kullanabilirsiniz. DokunulabilirOpaklık solma efekti oluşturmak için basıldığında düğme:

içe aktarmak Tepki, { useState, useRef } itibaren'tepki';
içe aktarmak { Görüntüle, DokunulabilirOpaklık, Animasyonlu } itibaren"tepki-yerli";
sabit Hareketli Düğme = () => {
// Animasyona erişmek için useRef'i kullanın. Değer örneği
sabit opacityValue = useRef(yeni Animasyonlu. Değer(1)).akım;


sabit tutamaçBasın = () => {
 Animated.timing (opacityValue, {
 değer: 0.5,
 süre: 500,
 NativeDriver'ı kullanın: doğru,
 }).başlangıç();
 }


geri dönmek (

opaklık: opaklıkDeğeri }}>

 {/* Düğme bileşeniniz */}
 </TouchableOpacity>
 </Animated.View>
 </View>
 );
}
ihracatvarsayılan Hareketli Düğme;

Bu örnekte, opaklıkDeğeri bir örneğidir Animasyonlu. Değer bu, düğmenin opaklığını temsil eder. Düğmeye bastığınızda, koluBasın kullanarak bir animasyonu tetikleyen işlev çalışır. Hareketli.zamanlama() düğmenin opaklığını canlandırmak için.

Animasyonları Durum Değişiklikleriyle Tetikleme

Uygulayabileceğiniz başka bir yaklaşım, uygulamanızdaki belirli durum değişikliklerine dayalı olarak animasyonları tetiklemektir. Bir bileşenin konumu, boyutu veya içeriğindeki bir değişiklik gibi birçok durum değişikliğine yanıt olarak animasyonları tetiklemek için Animated API'yi kullanabilirsiniz.

Örneğin, kullanımDevlet Ve useEffect kancalar bunun gibi bir animasyonu tetiklemek için:

içe aktarmak Tepki, { useState, useEffect } itibaren'tepki';
içe aktarmak { Görünüm, Hareketli, Düğme, Metin } itibaren"tepki-yerli";
sabit Bileşenim = () => {
sabit [fadeAnim, setFadeAnim] = useState(yeni Animasyonlu. Değer(0));
sabit [metin, setText] = kullanımDevlet('Selam Dünya');


 useEffect(() => {
// 'text' durumundayken animasyonu tetiklemek için useEffect kancasını kullanın
// değişiklikler
 animasyonu başlat();
 }, [metin]);


sabit animasyonu başlat = () => {
 animasyonlu.zamanlama(
 solgunAnimasyon,
 {
 değer: 1,
 süre: 1000,
 NativeDriver'ı kullanın: doğru,
 }
 ).başlangıç();
 };


geri dönmek (

opaklık: fadeanim }}>
{metin}</Text>
 </Animated.View>
ihracatvarsayılan Bileşenim;

Bu örnekte, useEffect kanca, durum değeri her değiştiğinde animasyonu tetikleyecektir. metin değişiklikler. bu useEffect kancası, ikinci bağımsız değişkende belirtilen bağımlılıklar olduğunda çalışacak olan ilk bağımsız değişkeni olarak bir geri arama işlevi alır (bu durumda, [metin]) değiştirmek. İçinde useEffect kanca, animasyonu başlat() solma animasyonunu çalıştırır ve tetikler.

Dinamik Animasyonlar Uygulamanızı Hareketlendirecek

React Native uygulamanıza dinamik animasyonlar eklemek, kullanıcı deneyimini büyük ölçüde geliştirir ve uygulamanızı daha etkileşimli hale getirir. Dokunma olaylarının, hareketlerin ve hareket yanıtlama sisteminin gücüyle akıcı ve duyarlı animasyonlar oluşturabilirsiniz.

Ayrıca Animasyonlu API'den yararlanarak ve animasyon durumlarını useState ve useEffect gibi kancalarla yöneterek, uygulamanızın durumundaki değişikliklere dayalı olarak animasyonları kolayca tetikleyebilirsiniz.