Cara Membuat Animasi Berkelanjutan di React Native Menggunakan Animated.loop()
Table of content:
Salah satu fitur utama dari API Animasi React Native adalah Animasi.loop() metode yang dapat digunakan untuk membuat animasi berkelanjutan yang berulang tanpa batas.
Kita akan mengeksplorasi cara menggunakan metode Animated.loop() untuk membuat animasi berkelanjutan di React Native dan mempelajari cara menyesuaikan dan menyempurnakan 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.
Baca Juga:
Setelah objek Animated.Value 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, pelonggaranDan menundayang 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:
import React, { useState, useEffect } from 'react';
import { StyleSheet, View, Animated, Image } from 'react-native';export default function App() {
const [spinValue] = useState(new Animated.Value(0));
useEffect(() => {
const spin = spinValue.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '360deg'],
});
Animated.loop(
Animated.timing(
spinValue,
{
toValue: 1,
duration: 2000,
useNativeDriver: true,
}
)
).start();
}, []);
return (
<View style={styles.container}>
<Animated.Image
style={{ width: 200, height: 200, transform: [{ rotate: spinValue }] }}
source={{ uri: 'https://reactjs.org/logo-og.png' }}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
Dalam contoh ini, kami membuat objek Animated.Value bernama 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 looping 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-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 gunakan Animated.sequence() untuk membuat animasi yang memudarkan gambar terlebih dahulu, memutarnya, lalu memudarkannya, mengulangi seluruh urutan setelah selesai.
Kiat-kiat ini diberikan bersama dengan kiat-kiat umum untuk mengoptimalkan aplikasi React Native Anda akan membantu Anda membuat animasi looping 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.
Artikel Terkait
