Cara Membuat React Native Apps yang Menarik dengan Animasi yang Diprakarsai Pengguna

Animasi harus terasa hidup. Anda dapat membuat pengalaman pengguna yang menarik untuk animasi React Native dengan membuat mereka merespons interaksi pengguna. Interaksi ini dapat langsung dari pengguna atau digerakkan secara tidak langsung oleh perubahan tertentu.

Memahami Acara Sentuhan dan Gerakan di React Native

Elemen React Native mampu merespons sentuhan dan gerakan dari pengguna. React Native Gesture Responder dapat mendeteksi peristiwa dan gerakan sentuh ini.

Gesture Responder melengkapi banyak komponen dalam pustaka React Native dengan fitur ini, seperti Tombol Dan TouchableOpacity komponen yang merespons penekanan atau ketukan.

Namun, Gesture Responder hanya melengkapi komponen sederhana dengan gerakan sederhana. Untuk menangani dan mendeteksi kejadian sentuh yang lebih kompleks, React Native menggunakan PanResponder API. Ini memungkinkan Anda membuat pengenal gestur khusus yang merespons interaksi sentuh yang lebih kompleks, seperti mencubit, memutar, atau menyeret.

PanResponder API dapat menentukan bagaimana aplikasi Anda akan merespons isyarat ini setelah menerimanya dengan menyiapkan panggilan balik untuk kejadian sentuh tertentu.

Memicu Animasi Dengan Acara Sentuh

Peristiwa sentuh adalah bentuk interaksi paling umum yang dapat dilakukan pengguna dengan aplikasi seluler. Anda dapat memilih untuk memicu animasi tertentu sebagai respons terhadap peristiwa sentuhan pengguna tertentu.

Dengan React Native's Animated API untuk menganimasikan berbagai komponen, Anda dapat mendeteksi dan bekerja dengan kejadian sentuh untuk memicu animasi berdasarkan interaksi pengguna.

Misalnya, Anda dapat menggunakan Animated API untuk menganimasikan opasitas a TouchableOpacity tombol saat ditekan untuk membuat efek fade-in:

impor Bereaksi, { useState, useRef } dari'reaksi';
impor { Lihat, TouchableOpacity, Animasi } dari'bereaksi-asli';
const Tombol Animasi = () => {
// Gunakan useRef untuk mengakses Animated. Contoh nilai
const opacityValue = useRef(baru Animasi. Nilai(1)).saat ini;
const peganganTekan = () => {
 Waktu animasi (opacityValue, {
 untuk menilai: 0.5,
 durasi: 500,
 gunakanNativeDriver: BENAR,
 }).awal();
 }
kembali (

kegelapan: opacityValue }}>

 {/* Komponen tombol Anda */}
 </TouchableOpacity>
 </Animated.View>
 </View>
 );
}
eksporbawaan Tombol Animasi;

Dalam contoh ini, opacityValue adalah contoh dari Animasi. Nilai yang mewakili opasitas tombol. Ketika Anda menekan tombol, itu peganganTekan fungsi berjalan, yang memicu penggunaan animasi Animasi.waktu() untuk menganimasikan opasitas tombol.

Memicu Animasi Dengan Perubahan Status

Pendekatan lain yang dapat Anda lakukan adalah memicu animasi berdasarkan perubahan status tertentu dalam aplikasi Anda. Anda bisa menggunakan Animated API untuk memicu animasi sebagai respons terhadap banyak perubahan status, seperti perubahan posisi, ukuran, atau konten komponen.

Misalnya, Anda dapat menggunakan useState Dan useEffect kait untuk memicu animasi seperti ini:

impor Bereaksi, { useState, useEffect } dari'reaksi';
impor { Lihat, Animasi, Tombol, Teks } dari'bereaksi-asli';
const Komponen Saya = () => {
const [fadeAnim, setFadeAnim] = useState(baru Animasi. Nilai(0));
const [teks, setText] = useState('Halo Dunia');
 gunakanEfek(() => {
// Gunakan kait useEffect untuk memicu animasi saat status 'teks'
// perubahan
 startAnimation();
 }, [teks]);
const startAnimation = () => {
 Animasi.waktu(
 fadeAnim,
 {
 untuk menilai: 1,
 durasi: 1000,
 gunakanNativeDriver: BENAR,
 }
 ).awal();
 };
kembali (

kegelapan: fadeAnim }}>
{teks}</Text>
 </Animated.View>
"Ubah Teks" onPress={() => setText('Teks Baru')} />
 </View>
 );
};
eksporbawaan Komponen Saya;

Dalam contoh ini, useEffect hook akan memicu animasi setiap kali nilai status teks perubahan. Itu useEffect hook mengambil fungsi panggilan balik sebagai argumen pertamanya, yang akan dijalankan kapan pun dependensi yang ditentukan dalam argumen kedua (dalam hal ini, [teks]) mengubah. Di dalam useEffect kait, startAnimation() berjalan dan memicu animasi fade.

Animasi Dinamis Akan Meramaikan Aplikasi Anda

Memasukkan animasi dinamis ke dalam aplikasi React Native Anda sangat meningkatkan pengalaman pengguna dan akan membuat aplikasi Anda lebih interaktif. Dengan kekuatan peristiwa sentuh, gestur, dan sistem penjawab gestur, Anda dapat membuat animasi yang lancar dan responsif.

Selain itu, dengan memanfaatkan Animated API dan mengelola status animasi dengan hook seperti useState dan useEffect, Anda dapat dengan mudah memicu animasi berdasarkan perubahan status aplikasi Anda.