Tutorial

Bermain Animasi Dengan React Native

By

|

By

Animasi tidak melulu soal film kartun atau anime yang tayang di media seperti kita ketahui, baik itu televisi maupun YouTube. Dalam pengembangan perangkat lunak, animasi memberikan bumbu yang menggurihkan fungsionalitas software itu sendiri. Ibarat ayam goreng, animasi adalah kulit tepung goreng yang disukai banyak orang. Nah, kali ini saya akan membahas secuil remahan tentang animasi dan spesifik pada platform React Native yang sedang memanas di dunia teknologi. Dengan begitu, software buatan anda akan disukai oleh banyak orang.

Animasi, dalam pengertian sederhananya, adalah object yang bergerak. Dalam React Native, object yang bisa kita buat untuk bergerak adalah viewable component. Kita bisa membuat object yang semula tampak menjadi tak tampak, berpindah secara vertikal maupun horizontal, hingga mengubah ukurannya. Dengan begini, saya harap para pembaca sudah ada gambaran akan membuat object seperti apa dan bagaimana animasinya.

Kita akan memulai dengan yang paling sederhana, menggerakkan object secara vertikal (dari atas ke bawah dan sebaliknya). Dalam React, ada fungsi setState yang berfungsi untuk me-render ulang komponen. Ini cara yang paling sederhana untuk menggerakkan komponen dengan bantuan setInterval. Coba ubah file App.js seperti dibawah ini.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      y: 0
    }
  }
  componentDidMount() {
    setInterval(() => {
      this.setState({
        y: this.state.y + 10
      })
    }, 100);
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={{position:'absolute', top: this.state.y}}>Look I'm moving</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'flex-start',
  },
});

Jika anda familiar dengan fungsi setInterval dan position yang mirip di dalam CSS, diatas adalah cara yang paling sederhana untuk implementasi keduanya. Selamat anda sudah menganimasikan suatu objek. Yay! Namun, ini adalah implementasi terburuk sebuah animasi React dan React Native. Kenapa? Berikut ini akan saya informasikan alasannya.

1.gif

Dalam screenshot diatas, anda bisa melihat bahwa FPS dari JavaScript Thread berada di bawah 50fps. Ini membuktikan bahwa cara kita untuk menggerakkan suatu objek tidak efisien. Apakah kita harus menyerah dan berharap ada sentuhan magis dari dewa? Tidak berlebihan seperti itu. Ada cara yang lebih praktis dari React Native untuk kasus seperti ini. Kita akan memakai object Animated.

Animated adalah objek khusus yang memang dibuat untuk animasi. Dalam objek animated ini, ada viewable component bawaaan yang bisa kita animasikan, seperti Text dan View. Apa yang perlu kita ubah pertama adalah import Animated dan mengganti Text menjadi Animated.Text.

import { StyleSheet, Text, View, Animated } from 'react-native'; // Lihat ada penambahan Animated

Ubah juga pada method render() hingga terlihat seperti ini

render() {
  return (
    <View style={styles.container}>
      <Animated.Text style={{position:'absolute', top: this.state.y}}>Look I'm moving</Animated.Text>
    </View>
  );
}

We’re not done yetAnimated.Text tidak akan berguna dengan baik apabila kita hanya mengganti component saja. Kita juga harus mengganti cara kita menggerakkan objek tersebut. Kita bisa memakai objek Animated.timing untuk menggerakkan satu atau beberapa objek. Pada method constructor, kita akan mengubahnya seperti ini.

constructor(props) {
  super(props)
  this.state = {
    y: new Animated.Value(0)
  }
}

Karena kita sudah mengubah hal diatas, isi dari componentDidMount kini menjadi useless. Mari kita sesuaikan seperti dibawah.

componentDidMount() {
  Animated.timing(this.state.y, {
    toValue: 600,
    duration: 5 * 1000 // miliseconds
  }).start();
}

Nah, coba reload aplikasi react native anda. Apakah berhasil? Of course, it will give you an error. Kenapa? Hasil dari Animated.Value bukanlah sebuah angka, melainkan objek. Property y pada attribute style hanya menerima angka. Should you give up animation now? Ah jangan mendramatisir. Cukup sosial media dengan kumpulan hoaxnya yang melengkapi hidup anda dengan drama. Ada atribut lain yang bisa kita pakai untuk dikombinasikan dengan Animated: transform. Karena kita ingin menggerakkan dari atas ke bawah, maka yang kita pakai adalah transform dengan property translateY. Kira-kira kode anda akan seperti ini.

render() {
  return (
    <View style={styles.container}>
      <Animated.Text style={{transform: [{translateY: this.state.y}]}}>Look I'm moving</Animated.Text>
    </View>
  );
}

Setelah anda kompilasi jadi satu, kira-kira kode anda akan seperti berikut:

import React from 'react';
import { StyleSheet, Text, View, Animated } from 'react-native';

export default class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      y: new Animated.Value(0)
    }
  }
  componentDidMount() {
    Animated.timing(this.state.y, {
      toValue: 600,
      duration: 5 * 1000 // miliseconds
    }).start();
  }
  render() {
    return (
      <View style={styles.container}>
        <Animated.Text style={{transform: [{translateY: this.state.y}]}}>Look I'm moving</Animated.Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'flex-start',
  },
});

Meskipun this.state.y memiliki nilai objek, objek Animated.Text ini memiliki mekanisme sendiri untuk mengubah objek Animated.Value menjadi sebuah angka. Sekarang jalankan kembali kode anda setelah melakukan perubahan diatas. Does that looks like this?

2.gif

FPS sudah berada diatas 50 dan itu berarti animasi buatan kita cukup bagus. Selamat! Anda telah mempelajari satu remahan Animasi. Dari sini anda bisa mempelajari hal lain seperti Interpolasi Animasi hingga Animasi Gradasi Warna.

Referensi:

  • http://facebook.github.io/react-native/releases/0.48/docs/animated.html#animated
  • https://facebook.github.io/react-native/docs/transforms.html
  • https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

Source Code:

  • https://github.com/refactory-id/react-native-animation-start

PS: Anda juga bisa mempelajari hal diatas dari silabus kami dengan menjadi bagian dari keluarga Refactory sebagai siswa. Klik tombol Apply untuk lebih lanjut.

Hubungkan dengan kami

Ikuti refactory

Case Studies

Tag

Animasi, Coding, Programming, Reach Native

Artikel Terkait

Lihat lebih banyak artikel bagus dari kategori ini!

No posts found.

×