Cara Membuat Animasi Teks di React Native – React Native adalah kerangka kerja pengembangan aplikasi seluler yang populer yang memungkinkan pengembang untuk membuat aplikasi seluler dengan menggunakan JavaScript. Salah satu fitur menarik dari React Native adalah kemampuannya untuk membuat animasi yang menarik pada aplikasi seluler. Dalam tutorial ini, kita akan membahas cara membuat animasi teks di React Native menggunakan library Animatable.
baca juga: 4 Media Interaktif
Cara Membuat Animasi Teks di React Native
Menginstall Library Animatable
Langkah pertama adalah menginstall library Animatable yang akan digunakan untuk membuat animasi teks di React Native. Gunakan perintah berikut untuk menginstall library Animatable:
Mengimport Animatable
Setelah menginstall library Animatable, import library tersebut ke dalam file yang ingin kita gunakan untuk membuat animasi teks. Berikut adalah contoh kode untuk mengimport library Animatable:
Menggunakan Animatable pada Teks
Setelah mengimport Animatable, kita dapat menggunakannya pada teks yang ingin kita animasikan. Berikut adalah contoh kode untuk membuat animasi teks sederhana menggunakan Animatable:
import React from ‘react’;
import {StyleSheet, Text, View} from ‘react-native’;
import * as Animatable from ‘react-native-animatable’;
const App = () => {
return (
<View style={styles.container}>
<Animatable.Text animation=”fadeIn”>Hello World</Animatable.Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: ‘center’,
justifyContent: ‘center’,
},
});
export default App;
Pada contoh kode di atas, kita menggunakan komponen Animatable.Text untuk membuat teks yang dapat dianimasikan. Properti animation digunakan untuk menentukan jenis animasi yang ingin digunakan. Pada contoh kode di atas, kita menggunakan animasi fadeIn.
Menggunakan Animatable dengan Gesture Handler
Animatable juga dapat digunakan bersama dengan Gesture Handler untuk membuat animasi teks yang lebih kompleks. Berikut adalah contoh kode untuk membuat animasi teks yang dapat digeser menggunakan Gesture Handler dan Animatable:
import React, {useRef} from ‘react’;
import {StyleSheet, Text, View} from ‘react-native’;
import {PanGestureHandler} from ‘react-native-gesture-handler’;
import Animated from ‘react-native-reanimated’;
import * as Animatable from ‘react-native-animatable’;
const App = () => {
const translationY = useRef(new Animated.Value(0)).current;
const onGestureEvent = Animated.event([{nativeEvent: {translationY: translationY}}], {useNativeDriver: true});
return (
<View style={styles.container}>
<PanGestureHandler onGestureEvent={onGestureEvent}>
<Animated.View style={[styles.box, {transform: [{translateY: translationY}]}]}>
<Animatable.Text animation=”pulse” iterationCount=”infinite”>
Swipe me up!
</Animatable.Text>
</Animated.View>
</PanGestureHandler>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: ‘center’,
justifyContent: ‘center’,
},
box: {
width: 200,
height: 200,
backgroundColor: ‘blue’,
alignItems: ‘center’,
justifyContent:’center’
}
})
