Cara Membuat Animasi Berkelanjutan di React Native Menggunakan Animated.loop()

Salah satu fitur utama API Animasi React Native adalah Animasi.loop() metode yang dapat digunakan untuk membuat animasi berkelanjutan yang berulang tanpa batas.

Kami akan menjelajahi cara menggunakan metode Animated.loop() untuk membuat animasi berkelanjutan di React Native dan mempelajari cara menyesuaikan dan meningkatkan animasi ini.

Memahami Metode Animated.loop()

Untuk menggunakan metode Animated.loop(), Anda harus terlebih dahulu membuat file Animasi. Nilai obyek. Nilai ini diperbarui pada setiap frame loop animasi dan akan digunakan untuk menganimasikan komponen target.

Sekali Animasi. Objek nilai telah dibuat, Anda dapat meneruskannya ke metode Animated.loop() bersama dengan objek konfigurasi animasi yang menentukan perilaku animasi.

Objek konfigurasi ini dapat menyertakan properti seperti durasi, pelonggaran, Dan menunda, yang menentukan bagaimana perilaku animasi.

Mengulangi Animasi Anda

Secara default, metode Animated.loop() membuat loop tak terbatas dari animasi, yang berarti animasi akan terus berulang hingga dihentikan secara manual. Namun, Anda dapat menentukan durasi loop animasi dengan menyetel iterasi properti di objek konfigurasi animasi.

Contoh berikut menunjukkan cara menggunakan Animation.loop() untuk membuat animasi rotasi melingkar:

impor Bereaksi, { useState, useEffect } dari'reaksi';
impor { StyleSheet, Tampilan, Animasi, Gambar } dari'bereaksi-asli';
eksporbawaanfungsiAplikasi() {
const [spinValue] = useState(baru Animasi. Nilai(0));
 gunakanEfek(() => {
const putaran = spinValue.interpolate({
 rentang masukan: [0, 1],
 rentang keluaran: ['0 derajat', '360 derajat'],
 });
 Animasi.loop(
 Animasi.waktu(
 nilai-spin,
 {
 untuk menilai: 1,
 durasi: 2000,
 gunakanNativeDriver: BENAR,
 }
 )
 ).awal();
 }, []);
kembali (

 gaya={{ lebar: 200, tinggi: 200, mengubah: [{ memutar: nilaispin }] }}
 sumber={{ uri: ' https://reactjs.org/logo-og.png' }}
 />
 </View>
 );
}
const gaya = StyleSheet.create({
 wadah: {
 melenturkan: 1,
 menyelaraskanItem: 'tengah',
 membenarkanKonten: 'tengah',
 },
});

Dalam contoh ini, kami membuat Animated. Objek nilai disebut spinValue dan atur nilai awalnya menjadi 0. Kami kemudian memanggil lingkaran() metode pada Animasi.waktu() objek, yang menggunakan state spinValue sebagai argumennya. Objek Animated.timing() menjelaskan bagaimana animasi akan berkembang dari waktu ke waktu, dan dalam hal ini, memutar gambar sebesar 360 derajat.

Untuk mengatur durasi loop, kami telah melewati a durasi properti ke objek Animated.timing(), yang akan menentukan berapa lama animasi akan berjalan sebelum perulangan. Kami menyetel properti durasi ke 2000, yang berarti 2 detik sebelum memulai ulang.

Anda juga dapat mengatur berapa kali animasi harus diulang dengan meneruskan iterasi properti ke metode loop().

Misalnya, Anda ingin animasi berputar lima kali sebelum berhenti. Dalam hal ini, Anda dapat memanggil Animated.loop() dengan iterasi: 5. Jika Anda ingin animasi berputar tanpa batas, Anda dapat menghilangkan iterasi properti sepenuhnya.

Dengan menggunakan Animation.loop(), mengatur durasinya, dan menerapkan gaya CSS dengan benar ke objek tampilan yang dikembalikan, Anda dapat membuat animasi loop yang mulus di React Native.

Bekerja Dengan Animasi Kompleks

Bekerja dengan animasi yang kompleks tidak semudah bekerja dengan animasi tunggal. Mereka biasanya membutuhkan sedikit lebih banyak pekerjaan untuk memastikan mereka berperilaku seperti yang diharapkan.

Berikut adalah dua tip yang akan membantu Anda saat mengulang animasi kompleks di React Native:

1. Memecah Animasi Menjadi Bagian yang Lebih Kecil

Anda dapat memecah animasi yang rumit menjadi animasi yang lebih kecil dan sederhana yang dapat diulang satu per satu. Misalnya, animasi kompleks yang melibatkan rotasi dan translasi dapat dipecah menjadi dua animasi terpisah, yang akan diulang secara terpisah. Dengan memecah animasi menjadi bagian yang lebih kecil, Anda dapat menyederhanakan kode dan membuatnya lebih mudah ditangani.

2. Gunakan Metode Animated.sequence()

Itu Animated.sequence() metode memungkinkan Anda untuk menjalankan urutan animasi satu demi satu. Metode ini dapat membuat animasi loop yang kompleks dengan merantai animasi loop tunggal. Anda dapat menggunakanAnimated.sequence() untuk membuat animasi yang memudarkan gambar terlebih dahulu, memutarnya, lalu memudarkannya, mengulangi seluruh urutan setelah selesai.

Tips ini diberikan bersama dengan tip umum untuk mengoptimalkan aplikasi React Native Anda akan membantu Anda membuat animasi loop yang berkinerja baik.

Eksperimen Dengan Animasi Anda

Animasi melingkar di React Native dapat menjadi alat yang ampuh untuk menciptakan pengalaman pengguna yang lebih menarik dan dinamis. Anda harus bereksperimen dengan berbagai teknik untuk membuat animasi melingkar untuk mendapatkan animasi yang menarik secara visual dan performa.