Lewati ke konten utama

Web — Pemutaran State Machine

State machine (grafik logika yang menentukan animasi mana yang diputar berdasarkan kondisi tertentu) di Rive dapat dikendalikan langsung dari JavaScript. Bayangkan seperti pengontrol lampu lalu lintas — ia berjalan di latar belakang, memantau sinyal, dan berpindah antar status secara otomatis. Halaman ini membahas pola kontrol yang paling umum digunakan.

Putar Otomatis State Machine​

Atur autoplay: true untuk memulai state machine begitu file selesai dimuat.

tip

Catatan: halaman ini menggunakan CDN global (rive.Rive). Jika Anda menginstal via npm dan menggunakan import Rive from '@rive-app/webgl2', gunakan new Rive({...}) sebagai gantinya.

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

Putar, Jeda, dan Hentikan​

Gunakan metode play, pause, dan stop untuk mengontrol pemutaran secara manual.

const r = new rive.Rive({
  src: 'https://cdn.rive.app/animations/vehicles.riv',
  canvas: document.getElementById('canvas'),
  stateMachines: 'bumpy',
});

// Panggil kapan saja sesuai kebutuhan:
r.play();
r.pause();
r.stop();

Reset State Machine​

Panggil reset() untuk menghapus artboard dan state machine yang sedang berjalan, lalu memulai ulang dari awal. Berikan opsi yang sama seperti yang Anda berikan pada konstruktor.

r.reset({
  stateMachines: 'bumpy',
  autoplay: true,
});

Lihat Rive Parameters untuk semua field RiveResetParameters yang tersedia.

Input​

Input state machine adalah nilai yang Anda set dari kode untuk menggerakkan transisi — seperti tombol-tombol pada panel kontrol yang memberi tahu animasi apa yang harus dilakukan selanjutnya. Tipe yang umum digunakan:

  • Boolean — nilai true/false, misalnya isHovered
  • Number — nilai numerik, misalnya speed
  • Trigger — dipicu sekali dan direset otomatis
onLoad: () => {
  const inputs = r.stateMachineInputs('bumpy');
  const speedInput = inputs.find(i => i.name === 'Speed');
  speedInput.value = 5;
}

Mendengarkan Event​

Rive dapat mengirimkan event bernama dari sebuah state machine (sinyal yang dikirim animasi kembali ke kode Anda). Gunakan onEvent untuk meresponsnya.

r.on(rive.EventType.RiveEvent, (event) => {
  console.log('Rive event:', event.data.name);
});