Menggunakan Metode Animated.spring() untuk Animasi Dinamis di React Native
Table of content:
Pustaka API Animasi React Native dapat membantu Anda membuat animasi yang dinamis dan lancar dengan sedikit usaha.
Pelajari cara membuat animasi dengan efek seperti pegas, lalu cari tahu cara mengontrol durasi dan kecepatannya, serta menerapkannya dalam skenario dunia nyata.
Apa Itu Animasi Dinamis?
Animasi dinamis adalah animasi di mana pergerakan objek animasi tidak diprogram sebelumnya. Anda dapat memulainya sebagai respons terhadap interaksi pengguna atau perubahan pada lingkungan. Teknik ini paling populer dalam animasi video game, aplikasi media sosial, atau bentuk media interaktif lainnya.
Baca Juga:
Animasi dinamis dapat memberikan pengalaman yang lebih imersif dan menarik bagi pengguna, karena memungkinkan gerakan yang tidak dapat diprediksi dan responsif yang dapat berubah berdasarkan beberapa faktor.
Animasi dalam aplikasi seluler, selama bertahun-tahun, menjadi semakin kompleks. API Animasi default React Native telah maju untuk mengakomodasi kerumitan ini. Itu animasi.spring() metode yang disediakan API dapat menganimasikan objek React Native, menciptakan efek dinamis.
Mengontrol Animasi
Saat menggunakan animasi.spring() metode, Anda harus memiliki kendali atas animasi untuk memastikannya berperilaku seperti yang Anda inginkan. Animated menyediakan serangkaian metode untuk mengontrol dan memanipulasi animasi React Native Anda secara manual.
Salah satu caranya adalah berhenti(), yang menyebabkan animasi berhenti pada nilainya saat ini. Metode ini berguna saat Anda perlu membatalkan animasi atau meresetnya ke keadaan awal.
Misalnya:
const stopAnimation = () => {
position.stop(value => {
position.setValue(0);
});
};
Perhatikan bagaimana Anda dapat menggunakan setValue() metode untuk mengatur ulang nilai posisi ke keadaan awal 0.
Metode lain yang tersedia untuk Anda adalah mengatur ulang(), yang mengembalikan animasi ke keadaan awalnya. Metode ini berguna saat Anda perlu memulai ulang animasi.
Aplikasi Dunia Nyata
Anda dapat menjelajahi penggunaan praktis dari animasi.spring() metode dengan membangun animasi sederhana. Bola bundar akan jatuh ke permukaan saat pengguna berinteraksi dengannya, lalu memantul kembali ke udara sesudahnya. Anda seharusnya sudah memiliki proyek react Native yang dapat Anda kerjakan.
Pertama, buat variabel status untuk melacak posisi bola:
import React, { useState } from 'react';
import { Animated } from 'react-native';const App = () => {
const [position, setPosition] = useState(new Animated.Value(0));
return (
<Animated.View style={{ transform: [{ translateY: position }] }}>
{}
</Animated.View>
);
};
Menggunakan Animasi.Nilai untuk membuat variabel negara yang disebut posisi yang akan melacak posisi vertikal bola. Bungkus Melihat komponen di Animasi.Tampilan sehingga Anda dapat menerapkan animasi untuk itu.
Selanjutnya, buat fungsi animasi yang akan membuat bola jatuh dan memantul ke atas:
const startAnimation = () => {
Animated.spring(position, {
toValue: 300,
friction: 1,
tension: 10,
useNativeDriver: true,
}).start(() => {
Animated.spring(position, {
toValue: 0,
friction: 1,
tension: 10,
useNativeDriver: true,
}).start();
});
};
Menggunakan animasi.spring() untuk membuat animasi yang akan menggerakkan bola dari posisi awal 0 ke posisi akhir 300. Tentukan gesekan Dan ketegangan nilai untuk mengontrol efek pantulan bola saat pengaturan gunakanNativeDriver ke BENAR untuk meningkatkan kinerja.
Anda kemudian dapat mengimplementasikan kode untuk memicu animasi saat pengguna berinteraksi dengan bola:
return (
<TouchableWithoutFeedback onPress={startAnimation}>
<Animated.View style={{ transform: [{ translateY: position }] }}>
{}
</Animated.View>
</TouchableWithoutFeedback>
);
Kode ini membungkus Animasi.Tampilan komponen di Dapat Disentuh Tanpa Umpan Balik sehingga animasi terpicu saat pengguna menekan bola. Anda juga dapat memicu animasi saat komponen terpasang dengan memanggil startAnimation() fungsi di dalam React’s useEffect() kait.
Dengan kode ini, Anda harus membuat animasi bola jatuh menggunakan animasi.spring().
Animasi Dinamis di React Native
Anda telah melihat cara mengimplementasikan animasi bola jatuh menggunakan Animated.spring(), tetapi ada banyak cara lain yang dapat Anda gunakan untuk membuat animasi dinamis.
Misalnya, Anda dapat menggunakan Animated.spring() untuk membuat animasi yang mensimulasikan gerakan berbasis fisika lainnya, seperti benda berayun atau berputar.
Dengan menggabungkan Animated.spring() dengan fungsi animasi lainnya, seperti Animated.timing() atau Animated.sequence(), Anda dapat membuat animasi yang kompleks dan mulus yang menyempurnakan pengalaman pengguna.
Artikel Terkait
