Komponen
Komponen adalah artboard yang dapat digunakan kembali (kanvas mandiri yang bisa Anda tempatkan berkali-kali). Ubah artboard sumber sekali saja, dan setiap salinannya akan diperbarui secara otomatis.
Membuat Komponen
Pilih sebuah artboard lalu klik ikon Komponen di Inspector untuk menandainya sebagai komponen.
Pintasan keyboard:
- Shift + N — aktifkan/nonaktifkan komponen
- Cmd/Ctrl + Alt/Option + K — (sama dengan pintasan komponen di Figma)
- Shift + Alt/Option + N — kembalikan ke artboard biasa
Hanya artboard yang ditandai sebagai komponen yang akan diekspor ke file .riv. Jika Anda perlu mengakses sebuah artboard saat runtime (saat aplikasi Anda benar-benar berjalan untuk pengguna), tandai sebagai komponen.
Menggunakan Komponen
Pilih Component Tool (N) dari Toolbar. Klik pada Stage untuk menempatkan sebuah instance (salinan dari komponen). Sebuah menu akan muncul untuk memilih komponen yang tersedia.
Anda juga bisa memilih komponen terlebih dahulu menggunakan dropdown di samping ikon toolbar, lalu klik untuk menempatkannya.
Mengonfigurasi Instance
Pilih sebuah instance yang sudah ditempatkan untuk mengonfigurasinya di Inspector.
State Machines
Tetapkan state machine (grafik logika yang mengontrol cara animasi diputar dan merespons input) ke instance untuk pemutaran interaktif.
Menambahkan Animasi
Klik tombol + di Inspector untuk menambahkan animasi ke instance. Tersedia dua tipe:
Simple — Memutar animasi langsung pada timeline. Anda bisa mengatur titik awal dan menyesuaikan kecepatan pemutaran.
Remap — Waktu dinyatakan sebagai persentase (0% = awal, 100% = akhir), sehingga Anda bisa memperpanjang, mempersingkat, atau membalik animasi.
Nilai Mix
Nilai Mix mengontrol cara animasi berbaur ketika lebih dari satu animasi aktif — anggap saja seperti pengatur volume untuk setiap animasi. Nilainya berkisar dari 0% (tidak berkontribusi) hingga 100% (berkontribusi penuh).
Untuk memutar satu animasi secara bersih, atur nilai mix-nya ke 100% dan semua animasi lainnya ke 0%.
Mode Instance
Setiap instance komponen berjalan dalam salah satu dari tiga mode. Bayangkan seperti aturan tata letak: mode ini memberi tahu komponen bagaimana mengatur ukuran dan posisinya di dalam parent-nya.
Node (default)
Digunakan untuk tata letak non-responsif. Komponen diskalakan menggunakan properti Scale-nya.
Leaf
Komponen mengatur ukuran dan posisi dirinya relatif terhadap layout atau artboard parent-nya. Gunakan mode Leaf ketika komponen perlu mengisi container-nya namun tidak menggunakan sistem layout Rive secara internal.
Opsi Leaf Fit: Fill · Contain · Cover · Fit Width · Fit Height · None · Scale Down
Perataan Leaf: Grid 3×3 (Center, Top Left, Bottom Right, dll.), atau gunakan nilai X/Y numerik untuk kontrol yang lebih presisi.
Layout
Gunakan ini ketika komponen Anda memuat layout Rive yang perlu reflow (memposisikan ulang konten secara otomatis saat ukuran container berubah) seiring perubahan ukuran parent. Artboard mengubah ukurannya untuk menyesuaikan konten — bukan diskalakan.
Tipe Skala Layout: Fixed · Hug · Fill