Animated API: apa itu, kemampuan pustaka dan prinsip kerja

Apa itu Animated API di React Native

Animated API adalah pustaka animasi deklaratif yang tertanam di inti React Native, dirancang untuk membuat animasi yang mulus dan berkinerja tinggi di aplikasi seluler. Berbeda dengan animasi CSS dalam pengembangan web, Animated API bekerja langsung dengan thread UI native melalui jembatan JavaScript atau driver native. Pustaka ini dibangun di sekitar konsep Animated.Value — wadah yang menyimpan nilai numerik dan secara otomatis mendaftarkan semua komponen yang bergantung padanya terhadap perubahan. Saat nilai diubah melalui Animated.timing atau Animated.spring, pustaka menghitung status antara tanpa me-render ulang komponen React, yang sangat penting untuk mempertahankan 60 FPS. Animated API mendukung semua properti gaya, termasuk transform, opacity, width, height, top, left, dan backgroundColor. Dokumentasi React Native merekomendasikan Animated API untuk semua skenario animasi yang memerlukan kinerja tinggi dan perilaku yang dapat diprediksi di kedua platform.

Cara kerja Animated API: Value, timing, dan spring

Dasar Animated API adalah Animated.Value, wadah nilai numerik yang diinisialisasi melalui konstruktor new Animated.Value(0). Setiap Animated.Value menyimpan angka awal dan menyediakan metode animasi: timing, spring, dan decay. Metode timing membuat animasi linier atau easing dengan parameter duration, delay, dan easing. Metode spring mengimplementasikan animasi pegas fisik dengan parameter friction, tension, dan velocity. Metode decay membuat animasi dengan inersia dan redaman — berguna untuk swipe dan scroll. Semua metode mengembalikan objek Animated.Composite yang dapat dijalankan melalui start() dan dihentikan melalui stop(). Animasi dijalankan di thread terpisah: saat menggunakan useNativeDriver = true, perhitungan terjadi di thread UI native, thread JavaScript tetap bebas untuk memproses peristiwa dan logika.

Animated.timing: konfigurasi durasi dan easing

Animated.timing adalah metode animasi dasar dengan durasi yang dapat dikontrol. Menerima konfigurasi: toValue, duration (default 500ms), easing (default Easing.linear), dan delay. Fungsi easing dari modul Easing memungkinkan akselerasi non-linear: Easing.bezier, Easing.elastic, Easing.bounce. Untuk animasi dengan kecepatan seragam gunakan Easing.linear, untuk akselerasi alami — Easing.inOut. Penting: Animated.timing menjamin animasi akan selesai tepat di toValue dalam waktu yang ditentukan, terlepas dari beban perangkat.

Animated.spring: animasi fisik

Animated.spring mengimplementasikan model animasi pegas berdasarkan hukum Hooke. Parameter friction (gesekan) mengontrol jumlah osilasi: semakin tinggi friction, semakin cepat berhenti. Parameter tension (ketegangan) menentukan kekakuan pegas: tension tinggi mempercepat gerakan. Parameter velocity mengatur kecepatan awal untuk animasi dengan inersia — penting untuk animasi yang mengikuti gestur pengguna. Animated.spring tidak memiliki durasi tetap — animasi berakhir ketika kecepatan dan amplitudo mencapai nilai ambang.

Animated.View, Animated.Text, dan komponen lainnya

Animated API menyediakan empat komponen animasi bawaan: Animated.View, Animated.Text, Animated.ScrollView, dan Animated.Image. Masing-masing adalah pembungkus di atas komponen native yang sesuai yang mendukung pengiriman Animated.Value dalam properti gaya. Animated.View adalah komponen yang paling sering digunakan, menerima props yang sama dengan View biasa, tetapi dengan dukungan untuk nilai animasi di style. Animated.Text berguna untuk animasi warna teks atau spasi antar huruf. Animated.ScrollView memungkinkan animasi scrollTo dan contentOffset. Animated.Image mendukung transparansi dan skala animasi saat memuat gambar. Jika Anda perlu menganimasi komponen lain, gunakan Animated.createAnimatedComponent(MyComponent).

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

const FadeInView = () => {
  const opacity = useRef(new Animated.Value(0)).current;

  const fadeIn = () => {
    Animated.timing(opacity, {
      toValue: 1,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  };

  return (
    View
      Animated.View { style: [{ opacity }] }
      Button title="Fade In" onPress={fadeIn}
  );
};

Sistem interpolasi: dari angka ke warna dan transformasi

Interpolasi adalah mekanisme untuk mengonversi rentang numerik input Animated.Value menjadi nilai output dari tipe lain. Metode interpolate menerima konfigurasi dengan inputRange (array nilai input) dan outputRange (array nilai output). Tipe outputRange: angka (koordinat, transparansi), string (sudut rotasi dengan 'deg'), warna hex ('#ff0000'), objek transformasi. Interpolasi mendukung easing dan extrapolate — perilaku di luar rentang yang ditentukan (clamp, extend, identity). Misalnya, pada gestur drag, posisi jari dari 0 hingga 200 dapat diubah menjadi transparansi dari 1 hingga 0, menciptakan efek memudar saat swipe. Sistem interpolasi memungkinkan pembuatan animasi multi-langkah yang kompleks: nilai 0-0.5-1.0 dapat berubah menjadi kuning-oranye-merah.

const spinValue = new Animated.Value(0);

Animated.timing(spinValue, {
  toValue: 1,
  duration: 3000,
  easing: Easing.linear,
  useNativeDriver: true,
}).start();

const spin = spinValue.interpolate({
  inputRange: [0, 1],
  outputRange: ['0deg', '360deg'],
});

Komposisi animasi: urutan dan paralelisme

Animated API mendukung tiga mode komposisi animasi: Animated.sequence, Animated.parallel, dan Animated.stagger. Animated.sequence menjalankan animasi satu per satu: setiap animasi berikutnya dimulai setelah animasi sebelumnya selesai. Animated.parallel menjalankan semua animasi secara bersamaan dengan satu callback penyelesaian bersama. Animated.stagger menjalankan animasi dengan penundaan antara awal masing-masing — awal tertunda, berguna untuk membuat efek gelombang. Komposisi dapat disarangkan satu sama lain: sequence dari grup parallel atau parallel dari sequence. Ini memungkinkan pembuatan rangkaian yang kompleks: animasi kemunculan elemen dengan penundaan, slide-in paralel dengan fade-in, kemudian sequence dari bounce dan shake.

Animated.sequence([
  Animated.timing(fadeAnim, {
    toValue: 1,
    duration: 500,
    useNativeDriver: true,
  }),
  Animated.parallel([
    Animated.timing(scaleAnim, {
      toValue: 1.1,
      duration: 200,
      useNativeDriver: true,
    }),
    Animated.spring(colorAnim, {
      toValue: 1,
      friction: 4,
      useNativeDriver: true,
    }),
  ]),
]).start();

useNativeDriver dan kinerja animasi

useNativeDriver adalah opsi konfigurasi animasi yang memindahkan seluruh logika animasi dari thread JavaScript ke thread UI native. Tanpa useNativeDriver, animasi dijalankan melalui jembatan JavaScript: setiap perubahan nilai dikirim ke thread native, yang menyebabkan penundaan saat thread JS dibebani dengan operasi asinkron. Dengan useNativeDriver = true, Animated.Value diperbarui langsung di sisi native, dan thread JavaScript tetap bebas untuk memproses peristiwa, permintaan API, dan rekonsiliasi React. Keterbatasan: useNativeDriver hanya mendukung properti non-layout — opacity, transform, backgroundColor (melalui PlatformColor). Untuk properti layout (width, height, top, left) diperlukan NativeAnimatedModule atau LayoutAnimation. Menurut React Native 0.76, semua properti animasi didukung melalui driver native, kecuali yang berbasis layout. Mode useNativeDriver direkomendasikan untuk semua animasi yang memungkinkan — ini meningkatkan FPS dari 30-40 menjadi 60 yang stabil.

Animasi dengan gestur: PanResponder dan Gesture Handler

PanResponder adalah sistem bawaan React Native untuk pemrosesan gestur yang terintegrasi dengan baik dengan Animated API. PanResponder menyediakan callback onPanResponderMove dan onPanResponderRelease, di mana Animated.Value dapat diperbarui berdasarkan posisi jari. Untuk gestur yang lebih kompleks — swipe, pinch, rotation — gunakan pustaka react-native-gesture-handler, yang bekerja secara sinkron dengan animasi dan memastikan 60 FPS bahkan dengan gestur multi-jari. Gesture Handler menyediakan Animated.event — metode yang menghubungkan gestur langsung ke Animated.Value tanpa pemrosesan callback manual. Kombinasi Gesture Handler + Animated API adalah standar industri untuk animasi interaktif di aplikasi React Native.

Animated.event: menghubungkan gestur ke nilai

Animated.event adalah metode yang menghubungkan peristiwa native (misalnya gestureEvent) langsung ke Animated.Value. Berbeda dengan pemrosesan manual dalam callback, Animated.event bekerja secara sinkron di thread native dan tidak memerlukan jembatan JavaScript untuk setiap bingkai. Ini memberikan animasi yang mulus bahkan pada swipe cepat. Animated.event menerima array pemetaan, di mana setiap elemen menghubungkan bidang peristiwa ke Animated.Value. Akses bersarang didukung: Animated.event([{ nativeEvent: { translationX: xValue } }]).

Contoh kode dengan Animated API

Mari kita lihat tiga contoh praktis penggunaan Animated API di proyek React Native. Contoh pertama — animasi kemunculan kartu dengan urutan opacity + translateY. Contoh kedua — animasi pulsasi tombol menggunakan spring. Contoh ketiga — elemen drag interaktif dengan PanResponder. Semua contoh menggunakan useNativeDriver = true dan sesuai dengan praktik terbaik React Native 0.76.

const CardWithAnimation = () => {
  const anim = useRef(new Animated.Value(0)).current;

  React.useEffect(() => {
    Animated.spring(anim, {
      toValue: 1,
      friction: 6,
      tension: 40,
      useNativeDriver: true,
    }).start();
  }, []);

  const translateY = anim.interpolate({
    inputRange: [0, 1],
    outputRange: [50, 0],
  });

  return (
    Animated.View {
      style: [{ opacity: anim, transform: [{ translateY }] }]
    }
  );
};

Animasi pulsasi melalui spring

Animasi spring menciptakan efek pulsasi alami berkat model pegas fisik. Pengaturan friction rendah (2-4) dan tension tinggi (100-150) memberikan osilasi lembut yang mereda secara alami. Gunakan Animated.loop untuk pulsasi tak terbatas dengan siklus sequence: scale → 1.2, scale → 1.0. Pulsasi diterapkan untuk indikator pemuatan, notifikasi, dan tombol aksen.