Cara Membuat Animasi React Native yang Lebih Baik

Aplikasi seluler sering kali menggunakan animasi untuk menghidupkan pengalaman pengguna. Tetapi membuat animasi berkualitas tinggi bisa menjadi sebuah tantangan.

Untungnya, ada konsep dan teknik yang dapat Anda gunakan untuk meningkatkan keterampilan animasi Anda. Anda kemudian dapat menerapkannya untuk membuat animasi yang lebih baik dan lebih halus untuk aplikasi seluler React Native Anda berikutnya.

Reaksi Animasi Asli

Itu Bereaksi Animasi Asli library adalah cara paling populer untuk membuat animasi di aplikasi React Native.

Seperti Pustaka animasi bawaan React, API Animasi adalah bagian dari pustaka Animasi berbasis JavaScript. Animated menyediakan sekumpulan kelas dan metode yang memungkinkan Anda membuat animasi yang halus dan lancar. Ada beberapa pilihan bagus lainnya untuk membuat animasi React Native, seperti Reanimated.

Namun, membuat animasi yang bagus di React Native bukan hanya tentang menggunakan pustaka yang tepat atau menyetel properti yang tepat. Ini juga tentang memahami prinsip-prinsip animasi dan bagaimana menerapkannya dalam konteks pengembangan aplikasi seluler. Jadi, inilah beberapa prinsip utama untuk dipahami dan diperhatikan saat membuat animasi Anda.

Menyesuaikan Durasi Animasi

Animasi harus terasa halus dan alami bagi pengguna. Mencapai ini dapat bergantung pada bagaimana Anda menangani durasi untuk animasi tertentu yang Anda buat.

Durasi mengacu pada jumlah waktu yang diperlukan untuk menjalankan animasi sepenuhnya. Secara default, animasi di React Native memiliki durasi 500 milidetik tetapi Anda dapat menyesuaikannya menjadi lebih cepat atau lebih lambat.

Anda harus menyesuaikan durasi animasi sesuai dengan kerumitannya. Animasi sederhana, seperti fade-in, mungkin hanya membutuhkan durasi singkat, sedangkan animasi yang lebih kompleks, seperti slide-in dengan efek pantulan, mungkin perlu bertahan lebih lama, agar terasa natural dan mulus.

Dengan Animasi.waktu() metode, Anda dapat membuat animasi waktu khusus yang sesuai dengan kebutuhan Anda.

Berikut adalah contoh cara menambahkan durasi kustom ke animasi fade-in sederhana:

impor Bereaksi, { useRef } dari'reaksi';
impor { Animasi, Tampilan } dari'bereaksi-asli';
const FadeInView = (Atribut) => {
const fadeAnim = gunakanRef(baru Animasi. Nilai(0)).saat ini; 
 React.useEffect(() => {
 Animasi.waktu(
 fadeAnim,
 {
 untuk menilai: 1,
 durasi: 2000, // tetapkan durasi khusus
 gunakanNativeDriver: BENAR,
 }
 ).awal();
 }, [fadeAnim]);
kembali (
 gaya={{
 ...alat peraga.gaya,
 opasitas: fadeAnim,
 }}
 >
 {alat peraga.anak-anak}
 </Animated.View>
 );
}
eksporbawaanfungsiAplikasi() {
kembali (
melenturkan: 1, menyelaraskanItem: 'tengah', justifyContent: 'tengah'}}>
lebar: 250, tinggi: 50, warna latar belakang: 'bubuk biru'}}>
ukuran huruf: 28, textAlign: 'tengah', batas: 10}}> Memudar di dalam</Text>
 </FadeInView>
 </View>
 );
}

Saat memilih durasi untuk animasi Anda, penting untuk mencapai keseimbangan yang tepat antara kecepatan dan kehalusan.

Coba mulai dengan durasi yang lebih lama saat pertama kali bereksperimen. Durasi yang lebih lama akan memberi Anda lebih banyak waktu untuk menyesuaikan fungsi easing dan menyempurnakan animasi Anda. Anda selalu dapat mempersingkat durasinya nanti setelah Anda puas dengan keseluruhan efeknya.

Gunakan Fungsi Pelonggaran

Animasi sederhana mungkin memiliki kecepatan konstan, tetapi memvariasikan kecepatan dapat menciptakan efek yang lebih alami. Fungsi easing mengontrol tingkat perubahan animasi dari waktu ke waktu. Mereka dapat membuat animasi Anda dimulai dengan lambat, lalu dipercepat. Mengatur kecepatan yang berbeda saat animasi berlangsung dapat membuat animasi yang halus dan menarik.

Ambil contoh penggunaan fungsi easing ini:

impor Bereaksi, { useRef } dari'reaksi';
impor { Animasi, Tampilan } dari'bereaksi-asli';
const FadeInView = (Atribut) => {
const fadeAnim = gunakanRef(baru Animasi. Nilai(0)).saat ini; 
 React.useEffect(() => {
 Animasi.waktu(
 fadeAnim,
 {
 untuk menilai: 1,
 durasi: 2000,
 easing: Animated.easeOut, // gunakan fungsi pelonggaran di sini
 gunakanNativeDriver: BENAR,
 }
 ).awal();
 }, [fadeAnim]);
kembali (
 gaya={{
 ...alat peraga.gaya,
 opasitas: fadeAnim,
 }}
 >
 {alat peraga.anak-anak}
 </Animated.View>
 );
}
eksporbawaanfungsiAplikasi() {
kembali (
melenturkan: 1, menyelaraskanItem: 'tengah', justifyContent: 'tengah'}}>
lebar: 250, tinggi: 50, warna latar belakang: 'bubuk biru'}}>
ukuran huruf: 28, textAlign: 'tengah', batas: 10}}>Memudar</Text>
 </FadeInView>
 </View>
 );
}

Kode ini menggunakan Animated.easeOut berfungsi untuk mengontrol tingkat perubahan opacity dari sebuah animasi Melihat. Itu Animasi.waktu() metode akan menggunakan fungsi ease-out untuk secara bertahap mengubah opacity dari 0 menjadi 1 selama dua detik, untuk membuat animasi tampak melambat saat mencapai akhir.

Anda dapat menggunakan berbagai jenis fungsi easing untuk membuat animasi Anda terlihat lebih mulus, termasuk easing-in, easing-out, dan easing-in-out.

Memilih fungsi easing yang tepat dapat membuat perbedaan besar dalam persepsi kualitas animasi aplikasi Anda. Sebaiknya luangkan waktu untuk bermain-main dengan mereka dan lihat mana yang paling cocok untuk kasus penggunaan khusus Anda.

Keyframes Membantu Dengan Animasi Kompleks

Bingkai utama adalah penanda yang memungkinkan Anda menentukan momen dalam animasi di mana Anda ingin membuat perubahan pada properti seperti posisi, skala, atau rotasi. Ini seperti menandai titik waktu untuk memandu animasi.

Anda dapat menggunakan satu set keyframes untuk menetapkan nilai spesifik untuk properti apa pun Anda ingin menghidupkan. Ini membantu Anda mengontrol waktu dan perilaku, terutama untuk animasi kompleks seperti yang melibatkan pergerakan karakter.

Untuk membuat animasi keyframe dasar, Anda harus menentukan antara keyframe yang ingin Anda animasikan dan total durasinya.

Misalnya, Anda ingin menghidupkan persegi dari posisi awal (0, 0) ke posisi akhir (100, 100) selama satu detik.

Anda dapat membuat larik bingkai kunci seperti ini:

const keyframe = [
 { X: 0, y: 0 },
 { X: 50, y: 50 },
 { X: 100, y: 100 },
];

Dalam hal ini, ada tiga bingkai utama: satu di awal animasi, satu di tengah, dan satu di akhir. Anda kemudian dapat meneruskan susunan bingkai kunci ini ke pustaka animasi Anda, bersama dengan durasi 1.000 milidetik, untuk membuat animasi yang lancar di antara bingkai kunci.

Di beberapa pustaka, Anda juga perlu menentukan fungsi easing untuk mengontrol perkembangan animasi. Namun, Anda bisa menerapkan ide dasar untuk menentukan bingkai utama dan durasi ke sebagian besar pustaka animasi.

Manfaatkan Perangkat Dengan Akselerasi Perangkat Keras

Akselerasi perangkat keras dapat menjadi alat yang ampuh untuk mengoptimalkan kinerja animasi React Native Anda. Dengan memanfaatkan perangkat keras grafis perangkat, Anda dapat melepaskan beberapa pekerjaan pemrosesan dari CPU dan, pada gilirannya, mencapai animasi yang lebih halus dan lebih responsif.

GPU perangkat kemudian akan secara alami memproses nilai dan gaya animasi, daripada harus dilakukan oleh utas JavaScript.

Akselerasi perangkat keras mungkin tidak tersedia di semua perangkat, jadi penting untuk menguji animasi Anda di berbagai perangkat nyata untuk memastikan performa terbaik.