Lewati ke konten utama

Praktik Terbaik

Rive menjalankan grafis interaktif secara efisien, tetapi file yang tidak dioptimalkan dapat menggunakan terlalu banyak memori atau CPU — terutama pada perangkat lama. Panduan ini membahas hal-hal terpenting yang perlu Anda perhatikan.

tip

Uji animasi Anda pada perangkat target sejak awal dan secara berkala.

Tips Saat Desain​

Jaga Ukuran Aset Tetap Kecil​

Gambar, audio, dan font biasanya menjadi penyebab utama ukuran file yang besar.

info

Hanya aset yang digunakan dalam artboard yang akan disertakan dalam file .riv yang diekspor. Aset yang tidak digunakan di panel Assets tidak menambah ukuran file.

Font — File font sering mengandung ribuan karakter yang tidak Anda butuhkan. Pilih hanya glyph (bentuk karakter individual dalam sebuah font) yang diperlukan untuk teks Anda agar ukuran ekspor lebih kecil.

Gambar — Sesuaikan dimensi gambar dengan ukuran tampilannya di layar. Jangan gunakan gambar berukuran 8192×7022 di slot berukuran 100×100. Gambar berukuran besar tetap menggunakan memori meskipun sudah dikompresi.

Kompresi — Kompres gambar langsung di editor Rive. Gunakan format WebP untuk keseimbangan terbaik antara kualitas dan ukuran file.

Seni vektor — Gunakan hanya titik jalur (vertex) sebanyak yang diperlukan. Vektor hasil AI atau konversi dari raster (ditelusuri dari gambar piksel ke format vektor) sering memiliki terlalu banyak titik.

Mengimpor dari Lottie​

Membuat ulang animasi langsung di Rive menghasilkan file yang lebih kecil dibandingkan mengonversinya dari Lottie. Jika Anda mengimpor file Lottie, konversi gambar PNG ke WebP dan ekspor hanya glyph yang Anda butuhkan.

Blend Mode di Web​

Blend mode (cara mencampur warna yang saling tumpang tindih, seperti "multiply" atau "screen") berdampak besar pada performa di web karena membutuhkan langkah pemrosesan tambahan di balik layar. Gunakan blend mode secara hemat dalam proyek web.

Tips Artboard​

  • Clipping: Hapus clip dari artboard utama jika tidak ada yang ditampilkan di luar instance Rive saat runtime (ketika aplikasi Anda sedang berjalan untuk pengguna). Terapkan clip pada objek tertentu saja.
  • Artboard yang tidak digunakan: Artboard yang tidak digunakan tetap dimuat ke memori. Hapus artboard yang tidak aktif digunakan.

Animasi Idle​

Untuk kondisi di mana tidak ada yang bergerak, gunakan animasi one-shot (animasi yang diputar sekali lalu berhenti). Ketika tidak ada animasi looping yang berjalan, Rive runtime dapat menjeda dirinya sendiri dan mengurangi penggunaan CPU secara signifikan. Ini sangat membantu untuk ikon dan tombol yang hanya beranimasi saat interaksi.

Solos​

Sebuah Solo menyembunyikan objek-objek saudara ketika salah satu aktif — berguna untuk beralih antar kondisi. Untuk skin kompleks (kumpulan gaya visual yang mengubah tampilan karakter atau objek) yang tidak memerlukan bone binding (menghubungkan bagian mesh ke kerangka agar bergerak bersama), gunakan Data Binding (sistem yang menghubungkan data Anda langsung ke properti visual) sebagai gantinya. Data Binding lebih efisien karena hanya merender apa yang dibutuhkan.

Blend State​

Pastikan blend state bertransisi ke state lain atau exit state setelah selesai. Bayangkan seperti pintu putar — jika tidak pernah berhenti, ia terus mengonsumsi energi. Blend state yang aktif terus menjalankan runtime meskipun sudah tidak diperlukan. Memberikannya exit yang jelas akan mengurangi penggunaan CPU yang tidak perlu.

Tips Runtime​

Tips berikut ditujukan untuk developer yang mengintegrasikan Rive dalam kode.

Muat Aset Secara Terpisah (Out-of-Band)​

Muat gambar, font, dan audio secara terpisah saat runtime alih-alih menyematkannya dalam file .riv. Ini memberikan Anda:

  • Ukuran file .riv yang lebih kecil
  • Aset yang dapat dibagikan di beberapa file Rive
  • Aset yang dapat di-preload dan di-cache sebelum ditampilkan
  • Aset yang dapat diganti berdasarkan resolusi layar

Cache File .riv Anda​

Jika file Rive yang sama muncul di beberapa tempat pada sebuah halaman atau aplikasi, cache file tersebut. Parse file sekali dan gunakan kembali hasilnya — ini jauh lebih cepat daripada mendekodenya setiap kali instance baru dimulai.

Jeda Saat di Luar Layar​

Menjeda instance Rive akan menurunkan penggunaan CPU-nya mendekati nol. Waktu yang tepat untuk menjeda:

  1. Di luar layar — Jeda ketika grafis keluar dari tampilan saat discroll. Lanjutkan ketika kembali terlihat.
  2. Reduced motion — Periksa pengaturan prefers-reduced-motion (pengaturan browser yang diaktifkan sebagian pengguna untuk mengurangi animasi) pengguna dan jeda atau atur autoplay: false (opsi kode untuk menonaktifkan putar otomatis) sesuai kebutuhan.
  3. Kondisi idle — Jeda saat menunggu interaksi pengguna, seperti state machine yang sedang diam.

Perangkat Kelas Bawah​

Uji pada perangkat dengan spesifikasi rendah jika audiens Anda mencakup pengguna dengan perangkat lama. Pertimbangkan untuk membuat artboard alternatif dengan animasi yang disederhanakan, lalu ganti ke artboard tersebut saat runtime ketika perangkat kurang bertenaga.