() translation by (you can also view the original English article)
Animasi adalah bagian penting dari pengalaman pengguna desain. Hal ini berfungsi sebagai umpan balik pada tindakan pengguna, menginformasikan pengguna sistem status, dan memandu mereka tentang cara berinteraksi dengan antarmuka.
Salah satu alat yang saya gunakan untuk membuat cross-platform aplikasi mobile adalah React Native, sehingga dalam tutorial ini saya akan memandu Anda melalui bagaimana menerapkan animasi di platform ini. Hasil akhir dari tutorial ini adalah aplikasi wastafel dapur yang mengimplementasikan berbagai jenis animasi. Berikut adalah tampilannya:
Saya akan berasumsi bahwa Anda sudah mengetahui dasar-dasar bekerja dengan React Native, jadi saya tidak akan terlalu banyak menyelidiki kode yang tidak ada hubungannya dengan animasi. Untuk latar belakang lebih lanjut tentang React Native, periksa beberapa tutorial saya yang lain.
ReactHow to Create a News Reader With React Native: Setup and News Item Component
ReactHow to Create a News Reader With React Native: Web Page Component
React NativeHow to Create a Face Detection App With React Native
Kita akan secara khusus bekerja pada platform Android, tetapi kode yang digunakan dalam tutorial ini seharusnya bekerja di iOS juga. Bahkan, jika Anda tidak ingin berurusan dengan rasa sakit saat menyiapkan proyek React Native baru, saya sarankan Anda memeriksa React Native Web Starter. Ini memungkinkan Anda untuk membuat proyek React Native baru yang dapat Anda pratinjau di browser. Ini hadir dengan manfaat karena tidak perlu menyiapkan perangkat, dan reload yang lebih cepat sehingga Anda dapat melihat pratinjau perubahan lebih cepat.
Aplikasi Animasi Pertama Anda
Jika Anda belum melakukannya, buat proyek React Native baru:
1 |
react-native init RNAnimation |
Jika Anda menggunakan React Native Web Starter, berikut ini cara Anda membuat proyek baru:
1 |
git clone https://github.com/grabcode/react-native-web-starter.git RNAnimation |
2 |
cd RNAnimation
|
3 |
rm -rf .git |
4 |
npm install
|
Buka file index.android.js (atau index.web.js), hapus kode default, dan tambahkan yang berikut:
1 |
import React, { Component } from 'react'; |
2 |
import { App } from './app/components/App'; |
3 |
|
4 |
import { |
5 |
AppRegistry, |
6 |
View
|
7 |
} from 'react-native'; |
8 |
|
9 |
class RNAnimation extends Component { |
10 |
render() { |
11 |
return ( |
12 |
<View> |
13 |
<App /> |
14 |
</View> |
15 |
);
|
16 |
}
|
17 |
}
|
18 |
|
19 |
AppRegistry.registerComponent('RNAnimation', () => RNAnimation); |
Jika Anda berada di React Native for Web, Anda dapat melewati langkah di atas karena kode default sudah disiapkan untuk menggunakan komponen Aplikasi.
Buat folder app/components dan di dalam membuat App.js file. Ini akan menjadi file utama yang akan kita kerjakan. Setelah Anda membuat file, Anda dapat melanjutkan dan mengimpor paket yang Anda perlukan untuk keseluruhan proyek.
1 |
import React, { Component } from 'react'; |
2 |
|
3 |
import { |
4 |
Platform, |
5 |
StyleSheet, |
6 |
Text, |
7 |
ScrollView, |
8 |
View, |
9 |
Image, |
10 |
TouchableHighlight, |
11 |
Switch, |
12 |
Dimensions, |
13 |
Animated, |
14 |
Easing, |
15 |
LayoutAnimation, |
16 |
UIManager
|
17 |
} from 'react-native'; |
Jika Anda sudah melakukan semacam pengembangan React Native sebelumnya, Anda seharusnya sudah cukup akrab dengan komponen-komponen berikut. Jika tidak, lihat the React Native API docs.
1 |
Platform, |
2 |
StyleSheet, |
3 |
Text, |
4 |
ScrollView, |
5 |
View, |
6 |
Image, |
7 |
TouchableHighlight, |
8 |
Switch, |
9 |
Dimensions, |
Ini adalah paket yang khusus digunakan untuk menerapkan animasi:
1 |
Animated, |
2 |
Easing, |
3 |
LayoutAnimation, |
4 |
UIManager
|
Berikut adalah gambaran singkat dari masing-masing:
- Animated: memungkinkan kita untuk membuat animasi komponen. React Native memiliki pemisahan yang jelas antara komponen animasi dan statis. Secara khusus, Anda dapat membuat tampilan animasi (
<Animated.View>), teks (<Animated.Text>), dan gambar (<Animated.Image>). - Easing: wadah umum dari nilai konstan untuk memudahkan animasi.
- LayoutAnimation: untuk mengeksekusi berbagai jenis animasi setiap kali tata letak berubah (misalnya ketika status diperbarui).
- UIManager: saat ini, LayoutAnimation masih merupakan fitur eksperimental di Android. Mengimpor UIManager memungkinkan kami untuk mengaktifkannya. Untuk iOS, LayoutAnimation bekerja secara default, sehingga Anda tidak perlu mengimpor
UIManager.
Rotate Animation
Langkah pertama dalam menciptakan animasi adalah untuk menentukan nilai animasi. Hal ini umumnya dilakukan di dalam konstruktor komponen. Dalam kode di bawah ini, kami mendefinisikan nilai animasi baru untuk App component constructor. Perhatikan bahwa nama nilai ini dapat berupa kapan saja asalkan menggambarkan animasi yang ingin Anda buat.
Di React Native, Anda dapat membuat nilai animasi baru dengan memanggil metode Value () di kelas Animated.. Kemudian berikan nilai animasi awal sebagai argumen.
1 |
constructor(props){ |
2 |
super(props); |
3 |
this.spinValue = new Animated.Value(0); |
4 |
}
|
Selanjutnya, buat fungsi yang akan menjalankan animasi putar.
Pada baris pertama, kita perlu mengatur nilai awal dari nilai animasi yang ingin kita kerjakan. Dalam hal ini, kita mengaturnya ke 0..
Selanjutnya, kita membuat animasi waktu baru dengan memanggil fungsi Animated.timing (). Ini menerima nilai animasi saat ini sebagai argumen pertama dan objek yang berisi konfigurasi animasi sebagai yang kedua. Objek harus berisi nilai akhir untuk nilai animasi, durasi (dalam milidetik), dan jenis animasi pelonggaran.
Akhirnya, panggil metode start () untuk memulai animasi.
1 |
spin() { |
2 |
this.spinValue.setValue(0); |
3 |
Animated.timing( |
4 |
this.spinValue, |
5 |
{
|
6 |
toValue: 1, |
7 |
duration: 1500, |
8 |
easing: Easing.linear |
9 |
}
|
10 |
).start(); |
11 |
}
|
Langkah terakhir adalah untuk benar-benar menerapkan animasi. Di dalam metode render () Anda, tentukan bagaimana nilai rotasi akan diubah. Ini dapat dilakukan dengan memanggil fungsi interpolate() ini menerima objek yang berisi inputRange dan outputRange. inputRange adalah sebuah array yang berisi nilai awal dan akhir putaran. outputRange adalah sebuah array yang berisi nilai-nilai aktual rotasi.
Jadi awalnya objek yang akan dianimasikan akan berada pada 0 derajat rotasi, dan nilai akhirnya akan menjadi 360 derajat. Rotasi ini dilakukan selama 1,500 milidetik, sebagaimana didefinisikan sebelumnya dalam konfigurasi animasi.
1 |
const spin = this.spinValue.interpolate({ |
2 |
inputRange: [0, 1], |
3 |
outputRange: ['0deg', '360deg'] |
4 |
});
|
Saat Anda merender komponen, nilai rotasi ditambahkan sebagai transformasi dalam gaya. Jadi jika Anda terbiasa dengan animasi CSS, ini adalah implementasi yang setara dalam React Native.
1 |
return ( |
2 |
<Animated.Image |
3 |
style={[ |
4 |
styles.spinner, |
5 |
{
|
6 |
transform: [ |
7 |
{rotate: spin} |
8 |
]
|
9 |
}
|
10 |
]}
|
11 |
source={{uri: '../../img/loading.png'}} |
12 |
/> |
13 |
);
|
Sekarang setelah Anda mengetahui dasar-dasar pembuatan animasi, mari buat beberapa lagi sehingga Anda tahu cara menerapkan berbagai jenis. Di dalam constructor(), buat objek yang berisi animasi yang akan kami terapkan:
1 |
var animations = [ |
2 |
{
|
3 |
animation: 'spin', |
4 |
enabled: false |
5 |
},
|
6 |
{
|
7 |
animation: 'scale', |
8 |
enabled: false |
9 |
},
|
10 |
{
|
11 |
animation: 'opacity', |
12 |
enabled: false |
13 |
},
|
14 |
{
|
15 |
animation: 'colorChange', |
16 |
enabled: false |
17 |
},
|
18 |
{
|
19 |
animation: 'parallelTranslateX', |
20 |
enabled: false |
21 |
}
|
22 |
];
|
Jangan khawatir jika Anda tidak tahu apa yang dilakukan masing-masing — saya akan memandu Anda melalui semuanya. Yang perlu Anda ketahui untuk saat ini adalah bahwa konfigurasi ini menyatakan apakah animasi saat ini diaktifkan atau tidak. Setelah diinisialisasi, tambahkan larik animations ke status:
1 |
this.state = { |
2 |
animations: animations |
3 |
};
|
Dalam fungsi render () Anda, tambahkan komponen yang akan kita animasikan serta daftar animasi.
1 |
return ( |
2 |
<View style={styles.container}> |
3 |
|
4 |
<Animated.Image |
5 |
style={[ |
6 |
styles.spinner, |
7 |
{
|
8 |
transform: [ |
9 |
{rotate: spin} |
10 |
]
|
11 |
}
|
12 |
]}
|
13 |
source={{uri: '../../img/loading.png'}} |
14 |
/> |
15 |
|
16 |
<Animated.View /> |
17 |
|
18 |
<ScrollView> |
19 |
{this.renderAnimationsList()} |
20 |
</ScrollView> |
21 |
|
22 |
<Animated.View /> |
23 |
|
24 |
<Animated.View /> |
25 |
</View> |
26 |
);
|
Fungsi renderAnimationsList () menampilkan daftar animasi menggunakan komponen Switch dan Teks.
1 |
renderAnimationsList() { |
2 |
return this.state.animations.map((item) => { |
3 |
return ( |
4 |
<View style={styles.item} key={item.animation}> |
5 |
<Switch |
6 |
onValueChange={(value) => this.toggleAnimation(item.animation, value)} |
7 |
style={styles.switch} |
8 |
value={item.enabled} /> |
9 |
<Text style={styles.animation_type}>{item.animation}</Text> |
10 |
</View> |
11 |
);
|
12 |
});
|
13 |
}
|
Switch memungkinkan pengguna untuk mengaktifkan dan menonaktifkan animasi. Setiap kali pengguna membalik tombol, fungsi toggleAnimation () dijalankan. Semua yang dilakukannya adalah menemukan animasi yang dimaksud dan memperbarui nilai properti yang enabled ke nilai yang dipilih. Kemudian memperbarui status dengan nilai-nilai yang diperbarui dan putaran melalui semua animasi, hanya mengeksekusi yang diaktifkan.
1 |
toggleAnimation(animation, value) { |
2 |
var animations = this.state.animations; |
3 |
var index = animations.findIndex((obj) => { |
4 |
return obj.animation == animation; |
5 |
});
|
6 |
|
7 |
animations[index].enabled = value; |
8 |
|
9 |
this.setState({ |
10 |
animations: animations |
11 |
});
|
12 |
|
13 |
animations.forEach((item) => { |
14 |
if(item.enabled){ |
15 |
this[item.animation](); |
16 |
}
|
17 |
});
|
18 |
}
|
Juga tambahkan gaya yang akan digunakan di seluruh aplikasi.
1 |
const styles = StyleSheet.create({ |
2 |
container: { |
3 |
flex: 1, |
4 |
alignItems: 'center', |
5 |
flexDirection: 'column' |
6 |
},
|
7 |
button: { |
8 |
height: 40, |
9 |
backgroundColor: '#eee', |
10 |
justifyContent: 'center', |
11 |
alignItems: 'center', |
12 |
marginTop: 10 |
13 |
},
|
14 |
item: { |
15 |
flex: 2, |
16 |
flexDirection: 'row', |
17 |
height: 50, |
18 |
},
|
19 |
switch: { |
20 |
marginBottom: 10 |
21 |
},
|
22 |
animation_type: { |
23 |
marginLeft: 10 |
24 |
},
|
25 |
spinner: { |
26 |
marginTop: 20, |
27 |
alignSelf: 'center', |
28 |
width: 50, |
29 |
height: 50 |
30 |
},
|
31 |
box: { |
32 |
width: 50, |
33 |
height: 50, |
34 |
zIndex: 100 |
35 |
},
|
36 |
red_box: { |
37 |
backgroundColor: 'red', |
38 |
marginBottom: 20 |
39 |
},
|
40 |
blue_box: { |
41 |
alignSelf: 'flex-start', |
42 |
backgroundColor: 'blue' |
43 |
},
|
44 |
green_box: { |
45 |
alignSelf: 'flex-end', |
46 |
backgroundColor: 'green' |
47 |
},
|
48 |
squares_container: { |
49 |
flexDirection: 'row', |
50 |
flex: 1, |
51 |
flexWrap: 'wrap' |
52 |
},
|
53 |
square: { |
54 |
width: 35, |
55 |
height: 35, |
56 |
backgroundColor: 'lightblue', |
57 |
margin: 10 |
58 |
},
|
59 |
number: { |
60 |
fontSize: 20, |
61 |
fontWeight: 'bold' |
62 |
}
|
63 |
});
|
Skala Animasi
Skala animasi adalah tempat Anda membuat objek lebih besar atau lebih kecil dari pada ukuran aslinya. Mulailah dengan membuat nilai animasi baru dalam konstruktor:
1 |
this.scaleValue = new Animated.Value(0); |
Buat fungsi untuk menganimasikan skala. Ini terlihat mirip dengan fungsi spin (); satu-satunya perbedaan adalah fungsi pelonggaran yang kita gunakan. Di sini kita menggunakan easeOutBack untuk membuat penskalaan lebih cair. Hal ini bermanfaat terutama jika animasi ini dijalankan berulang kali. Jika Anda ingin tahu fungsi pelonggaran apa yang dapat Anda gunakan, periksa easings.net. Semua daftar yang terdaftar di sana dapat digunakan dalam React Native.
1 |
scale () { |
2 |
this.scaleValue.setValue(0); |
3 |
Animated.timing( |
4 |
this.scaleValue, |
5 |
{
|
6 |
toValue: 1, |
7 |
duration: 1500, |
8 |
easing: Easing.easeOutBack |
9 |
}
|
10 |
).start(() => { |
11 |
if(this.state.animations[0].enabled){ |
12 |
this.scale(); |
13 |
}
|
14 |
});
|
15 |
}
|
Hal lain yang baru dalam fungsi di atas adalah kita menyampaikan fungsi sebagai argumen untuk fungsi start (). Fungsi ini dijalankan ketika animasi selesai. Di sini kita memeriksa apakah animasi diaktifkan, dan jika ya, kita memanggil fungsi yang sama lagi. Hal ini memungkinkan kita untuk menjalankan animasi berulang kali selama diaktifkan.
1 |
() => { |
2 |
if(this.state.animations[0].enabled){ |
3 |
this.scale(); |
4 |
}
|
5 |
}
|
Kemudian, dalam fungsi render() Anda, mengkonfigurasi interpolasi skala. Saat ini, kita memiliki tiga nilai untuk input dan output untuk menciptakan efek yang berdenyut, seperti detak jantung. Ini memungkinkan kita untuk membuat animasi skala yang tidak secara tiba-tiba membuat objek lebih besar atau lebih kecil. Rentang output tertinggi adalah 7,sehingga objek akan menjadi tujuh kali lebih besar dari ukuran aslinya.
1 |
const nearFar = this.scaleValue.interpolate({ |
2 |
inputRange: [0, 0.5, 1], |
3 |
outputRange: [1, 7, 1] |
4 |
});
|
Untuk menghemat ruang, cukup tambahkan transformasi scale pada komponen yang sama yang kita gunakan sebelumnya:
1 |
<Animated.Image
|
2 |
style={[ |
3 |
styles.spinner, |
4 |
{
|
5 |
transform: [ |
6 |
{rotate: spin}, |
7 |
{scale: nearFar} |
8 |
]
|
9 |
}
|
10 |
]}
|
11 |
source={{uri: '../../img/loading.png'}} |
12 |
/>
|
Dengan kedua transformasi ditambahkan, Anda sekarang dapat mengaktifkan spin dan skala animasi untuk mengeksekusi mereka pada saat yang bersamaan.
Sekarang Anda harus memperhatikan pola yang memungkinkan kita membuat animasi. Banyak sekali kode yang diulang saat melakukan animasi. Praktik terbaik adalah membuat fungsi yang merangkum kode yang diulang, tetapi untuk menjaga hal-hal sederhana dan mudah dimengerti, mari kita tetap dengan kode mentah untuk sisa animasi.
Animasi Opacity
Sekarang mari kita coba menghidupkan opacity dari suatu komponen. Sekarang Anda harus cukup akrab di mana setiap bagian kode berjalan, jadi saya tidak lagi akan menyebutkan di mana Anda akan menempatkan masing-masing. Tetapi jika Anda bingung, Anda dapat melihat kode di GitHub:
1 |
this.opacityValue = new Animated.Value(0); |
Buat fungsi untuk mengubah opacity. Ketika mengubah opacity, fungsi pelonggaran linear adalah yang paling cocok karena yang paling mudah.
1 |
opacity() { |
2 |
this.opacityValue.setValue(0); |
3 |
Animated.timing( |
4 |
this.opacityValue, |
5 |
{
|
6 |
toValue: 1, |
7 |
duration: 3000, |
8 |
easing: Easing.linear |
9 |
}
|
10 |
).start(() => { |
11 |
if(this.state.animations[2].enabled){ |
12 |
this.opacity(); |
13 |
}
|
14 |
});
|
15 |
}
|
Ubah opacity dari terlihat menjadi transparan dan kemudian terlihat lagi selama tiga detik.
1 |
const opacity = this.opacityValue.interpolate({ |
2 |
inputRange: [0, 0.5, 1], |
3 |
outputRange: [1, 0, 1] |
4 |
});
|
Buat komponen baru yang opasitasnya akan dikontrol:
1 |
<Animated.View style={[ |
2 |
styles.box, {opacity} |
3 |
]}
|
4 |
/>
|
Nilai Warna
Selanjutnya, mari kita coba untuk menganimasikan warna latar belakang dari sebuah komponen:
1 |
this.colorValue = new Animated.Value(0); |
Saat ini, kita telah animating selama lima detik:
1 |
colorChange() { |
2 |
this.colorValue.setValue(0); |
3 |
Animated.timing(this.colorValue, { |
4 |
toValue: 100, |
5 |
duration: 5000 |
6 |
}).start(() => { |
7 |
if(this.state.animations[3].enabled){ |
8 |
this.colorChange(); |
9 |
}
|
10 |
});
|
11 |
}
|
Kita memiliki tiga warna untuk digunakan. Warna awal berwarna kuning, dan kemudian setelah beberapa detik, warnanya akan benar-benar berubah menjadi oranye, lalu menjadi merah. Perhatikan bahwa warna tidak akan berubah secara tiba-tiba; semua warna di antara warna yang Anda tentukan akan ditampilkan juga. React Native secara otomatis menghitung nilai warna antara yang Anda tentukan. Anda dapat membuat durasi lebih lama jika Anda ingin melihat bagaimana warna berubah seiring waktu.
1 |
const colorAnimation = this.colorValue.interpolate({ |
2 |
inputRange: [0, 50, 100], |
3 |
outputRange: ['yellow', 'orange', 'red'] |
4 |
});
|
Sama seperti opacity, nilai interpolasi ditambahkan sebagai gaya:
1 |
<Animated.View style={[ |
2 |
styles.box, {opacity}, |
3 |
{backgroundColor: colorAnimation}, |
4 |
]}
|
5 |
/>
|
Paralel Animasi
Anda dapat mengatakan bahwa kita telah mengeksekusi animasi secara paralel. Tapi itu hanya efek samping dari perubahan yang berbeda yang melekat pada komponen tunggal. Jika Anda ingin menjalankan beberapa animasi sekaligus, Anda perlu menggunakan fungsi paralel () dari API Animasi. Ini menerima array fungsi animasi untuk dieksekusi. Dalam contoh di bawah ini, kita memiliki dua nilai animasi, satu untuk setiap komponen yang ingin kita animasikan.
1 |
this.blue_box_X = new Animated.Value(0); |
2 |
this.green_box_X = new Animated.Value(0); |
Dalam fungsi animasi, kita menetapkan nilai animasi awal seperti biasa. Tetapi di bawahnya, kita menggunakan Animated.parallel () untuk mengelompokkan semua animasi yang ingin kita lakukan. Dalam hal ini, kita hanya memiliki dua animasi waktu, yang dijalankan selama dua detik. Perhatikan juga bahwa kita tidak memanggil metode start () pada setiap animasi. Sebagai gantinya, kitai menggunakannya setelah menyatakan animasi paralel Ini memungkinkan kita untuk memulai animasi secara bersamaan.
1 |
parallelTranslateX() { |
2 |
this.blue_box_X.setValue(0); |
3 |
this.green_box_X.setValue(0); |
4 |
Animated.parallel([ |
5 |
Animated.timing( |
6 |
this.blue_box_X, |
7 |
{
|
8 |
toValue: 1, |
9 |
duration: 2000, |
10 |
easing: Easing.linear |
11 |
}
|
12 |
),
|
13 |
Animated.timing( |
14 |
this.green_box_X, |
15 |
{
|
16 |
toValue: 1, |
17 |
duration: 2000, |
18 |
easing: Easing.linear |
19 |
}
|
20 |
)
|
21 |
]).start(() => { |
22 |
if(this.state.animations[4].enabled){ |
23 |
this.parallelTranslateX(); |
24 |
}
|
25 |
});
|
26 |
}
|
Agar interpolasi masuk akal, periksa terlebih dahulu gaya yang kita tambahkan untuk dua kotak sebelumnya:
1 |
blue_box: { |
2 |
alignSelf: 'flex-start', |
3 |
backgroundColor: 'blue' |
4 |
},
|
5 |
green_box: { |
6 |
alignSelf: 'flex-end', |
7 |
backgroundColor: 'green' |
8 |
},
|
Kotak biru sejajar menggunakan flex-start, yang berarti bahwa itu sejajar ke kiri. Kotak hijau flex-end, yang sejajar ke kanan. (Setidaknya, ini adalah cara kerjanya jika penampung memiliki flexDirection of column. Kalau tidak, itu cerita yang berbeda.)
Dengan pengetahuan ini, kita sekarang dapat memindahkan kotak ke mana pun kita mau. Tetapi untuk tutorial ini, yang kita ingin lakukan hanyalah memindahkan kotak ke posisi awal yang berlawanan. Jadi kotak biru bergerak ke kanan, dan kotak hijau bergerak ke kiri. Ini adalah dimana dimensi perangkat data masuk. Kita menggunakan width perangkat untuk menghitung nilai interpolasi akhir sehingga kotak tidak akan keluar dari batas.
1 |
var {width} = Dimensions.get('window'); |
Dalam hal ini, kita hanya mengurangi 50 dari lebar perangkat untuk membuat kotak biru ke kanan. Dan untuk kotak hijau, kita mengonversi lebar perangkat ke ekuivalen negatifnya sehingga bergerak ke kiri. Anda mungkin bertanya-tanya, mengapa 50? Hal ini karena ukuran setiap kotak adalah 50. Kotak masih akan keluar dari batas jika kita tidak mengurangi ukurannya sendiri dari lebar perangkat.
1 |
const blue_box_translateX = this.blue_box_X.interpolate({ |
2 |
inputRange: [0, 1], |
3 |
outputRange: [0, width - 50], |
4 |
});
|
5 |
|
6 |
const green_box_translateX = this.green_box_X.interpolate({ |
7 |
inputRange: [0, 1], |
8 |
outputRange: [0, -width + 50], |
9 |
});
|
Terakhir, tambahkan komponen yang akan dianimasikan. Transformasi yang dimaksud adalah translateX, yang memungkinkan kita untuk mengubah posisi objek dalam sumbu X untuk memindahkannya secara horizontal.
1 |
<Animated.View style={[ |
2 |
styles.box, |
3 |
styles.blue_box, |
4 |
{
|
5 |
transform: [ |
6 |
{
|
7 |
translateX: blue_box_translateX |
8 |
}
|
9 |
]
|
10 |
}
|
11 |
]}
|
12 |
/>
|
13 |
|
14 |
<Animated.View style={[ |
15 |
styles.box, |
16 |
styles.green_box, |
17 |
{
|
18 |
transform: [ |
19 |
{
|
20 |
translateX: green_box_translateX |
21 |
}
|
22 |
]
|
23 |
}
|
24 |
]}
|
25 |
/>
|
Selain animasi paralel, ada juga animasi urutan dan stagger.
Implementasi ini mirip dengan animasi paralel dalam arti bahwa mereka semua menerima serangkaian animasi yang akan dieksekusi. Tetapi faktor yang menentukan untuk animasi urutan adalah bahwa animasi yang Anda berikan dalam larik akan dijalankan secara berurutan. Anda juga dapat menambahkan penundaan opsional untuk setiap animasi jika Anda mau.
Di sisi lain, animasi stagger adalah kombinasi paralel dan urutan animasi. Hal ini karena hal itu memungkinkan Anda untuk menjalankan animasi dalam paralel dan urutan. Berikut adalah pen which demonstrates stagger animations.
Tata letak Animasi
Alat lain yang React Native sediakan untuk mengimplementasikan animasi adalah LayoutAnimation. Ini memungkinkan Anda menganimasikan pandangan ke posisi baru ketika tata letak berikutnya terjadi. Perubahan tata letak biasanya terjadi ketika Anda memperbarui keadaan. Hasil ini memiliki komponen UI tertentu baik ditambahkan, diperbarui, atau dihapus dari layar.
Ketika peristiwa ini terjadi, LayoutAnimation menangani komponen yang terkait. Misalnya, dalam aplikasi daftar agenda, ketika Anda menambahkan item to-do baru, secara otomatis akan menambahkan animasi musim semi untuk memunculkan item baru.
Mari tambahkan LayoutAnimation ke aplikasi kitchen sink. Seperti yang disebutkan sebelumnya, Anda harus mengimpor LayoutAnimation, Platform, dan UIManager ke dalam aplikasi. Kemudian, di constructor(), tambahkan kode untuk mengaktifkan LayoutAnimation di Android:
1 |
if (Platform.OS === 'android'){ |
2 |
UIManager.setLayoutAnimationEnabledExperimental(true); |
3 |
}
|
(Di iOS, LayoutAnimation seharusnya berfungsi secara default. Jika Anda menggunakan React Native untuk Web, LayoutAnimation is not supported, jadi Anda harus memiliki aplikasi yang diekspor ke Android atau iOS, dan coba dari sana.)
Selanjutnya, tepat di bawah ScrollView yang berisi daftar animasi, tambahkan tombol untuk membuat kotak yang akan ditampilkan di layar:
1 |
<View>
|
2 |
<TouchableHighlight style={[styles.button]} onPress={this.addSquares.bind(this)}> |
3 |
<Text>Add Squares</Text> |
4 |
</TouchableHighlight>
|
5 |
</View>
|
Pada dasarnya apa yang akan dilakukan adalah menghasilkan tiga kotak kecil setiap kali pengguna mengetuk tombol Add Squares.
Berikut adalah fungsi untuk menambahkan kotak:
1 |
addSquares() { |
2 |
LayoutAnimation.configureNext(LayoutAnimation.Presets.spring); |
3 |
var squares = this.state.squares; |
4 |
this.setState({ |
5 |
squares: squares + 3 |
6 |
});
|
7 |
}
|
Idenya adalah untuk memanggil LayoutAnimation.configureNext () sebelum Anda memperbarui keadaan. Ini menerima animasi yang ingin Anda gunakan. Di luar kotak, LayoutAnimation hadir dengan tiga preset: linear, spring, dan easeInEaseOut Ini seharusnya bekerja untuk sebagian besar kasus, tetapi jika Anda perlu menyesuaikan animasi, Anda dapat membaca dokumentasi on LayoutAnimation untuk mempelajari cara membuat sendiri..
Di dalam fungsi render (), buat for loop yang akan merender kuadrat. Jumlah kuadrat yang dihasilkan tergantung pada nilai squares saat ini di negara bagian.
1 |
var squares = []; |
2 |
for(var i = 0; i < this.state.squares; i++){ |
3 |
squares.push(this.renderSquare(i)); |
4 |
}
|
Fungsi renderSquare () adalah yang benar-benar merender kuadrat:
1 |
renderSquare(key) { |
2 |
return ( |
3 |
<Animated.View key={key} style={styles.square} /> |
4 |
);
|
5 |
}
|
Perpustakaan Pihak Ketiga
React Native Animated API sangat kuat dan dapat disesuaikan, tetapi seperti yang Anda lihat sejauh ini, ini datang dengan kerugian karena harus menulis banyak kode hanya untuk mengimplementasikan animasi yang sangat sederhana. Jadi di bagian akhir ini, saya akan memperkenalkan Anda kepada dua perpustakaan pihak ketiga yang akan memungkinkan Anda untuk menerapkan animasi umum dengan kode yang lebih sedikit.
Bilangan Animasi
Jika Anda membuat aplikasi yang perlu menganimasikan angka (mis. Aplikasi penghitung waktu atau penghitung), Anda dapat menggunakan fungsi setInterval () yang sudah ada untuk memperbarui status pada interval yang ditetapkan dan kemudian menerapkan animasi sendiri.
Atau jika Anda mau, Anda bisa menggunakan Animate Number library. Hal ini memungkinkan Anda untuk dengan mudah menerapkan animasi nomor, seperti mengubah transisi setiap kali jumlah diperbarui. Anda dapat menginstalnya dengan perintah berikut:
1 |
npm install react-native-animate-number --save |
Setelah terinstal, impor ke aplikasi Anda:
1 |
import AnimateNumber from 'react-native-animate-number'; |
Kemudian menggunakannya sebagai komponen:
1 |
<AnimateNumber style={styles.number} value={100} countBy={1} /> |
Apakah kode di atas adalah menghitung hingga 100 mulai dari 0.
General-Purpose Animations
Jika Anda ingin menerapkan animasi tujuan umum seperti yang ditawarkan oleh animate.css library, ada pustaka setara untuk React Native yang disebut Animatable. Anda dapat menginstalnya dengan perintah berikut:
1 |
npm install react-native-animatable --save |
Setelah terinstal, impor dengan kode berikut:
1 |
import * as Animatable from 'react-native-animatable'; |
Berikut adalah contoh menggunakan kode yang kita tambahkan sebelumnya untuk animasi tata letak kita. Semua yang harus Anda lakukan adalah menggunakan <Animatable.View>bukan <Animated.View>dan kemudian menambahkan ref sehingga kita dapat merujuk kepada komponen ini menggunakan kode JavaScript.
1 |
<Animatable.View style={styles.squares_container} ref="squares"> |
2 |
{squares}
|
3 |
</Animatable.View>
|
Selanjutnya, buat metode resetSquares ().. Ini akan menghapus semua kotak yang saat ini pada layar. Gunakan this.refs.squares untuk merujuk ke kotak kontainer, dan kemudian panggil fungsi zoomOutUp () untuk menganimasikannya keluar dari tampilan menggunakan zoom out animation dengan arah atas. Dan jangan lupa untuk memperbarui keadaan setelah animasi selesai. Ini adalah pola umum ketika menerapkan animasi. Lakukan animasi sebelum memperbarui keadaan.
1 |
resetSquares() { |
2 |
this.refs.squares.zoomOutUp(1500).then(() => { |
3 |
this.setState({ |
4 |
squares: 0 |
5 |
});
|
6 |
});
|
7 |
}
|
Hal yang sama juga berlaku dengan metode addSquares(). Tapi kali ini, kita menghidupkan kotak kontainer kembali. Dan bukan menjalankan animasi pertama, kita melakukannya tepat setelah keadaan telah diperbarui. Hal ini karena wadah kotak yang benar-benar tidak ditampilkan kecuali memiliki seorang anak. Jadi di sini kita sedang melanggar aturan bahwa animasi harus dilaksanakan pertama.
1 |
addSquares() { |
2 |
LayoutAnimation.configureNext(LayoutAnimation.Presets.spring); |
3 |
var squares = this.state.squares; |
4 |
|
5 |
if(squares == 0){ |
6 |
this.setState({ |
7 |
squares: squares + 3 |
8 |
}, () => { |
9 |
this.refs.squares.zoomInDown(1); |
10 |
});
|
11 |
}else{ |
12 |
this.setState({ |
13 |
squares: squares + 3 |
14 |
});
|
15 |
}
|
16 |
}
|
Kesimpulan
That's it! Dalam artikel ini, Anda telah belajar dasar-dasar menciptakan animasi di React Native. Animasi dapat diimplementasikan menggunakan API animasi, LayoutAnimations, dan pustaka pihak ketiga.
Seperti yang Anda lihat, membuat animasi dapat mengambil cukup banyak kode, bahkan untuk yang sederhana seperti animasi skala. Ini hadir dengan manfaat memungkinkan Anda untuk menyesuaikan animasi dengan cara apapun yang Anda inginkan.
Namun, jika Anda tidak ingin berurusan dengan kode terlalu banyak, Anda dapat selalu menggunakan pustaka pihak ketiga React Native yang khusus diciptakan untuk dengan mudah menerapkan animasi. Anda dapat menemukan kode sumber lengkap yang digunakan dalam tutorial ini di GitHub.
Bacaan lebih lanjut
- React Native Animations Using the Animated API: panduan ramah-untuk pemula tentang penerapan berbagai jenis animasi di React Native. Tutorial ini mencakup urutan dan goyangan animasi jika Anda ingin tahu lebih banyak tentang mereka.
- React Native Animation Book: masih dalam pengerjaan tetapi masih merupakan sumber yang berharga. Ini memiliki hampir apa pun yang Anda ingin tahu tentang animasi React Native — sebagai contoh, jika Anda ingin menghidupkan sesuatu pada pengguna gulir, atau jika Anda ingin menyeret objek di sekitar.
- React Native Docs - Animations: jika Anda ingin mengetahui detail spesifik tentang bagaimana mengimplementasikan animasi di React Native.
- Animation in Mobile UX Design: tidak persis terkait dengan React Native, tetapi untuk animasi aplikasi seluler secara umum. Ini adalah bacaan yang baik untuk para perancang dan pengembang UX, untuk memiliki gagasan umum tentang cara menampilkan animasi yang bermakna bagi pengguna.
Akhirnya, jika Anda ingin mempelajari lebih lanjut tentang animasi CSS, lihat beberapa kursus video kami.
