Rive: apa itu, alat animasi untuk Flutter dan iOS

Apa itu Rive?

Rive (sebelumnya Rive.app, didirikan tahun 2016) — adalah editor grafis dan runtime lintas platform untuk animasi vektor interaktif. Berbeda dengan After Effects + Bodymovin (Lottie), Rive menyediakan lingkungan terpadu: desainer menggambar, menganimasi, dan mengonfigurasi logika transisi langsung di editor. Hasilnya diekspor ke file biner .riv dengan ukuran 2 hingga 50 KB tergantung kompleksitasnya.

Perbedaan utama Rive dari solusi lain — State Machine. Ini adalah graf visual di mana node adalah animasi (Idle, Hover, Press, Active) dan transisi di antaranya dipicu oleh pemicu (Touch, Drag, Boolean). Pengembang dalam kode hanya mengirim pemicu, dan RiveRuntime sendiri yang memutuskan animasi mana yang akan diputar dan bagaimana beralih dengan mulus di antaranya. Menurut Rive Engineering (2026), rata-rata animasi .riv dengan State Machine berukuran 15 KB — 5–10 kali lebih kecil dari file video yang setara.

Rive Runtime tersedia untuk Flutter, iOS (Swift), Android (Kotlin/Java), Web (WASM) dan React. Rendering dilakukan melalui Skia (Flutter/Web), Core Graphics (iOS) atau Canvas (Android). Rive mendukung animasi bentuk (Knob, Slider, Button dengan geometri kustom), yang memungkinkan pembuatan komponen UI yang sepenuhnya dianimasi, bukan hanya animasi dekoratif.

Rive vs Lottie: perbandingan pendekatan

Rive dan Lottie menyelesaikan tugas yang berbeda. Lottie adalah pemutar untuk animasi siap pakai dari After Effects, optimal untuk efek dekoratif pasif. Rive adalah alat untuk membuat animasi interaktif dengan logika sendiri, di mana animasi bereaksi terhadap tindakan pengguna. Pilihan tergantung pada tingkat interaktivitas yang diperlukan.

Kapan memilih Rive: tombol interaktif dengan respons klik, elemen game (karakter dengan status), sakelar dengan animasi, ikon dinamis yang bereaksi terhadap status. Kapan memilih Lottie: preloader, like, layar sambutan, animasi aksen tanpa logika. Untuk proyek Flutter, Rive adalah pilihan utama berkat integrasi native dengan Skia dan pipeline rendering Flutter.

Integrasi Rive di Flutter (Dart)

Di Flutter RiveAnimation — widget utama untuk menyematkan file .riv. Tersedia melalui paket rive (resmi). RiveAnimation mendukung argumen: artboard (memilih papan), animation (nama animasi), fit, alignment, controllers (untuk State Machine). Untuk scene interaktif digunakan StateMachineController.

import 'package:rive/rive.dart';

// Pemutaran animasi sederhana
RiveAnimation.asset(
  'assets/animations/button.riv',
  artboard: 'Button',
  animations: const ['idle'],
  fit: BoxFit.contain,
)

// StateMachineController dengan pemicu
class InteractiveButton extends StatefulWidget {
  @override
  State<InteractiveButton> createState() => _InteractiveButtonState();
}

class _InteractiveButtonState extends State<InteractiveButton> {
  StateMachineController? _controller;
  SMIInput<bool>? _isPressed;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (_) => _isPressed?.value = true,
      onTapUp: (_) => _isPressed?.value = false,
      child: RiveAnimation.asset(
        'assets/animations/button.riv',
        fit: BoxFit.contain,
        onInit: (artboard) {
          _controller = StateMachineController.fromArtboard(
            artboard, 'State Machine 1',
          );
          if (_controller != null) {
            artboard.addController(_controller!);
            _isPressed = _controller!.findInput<bool>('isPressed');
          }
        },
      ),
    );
  }
}

Praktik terbaik Flutter: muat file .riv secara asinkron melalui RiveAnimation.asset (AssetBundle bawaan). Untuk ListView gunakan satu StateMachineController yang dibagi antar elemen. Rive tidak lagi memerlukan impor terpisah — rive v0.12+ menyertakan semua fungsi. Untuk animasi kustom, kendalikan RiveAnimationController secara langsung — ini menyediakan akses ke animasi, campuran (blend) dan kecepatan.

Integrasi Rive di iOS (Swift)

Di iOS RiveRuntime diwakili oleh kelas RiveView (UIKit) dan RiveViewModel (SwiftUI). Pustaka dihubungkan melalui Swift Package Manager. RiveView merender file .riv melalui Core Graphics dan Metal, mendukung 120 FPS pada layar ProMotion. Untuk State Machine digunakan RiveStateMachineLayer dengan pengikatan ke pemicu.

import RiveRuntime

// SwiftUI: RiveViewModel dengan animasi
struct RiveAnimationView: View {
    @State private var isPressed = false

    var body: some View {
        RiveViewModel(fileName: "button").view()
            .frame(width: 200, height: 60)
            .gesture(
                DragGesture(minimumDistance: 0)
                    .onChanged { _ in
                        if !isPressed {
                            isPressed = true
                            // Pemicu melalui State Machine
                        }
                    }
                    .onEnded { _ in
                        isPressed = false
                    }
            )
    }
}

// UIKit: RiveView dengan kontrol manual
let riveView = RiveView()
riveView.configure(fileName: "loading", extension: "riv")
riveView.fit = .contain
riveView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(riveView)

// Manajemen State Machine
riveView.triggerInput(named: "startAnimation")

Praktik terbaik iOS: gunakan RiveViewModel untuk SwiftUI — secara otomatis mengelola siklus hidup. Untuk UIKit berlangganan ke RiveViewDelegate untuk melacak peristiwa. Rive mengonsumsi lebih sedikit CPU daripada Lottie di iOS berkat rendering melalui Core Graphics. Untuk animasi di NavigationView/UICollectionView gunakan prefetching melalui RiveFile.preload().

Integrasi Rive di Android (Kotlin)

Di Android RiveAnimationView — View utama untuk menyematkan animasi .riv. Pustaka app.rive:rive-android dihubungkan melalui Gradle. RiveAnimationView mewarisi View dan merender melalui Canvas dengan dukungan Hardware Acceleration. State Machine dikelola melalui setTriggers dan setInputs.

// build.gradle.kts
implementation("app.rive:rive-android:0.9.0")

// XML layout
<app.rive.RiveAnimationView
    android:id="@+id/riveView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:rive_file="@raw/mascot"
    app:rive_artboard="Mascot"
    app:rive_animation="idle" />

// Kotlin: manajemen State Machine
import app.rive.riveandroid.RiveAnimationView
import app.rive.riveandroid.StateMachineInput

val riveView = findViewById<RiveAnimationView>(R.id.riveView)
riveView.post {
    riveView.setTriggers("hover") "> Mengirim trigger ke State Machine
    riveView.setInput("speed", 1.5f)
    riveView.setInput("isActive", true)
    riveView.play()
}

// Penanganan penyelesaian animasi
riveView.addListener(object : RiveAnimationView.RiveListener() {
    override fun onAnimationCompleted(animationName: String) {
        Log.d("Rive", "Animation $animationName completed")
    }
})

Praktik terbaik Android: muat file .riv melalui res/raw (sumber daya bawaan) atau assets (muat melalui jaringan). RiveAnimationView secara otomatis menangani siklus hidup — jangan panggil play/pause di onResume/onPause secara manual. Untuk animasi di RecyclerView gunakan setOnScrollListener untuk menjeda pemutaran saat scroll. Menurut dokumentasi Rive (2026), file .riv hingga 100 KB diurai dalam 5–10 ms pada perangkat kelas menengah.

State Machine: logika transisi di Rive

State Machine — kemampuan utama Rive yang membedakannya dari format animasi pasif. Ini adalah graf visual di mana simpul adalah status (animasi) dan tepi adalah transisi yang diaktifkan oleh pemicu. State Machine dibuat di Rive Editor: desainer menambahkan node animasi, menghubungkannya dengan garis dan menetapkan pemicu (Touch, Boolean, Number). Pengembang hanya perlu mengirim pemicu ini dari kode.

// Flutter: kontrol penuh atas State Machine
import 'package:rive/rive.dart';

class RiveStateMachineWidget extends StatefulWidget {
  @override
  State<RiveStateMachineWidget> createState() => _RiveStateMachineWidgetState();
}

class _RiveStateMachineWidgetState extends State<RiveStateMachineWidget> {
  Artboard? _artboard;
  StateMachineController? _controller;
  SMIInput<bool>? _isHovered;
  SMIInput<double>? _progress;

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: (_) => _isHovered?.value = true,
      onExit: (_) => _isHovered?.value = false,
      child: RiveAnimation.asset(
        'assets/interactive_icon.riv',
        onInit: (artboard) {
          _controller = StateMachineController.fromArtboard(
            artboard, 'State Machine 1',
          );
          artboard.addController(_controller!);
          _isHovered = _controller!.findInput<bool>('isHovered');
          _progress = _controller!.findInput<double>('progress');
        },
      ),
    );
  }
}

// Mengirim nilai numerik
SMIInput<double> speedInput = controller.findInput('speed');
speedInput?.value = scrollPosition;

Jenis pemicu: Boolean — sakelar (true/false), Number — nilai numerik (0.0–1.0 atau rentang arbitrer), Trigger — impuls satu kali (tekanan tombol). Di Rive Editor Anda dapat mengonfigurasi penghalusan transisi (Transition Duration) — nilai yang disarankan 100–300 ms untuk kehalusan. Untuk status UI yang kompleks gunakan State Machine bersarang (Nested State Machines) — setiap bagian animasi dikelola secara independen. Rive State Machine bekerja di semua platform tanpa perubahan pada file .riv — logika transisi tertanam dalam file, bukan dalam kode aplikasi.