Terjemahan artikel disiapkan khusus untuk siswa kursus ReactJS / React Native-Developer .
Sulit membayangkan aplikasi seluler yang tidak memiliki animasi. Animasi di web biasanya sederhana, jika ada sama sekali (maksimum - satu halaman menggantikan yang lain). Animasi dalam aplikasi seluler memerlukan perhatian yang sangat berbeda.
CSS3 memiliki API yang relatif sederhana yang memungkinkan Anda membuat animasi sederhana. Tetapi dalam Bereaksi Asli Anda tidak memiliki alat ini. Ya, bahkan jika itu, maka itu tidak akan cukup.
Jadi, apa yang perlu Anda ketahui jika Anda bekerja dengan React Native dan Anda perlu menerapkan animasi penuh?
Bereaksi Asli memiliki alat seperti Animasi, tetapi terlihat menakutkan ... setidaknya pada awalnya.
Jadi, ada tiga "kelompok hal" atau "blok" jika Anda mau, yang perlu Anda ketahui untuk dapat bekerja dengan animasi.
Blok 0: Kebutuhan untuk Perubahan
Animasi adalah perubahan dari satu kondisi ke kondisi lain:
- Transisi dari "tersembunyi" ke "terlihat";
- Transisi dari lingkaran ke kotak.
Pikirkan tentang apa yang harus ditampilkan sebelum dan sesudah animasi.
Pikirkan tentang transisi dan gaya apa yang perlu Anda ubah untuk ini:
- Haruskah objek muncul dengan perubahan transparansi, atau haruskah itu "jatuh" dari atas?
- Haruskah lingkaran itu berubah menjadi persegi, atau haruskah itu menjadi segitiga di tengah-tengah proses?
Blok 1: Keadaan visual yang dikenal sebagai Animated.Value
Dari sudut pandang logis, komponen apa pun dapat ditampilkan atau disembunyikan - ini adalah arti dari "benar" dan "salah", tidak ada jalan tengah di sini. Sebagai keadaan, tampilan apakah objek ditampilkan benar atau salah.
Dalam antarmuka pengguna yang baik, objek tidak bersembunyi tiba-tiba dan juga tidak muncul tiba-tiba. Mereka muncul secara bertahap, membantu pengguna untuk memahami antarmuka.
Dengan demikian, menjadi jelas bahwa keadaan visual dapat menjadi sesuatu antara keadaan sejati dan keadaan salah.
Bagaimana bisa begitu?
Kami dapat memperkenalkan variabel lain untuk mewakili berbagai keadaan visual. Kita perlu ini menjadi angka, karena apa pun keadaan logis yang kita miliki, angka membantu kita mewakili nilai-nilai perantara.
this._shown = new Animated.Value(0);
Sementara keadaan logis bisa berupa biner (mis.
true atau
false , 1 atau 0), keadaan visual adalah angka titik-mengambang.
Blok 2: Transisi dikenal sebagai Animated.timing
Katakanlah beberapa komponen disembunyikan: ini berarti bahwa keadaan logis dari parameter visibilitasnya akan salah, dan keadaan visual juga akan menjadi 0,0. Tetapi apa yang terjadi ketika kita ingin menunjukkan suatu komponen? Keadaan logis harus segera menjadi benar, sementara keadaan visual harus secara bertahap melewati pertama di 0,1, 0,2, ... dan akhirnya sepenuhnya di 1,0.
Untuk melakukan ini, kita perlu cara untuk memberitahu keadaan visual transisi ke 1.0.
Dan ada cara seperti itu. Bahkan ada beberapa.
Cara termudah pada dasarnya adalah:
Animated.timing(this._shown, { toValue: 1, duration: 300, }).start();
Di sini, kita katakan
Animated untuk mengubah
_shown menjadi
1.0 dalam interval 300 ms.
Ada transisi dan cara lain untuk mengatur beberapa transisi, tetapi sekarang kita dapat menggunakan
Animated.timing .
Blok 3: Pixel yang dikenal sebagai Animated.View dan interpolate
Transisi
_shown kami antara
0.0 dan
1.0 tidak berarti apa-apa jika kami tidak dapat melihatnya. Jadi bagaimana kita melakukan ini?
Kita perlu entah bagaimana menggunakan
_shown untuk mengatur transparansi komponen anak.
Misalkan kita memiliki kode ini sebelum mulai bekerja dengan animasi:
<View style={{ opacity: this.state.shown ? 1 : 0 }}> <SomeComponent /> </View>
Kami mengatur transparansi ke
0 ketika kami menyembunyikan komponen dan ke
1 ketika kami menunjukkannya.
Bisakah kita menggunakan
Animated.Value dan
_shown untuk menghidupkan transisi dari
0 ke
1 ?
Animasi Gaya
Kita dapat menggunakan
Animated.Value apa pun ketika kita bekerja dengan gaya.
Kami hanya perlu mengubah tampilan menjadi
Animated.View , dan sekarang kami memiliki yang berikut:
const opacity = this._shown;
Bukankah ini artikel tentang animasi? Kenapa masih belum ada gambar?
Satu hal lagi: interpolasi
Kata ini terdengar menakutkan, tetapi idenya sendiri cukup sederhana. Interpolasi memungkinkan kita untuk mempertahankan keadaan visual dalam 0 dan 1, tetapi memberikan kemungkinan "cocok" dengan sesuatu yang lain.
Katakanlah, alih-alih hanya membuat komponen yang diwariskan, kami ingin komponen kami "keluar dari atas." Dan kita dapat melakukan ini dengan menempatkan komponen tersembunyi 40px lebih tinggi dan menggerakkan gerakannya ke posisi yang diinginkan, ketika keadaan berubah menjadi terlihat.
Kami dapat "mencocokkan" nilai kami dari 0 hingga 1 dengan nilai dari -40 hingga 0 menggunakan panggilan
interpolate biasa:
const top = this._shown.interpolate({ inputRange: [0, 1], outputRange: [-40, 0], });
Ini akan membuat
Animated.Value baru, yang nilainya akan dari -40 hingga 0.
Dengan kata lain, itu akan menjadi
-40 ketika
_shown adalah
0 ,
-20 ketika
_shown =
0.5 dan
0 ketika
_shown 1.0 .
Rahasia gelap: dengan interpolate Anda juga dapat mengubah nilai untuk warna dan derajat.Kesimpulan:
- Keadaan visual adalah nilai numerik, harus mencerminkan transisi dari satu gaya ke gaya lainnya.
Animated.Value memungkinkan Anda untuk mencerminkan nilai numerik dari kondisi visual.Animated.timing dapat digunakan untuk memindahkan Animated.Value ke nomor lain.Animated.Value dapat digunakan untuk gaya saat mengganti View dengan Animated.View .
Interpolasi memungkinkan Anda memetakan satu rentang
Animated.Value ke yang lain, misalnya rentang dari
0 hingga
1 hingga kisaran
5 hingga
25 atau bahkan ke kisaran antara hitam dan hijau.
Sumber:
Dalam artikel ini, kami bertemu dengan primitif animasi di React Native dan memperoleh pemahaman tentang ide dasar. Di sini Anda dapat menemukan sumber daya untuk membantu Anda menjelajahi topik ini lebih dalam: