Web (JavaScript)

Runtime web Rive adalah library JavaScript open-source. Di baliknya menggunakan WebAssembly (format biner yang dikompilasi dan berjalan di browser dengan kecepatan mendekati native), sehingga performanya tinggi. Library ini memungkinkan Anda memutar animasi Rive di halaman web mana pun. Mendukung WebGL2 (API browser untuk rendering grafis yang dipercepat perangkat keras — membuat animasi tetap mulus menggunakan GPU perangkat), Canvas, dan opsi rendering ringan.

Instalasi

Pilih metode pengiriman yang sesuai dengan setup proyek Anda.

Via script tag (CDN):

<script src="https://unpkg.com/@rive-app/webgl2@2"></script>

Ini membuat objek global rive tersedia di halaman.

Via package manager:

npm install @rive-app/webgl2

Paket yang tersedia:

• @rive-app/webgl2 — Fitur lengkap, menggunakan Rive Renderer (disarankan). Rive Renderer adalah mesin grafis berkualitas tinggi milik Rive yang dibangun di atas WebGL2. Ini memberikan output visual terkaya dan dukungan fitur penuh.
• @rive-app/canvas — Hanya Canvas, tanpa Rive Renderer
• @rive-app/canvas-lite — Bundle terkecil, dukungan fitur terbatas

Pengaturan Dasar

Anda membutuhkan tiga hal: elemen <canvas>, instans Rive, dan path ke file .riv.

<canvas id="rive-canvas" width="500" height="500"></canvas>

import Rive from '@rive-app/webgl2';

const r = new Rive({
  src: 'https://cdn.rive.app/animations/vehicles.riv',
  canvas: document.getElementById('rive-canvas'),
  autoplay: true,
  stateMachines: 'bumpy',
  onLoad: () => {
    // Dipanggil ketika file selesai dimuat
    r.resizeDrawingSurfaceToCanvas();
  },
});

tip

Panggil resizeDrawingSurfaceToCanvas() setelah load untuk mencocokkan canvas dengan rasio piksel perangkat agar rendering tetap tajam di layar high-DPI.

Pembersihan

Ketika Anda tidak lagi memerlukan instans Rive, panggil cleanup() untuk melepaskan memori:

r.cleanup();

Ini membebaskan objek WebAssembly yang mendasarinya dan mencegah kebocoran memori.

Opsi Pemuatan

Gunakan metode yang sesuai dengan cara file .riv Anda dikirimkan:

Metode	Kapan Digunakan
URL string (src)	File .riv yang di-host
Aset bundle statis	Dibundel bersama aplikasi
Fetch → ArrayBuffer (potongan data biner mentah yang dimuat dari URL atau API)	Muat dari API / sumber dinamis
Gunakan ulang file yang dimuat	Performa terbaik saat menggunakan file yang sama di beberapa tempat

Langkah Selanjutnya

• Pemutaran State Machine — Kontrol state machine dari JavaScript
• Runtime React — Komponen React dan hook untuk Rive
• Referensi Parameter — Semua opsi konstruktor Rive