Pelajari cara menganimasikan komponen Anda di React Native dengan cara yang mudah, dan cara yang lebih baik.

Animasi dapat menghidupkan aplikasi, menjadikannya lebih menarik dan intuitif bagi pengguna. Namun jika Anda baru mengenal animasi React Native, memulai bisa sedikit menakutkan.

Jelajahi animasi React Native dan cari tahu bagaimana Anda bisa mulai membuat animasi yang indah dan halus.

Bagaimana Cara Kerja Basic React Native Animations?

Animasi dapat membuat transisi mulus antara berbagai layar atau elemen. Mereka dapat menyoroti informasi atau memberikan umpan balik tentang tindakan pengguna. Animasi bisa sederhana atau kompleks dan bisa menggunakan berbagai teknik, seperti grafik gerak 2D atau 3D.

Portabilitas React Native membuatnya layak digunakan jika Anda menargetkan beberapa platform. Salah satu fitur terkuatnya adalah kemampuan membuat animasi yang indah untuk aplikasi seluler.

Anda dapat menganimasikan objek React Native hanya dengan mengubah status posisi komponen yang diinginkan.

instagram viewer

Misalnya:

impor Bereaksi, { useState, useEffect } dari'reaksi';
impor { Lihat, Lembar Gaya } dari'bereaksi-asli';
const Aplikasi = () => {
// Inisialisasi status untuk melacak posisi kotak
const [boxPosition, setBoxPosition] = useState(0);


// Gunakan kait useEffect untuk memperbarui posisi kotak setiap 1 detik
 gunakanEfek(() => {
const interval = setInterval(() => {
// Perbarui posisi kotak dengan menambahkan 10 ke posisi saat ini
 setBoxPosition(posisi sebelumnya => posisi sebelumnya + 10);
 }, 1000);


// Mengembalikan fungsi pembersihan untuk menghapus interval saat komponen
// melepas
kembali() => clearInterval (interval);
 }, []);


// Tetapkan posisi kotak menggunakan variabel status dalam gaya inline
const gaya kotak = {
 transformasi: [{ terjemahkan Y: posisi kotak }]
 };


kembali (


 </View>
 );
};


const gaya = StyleSheet.create({
 wadah: {
 melenturkan: 1,
 menyelaraskanItem: 'tengah',
 membenarkanKonten: 'tengah',
 },
 kotak: {
 lebar: 100,
 tinggi: 100,
 warna latar belakang: 'biru',
 },
});
eksporbawaan Aplikasi;

Kode ini membuat kotak biru yang bergerak ke bawah setiap detik. Animasi bekerja dengan menggunakan useEffect kait untuk membuat penghitung waktu yang memperbarui boxPosition variabel status setiap 1 detik.

Meskipun ini dapat bekerja dalam beberapa situasi, ini bukan pilihan terbaik untuk digunakan. Pembaruan status di React Native bekerja secara asinkron, tetapi animasi bergantung pada pembaruan status sinkron untuk bekerja dengan benar. Mengimplementasikan animasi Anda secara asinkron akan menyebabkan pembaruan status tidak segera tercermin dalam output komponen yang dirender, mengacaukan pengaturan waktu animasi Anda.

Mereka adalah beberapa perpustakaan animasi seperti Animasi perpustakaan, react-native-reanimated, Dan react-native-animatable untuk membuat animasi berkinerja tinggi di React Native. Masing-masing pustaka animasi ini mengatasi masalah pembaruan status asinkron dan sangat ideal.

React Native Animated API

Animated adalah API yang disediakan oleh React Native. Anda dapat menggunakannya untuk membuat animasi halus yang merespons interaksi pengguna atau perubahan status.

Animated API memungkinkan Anda membuat nilai animasi yang dapat diinterpolasi dan dipetakan ke berbagai properti gaya komponen Anda. Anda kemudian dapat memperbarui nilai ini dari waktu ke waktu menggunakan berbagai metode animasi. Gaya komponen Anda kemudian akan diperbarui saat nilai animasi berubah, menghasilkan animasi yang halus.

Animated bekerja sangat baik dengan sistem tata letak React Native. Karena itu, animasi Anda akan terintegrasi dengan baik dengan UI Anda lainnya untuk tampilan yang lebih baik.

Untuk mulai menggunakan Animated di proyek React Native Anda, Anda perlu mengimpor file Animasi modul dari 'bereaksi-asli' ke dalam kode Anda:

impor { Animasi } dari'bereaksi-asli';

Dengan Animasi yang diimpor, Anda dapat mulai membuat animasi. Untuk melakukannya, pertama-tama, buat nilai animasi yang akan Anda manipulasi sepanjang animasi:

const nilaianimasi = baru Animasi. Nilai(0);

Itu Animasi. Nilai adalah kelas dalam React Native Animated API yang merepresentasikan nilai yang dapat diubah. Anda dapat menginisialisasinya dengan nilai awal, lalu memperbaruinya dari waktu ke waktu menggunakan berbagai metode animasi yang disediakan oleh Animated API, seperti .pengaturan waktu(), .musim semi(), Dan .membusuk(), dengan menentukan durasi animasi, fungsi easing, dan parameter lainnya.

Nilai animasi mirip dengan nilai status dalam komponen React.

Anda dapat menginisialisasi sebuah Animasi. Nilai dengan nilai status awal komponen, lalu memperbaruinya dari waktu ke waktu menggunakan setState metode.

Misalnya, Anda memiliki komponen yang memiliki nilai status menghitung, yang mewakili berapa kali pengguna mengklik tombol itu.

Anda dapat membuat sebuah Animasi. Nilai dan inisialisasi dengan nilai status awal menghitung:

const Aplikasi = () => {
const [hitung, setCount] = useState(0);
const nilaianimasi = baru Animasi. Nilai (jumlah);
};

Kemudian, kapan pun menghitung pembaruan nilai negara, Anda dapat memperbarui nilaianimasi juga:

const handlebuttonKlik = () => {
 setCounter (hitung + 1);
 Waktu animasi (animatedValue, {
 toValue: hitung + 1,
 durasi: 500,
 gunakanNativeDriver: BENAR
 }).awal();
};

Contoh ini diperbarui nilaianimasi menggunakan Animasi.waktu() metode setiap kali pengguna mengklik tombol. Itu nilaianimasi menggerakkan animasi, dan itu mengubah nilai lebih dari 500 milidetik.

Dengan berhubungan Animasi. Nilai ke nilai status dengan cara ini, Anda dapat membuat animasi yang merespons perubahan status komponen Anda.

Sekarang Anda mengerti cara memanipulasi nilai animasi, Anda kemudian dapat melanjutkan ke Interpolasi nilai animasi dan memetakannya ke properti gaya komponen Anda menggunakan Animasi.interpolasi() metode.

Misalnya:

const opacity = nilaianimasi.interpolasi({
 rentang masukan: [0, 1],
 rentang keluaran: [0, 1]
});
kembali (

 {/* konten komponen Anda */}
 </View>
);

Ini akan membuat animasi yang secara bertahap memudar di Melihat komponen saat nilai animasi berubah dari 0 menjadi 1.

Memahami Jenis Animasi

Memahami jenis animasi dan cara kerjanya penting untuk membuat animasi yang baik.

Menggunakan gunakanNativeDriver opsi dengan Animasi meningkatkan kinerja. Opsi ini memungkinkan Anda memindahkan animasi ke utas UI asli. Ini dapat meningkatkan kinerja secara signifikan dengan mengurangi jumlah pemrosesan JavaScript yang diperlukan.

Namun, tidak semua jenis animasi mendukung driver asli. Mencoba menggunakan pengandar asli dengan animasi yang melibatkan perubahan warna atau tata letak dapat menyebabkan perilaku yang tidak diharapkan.

Selain itu, animasi yang melibatkan urutan kompleks dapat menyebabkan masalah performa yang signifikan pada perangkat dengan daya pemrosesan atau memori yang terbatas. Defisit kinerja ini mungkin juga terlihat jika proyek React Native Anda menjalankan versi yang lebih rendah yang tidak mendukung mesin Hermes.

Memahami kekuatan dan keterbatasan berbagai jenis animasi dapat membantu Anda memilih pendekatan yang tepat untuk kasus penggunaan Anda.

Dapatkan Kenyamanan Dengan React Native Animations

Animasi adalah alat yang ampuh untuk membuat antarmuka pengguna yang menarik dan dinamis di aplikasi React Native. Animated API menyediakan cara yang fleksibel dan berkinerja baik untuk membuat animasi urutan yang sederhana dan kompleks.

Tetap saja, penting untuk mempertimbangkan dampak kinerja animasi dan memilih pendekatan dan pustaka yang tepat untuk digunakan untuk situasi Anda.