Animasi bisa menjadi cara yang bagus untuk meningkatkan pengalaman pengguna aplikasi React Anda. Mereka dapat membantu membuat interaksi terasa lebih lancar, dan juga dapat memberikan umpan balik visual atau menarik perhatian ke elemen tertentu.

Ada banyak cara Anda dapat bekerja dengan animasi CSS menggunakan React, dari solusi asli hingga pustaka pihak ketiga.

Mengapa Menggunakan Animasi di React?

Ada banyak alasan mengapa Anda mungkin ingin menggunakan animasi dalam aplikasi React Anda. Beberapa alasan paling umum meliputi:

  • Membuat interaksi terasa lebih natural. Animasi dapat membantu membuat interaksi pengguna terasa lebih alami dan lancar. Misalnya, jika Anda menggunakan komponen toggle, Anda mungkin ingin menganimasikan tombol toggle antara status "on" dan "off". Contoh lain adalah bilah kemajuan, Anda bisa membuat progress bar animasi untuk halaman aplikasi reaksi Anda.
  • Memberikan umpan balik visual. Animasi dapat memberikan umpan balik visual kepada pengguna. Misalnya, jika pengguna mengeklik tombol, Anda mungkin ingin menganimasikan tombol untuk menunjukkan bahwa aplikasi telah mendaftarkan tindakan tersebut.
    instagram viewer
  • Membimbing perhatian pengguna. Animasi dapat mengarahkan perhatian pengguna ke elemen tertentu. Misalnya, jika Anda memiliki dialog modal yang muncul di layar, Anda mungkin ingin menggunakan animasi untuk menarik perhatian pengguna ke sana.
  • Menciptakan rasa urgensi.Animasi dapat menciptakan rasa urgensi atau kepentingan. Misalnya, jika Anda memiliki komponen pengatur waktu yang menghitung mundur, Anda mungkin ingin menggunakan animasi untuk mencerminkan urgensi saat mendekati tenggat waktu.

Ada beberapa cara untuk menambahkan animasi ke komponen React. Tiga yang akan Anda pelajari tentang penggunaan di sini adalah animasi gaya sebaris, perpustakaan reaksi-animasi, dan perpustakaan reaksi-simple-animate.

Mulai oleh membuat aplikasi reaksi dasar, lalu ikuti metode pilihan Anda.

Metode 1: Menggunakan Animasi Gaya Inline

Misalnya, katakanlah Anda ingin menganimasikan sebuah komponen agar memudar ketika Anda mengklik sebuah tombol. Anda dapat melakukannya dengan kode berikut:

impor Bereaksi, { Komponen } dari 'reaksi';
kelasFadeInOutmemanjangKomponen{
konstruktor(Atribut) {
super(Atribut);


ini.negara = {
 terlihat: PALSU
 };
 }


render() {
const gaya = {
kegelapan: ini.negara.isVisible? 1: 0,
 transisi: 'opasitas 2s'
 };


kembali (
<div>
<gaya div={gaya}>
 Halo Dunia!
</div>
<tombol onClick={this.toggleVisibility}>
 Beralih
</button>
</div>
 );
 }


toggleVisibility = () => {
ini.setState (prevState => ({
isVisible: !prevState.isVisible
 }));
 }
}
eksporbawaan FadeInOut;

Dalam contoh ini, objek gaya memiliki properti opasitas dan transisi. Opacity adalah 0 saat komponen tidak terlihat, dan 1 saat komponen terlihat. Properti transisi adalah "opacity 2s", yang akan menyebabkan opacity bertransisi selama dua detik saat berubah.

Tombol ini mengubah visibilitas komponen. Saat seseorang mengklik tombol, variabel status isVisible diperbarui dan komponen akan muncul atau menghilang tergantung pada statusnya saat ini.

Metode 2: Menggunakan Perpustakaan reaksi-animasi

Cara lain untuk menambahkan animasi ke komponen React adalah dengan menggunakan library seperti react-animations. Pustaka ini menyediakan satu set animasi yang telah ditentukan sebelumnya yang dapat Anda gunakan dalam komponen React Anda.

Untuk menggunakan animasi reaksi, pertama-tama Anda harus menginstal pustaka:

npm Install reaksi-animasi --menyimpan

Anda juga perlu menginstal aphrodite, yang merupakan dependensi dari animasi reaksi:

npm Install aphrodite --menyimpan

Setelah Anda menginstal perpustakaan, Anda dapat mengimpor animasi yang ingin Anda gunakan:

impor {memudar, memudar} dari 'reaksi-animasi';

Kemudian, Anda dapat menggunakan animasi di komponen Anda:

impor Bereaksi, { Komponen } dari 'reaksi';
impor { Lembar Gaya, css } dari 'afrodit';
impor {memudar, memudar} dari 'reaksi-animasi';
const gaya = StyleSheet.create({
 fadeIn: {
 nama animasi: fadeIn,
 durasi animasi: '2 detik'
 },
 memudar: {
 nama animasi: fadeOut,
 durasi animasi: '2 detik'
 }
});


kelasFadeInOutmemanjangKomponen{
konstruktor(Atribut) {
super(Atribut);


ini.negara = {
 terlihat: PALSU
 };
 }


render() {
const NamaKelas = ini.state.isVisible? css (styles.fadeIn): css (styles.fadeOut);


kembali (
<div>
<div namaKelas={NamaKelas}>
 Halo Dunia!
</div>
<tombol onClick={this.toggleVisibility}>
 Beralih
</button>
</div>
 );
 }


toggleVisibility = () => {
ini.setState (prevState => ({
isVisible: !prevState.isVisible
 }));
 }
}
eksporbawaan FadeInOut;

Contoh ini dimulai dengan mengimpor animasi fadeIn dan fadeOut dari library react-animations. Itu kemudian mendefinisikan objek gaya dengan animasi fadeIn dan fadeOut, dan animationDuration diatur ke dua detik.

Tombol tersebut akan mengalihkan visibilitas komponen. Saat seseorang mengkliknya, variabel status isVisible akan diperbarui, dan komponen akan muncul atau menghilang bergantung pada statusnya saat ini.

Metode 3: Menggunakan Perpustakaan react-simple-animate

Pustaka react-simple-animate menyediakan cara sederhana untuk menambahkan animasi ke komponen React. Ini menawarkan API deklaratif yang memudahkan untuk mendefinisikan animasi yang kompleks.

Untuk menggunakan perpustakaan, Anda harus menginstalnya terlebih dahulu:

npm Install reaksi-sederhana-animasi --menyimpan

Kemudian, Anda dapat menggunakannya di komponen Anda:

impor Bereaksi, { Komponen } dari 'reaksi';
impor { Animasikan, AnimateKeyframes} dari "react-simple-animate";
kelasAplikasimemanjangKomponen{
 render() {
kembali (
<div>
<Menghidupkan
 bermain
awal={{
 opasitas: 0
 }}
akhir={{
 opasitas: 1
 }}
>
<div>
 Halo Dunia!
</div>
</Animate>
<AnimateKeyframes
 bermain
 durasi={2}
 bingkai utama={[
 { opasitas: 0, transformasi: 'translateX(-100px)' },
 { opasitas: 1, transformasi: 'terjemahkanX(0px)' }
 ]}
>
<div>
 Halo Dunia!
</div>
</AnimateKeyframes>
</div>
 );
 }
}
eksporbawaan Aplikasi;

Itu Menghidupkan komponen memudar dalam elemen div. Dimulai dengan opasitas 0 dan diakhiri dengan opasitas 1. Prop play disetel ke true, yang akan menyebabkan animasi diputar secara otomatis saat komponen terpasang.

Itu AnimateKeyframes komponen menganimasikan elemen div selama dua detik. Larik keyframes menentukan status awal dan akhir animasi. Keyframe pertama memiliki opacity 0 dan nilai translateX -100px. Bingkai kunci kedua memiliki opacity 1 dan nilai translateX 0px.

Tingkatkan Keterlibatan Pengguna Dengan Animasi

Sekarang Anda tahu beberapa cara menggunakan animasi di aplikasi React Anda. Anda dapat menggunakan animasi untuk meningkatkan keterlibatan pengguna dengan aplikasi Anda.

Misalnya, Anda mungkin ingin menggunakan animasi untuk memberi penghargaan kepada pengguna karena telah menyelesaikan tugas. Ini bisa menjadi sesuatu yang sederhana seperti animasi "pemintal" pendek atau animasi yang lebih kompleks yang diputar saat pengguna menyelesaikan level dalam game.

Anda juga dapat menggunakan aplikasi React Anda di web secara gratis dengan layanan seperti halaman Github atau Heroku.