Chuyển tới nội dung chính

Các Thực Hành Tốt Nhất

Rive hiển thị đồ họa tương tác rất hiệu quả, nhưng các file được tối ưu kém có thể tiêu tốn quá nhiều bộ nhớ hoặc CPU — đặc biệt trên các thiết bị cũ. Hướng dẫn này tóm tắt những điều quan trọng nhất cần lưu ý.

mẹo

Hãy kiểm thử hoạt ảnh của bạn trên các thiết bị mục tiêu sớm và thường xuyên.

Mẹo Trong Lúc Thiết Kế​

Giữ Tài Nguyên Nhỏ Gọn​

Hình ảnh, âm thanh và font chữ thường là nguyên nhân chính khiến file nặng.

thông tin

Chỉ những tài nguyên được sử dụng trong artboard mới được đưa vào file .riv khi xuất. Các tài nguyên không dùng trong bảng Assets sẽ không làm tăng dung lượng file.

Font chữ — File font thường chứa hàng nghìn ký tự mà bạn không cần. Chỉ chọn các glyph (hình dạng của từng ký tự trong font) cần thiết cho văn bản của bạn để giảm dung lượng khi xuất.

Hình ảnh — Điều chỉnh kích thước ảnh phù hợp với cách chúng sẽ hiển thị thực tế trên màn hình. Đừng dùng ảnh 8192×7022 cho một ô 100×100. Ảnh lớn vẫn chiếm bộ nhớ dù đã được nén.

Nén ảnh — Nén hình ảnh trực tiếp trong Rive editor. Sử dụng định dạng WebP để đạt cân bằng tốt nhất giữa chất lượng và dung lượng file.

Đồ họa vector — Chỉ dùng số điểm path (vertices) vừa đủ. Các vector do AI tạo ra hoặc chuyển đổi từ ảnh raster (chuyển từ ảnh pixel sang định dạng vector) thường có quá nhiều điểm.

Nhập Từ Lottie​

Tạo lại hoạt ảnh trực tiếp trong Rive sẽ cho file nhỏ hơn so với chuyển đổi từ Lottie. Nếu bạn nhập file Lottie, hãy chuyển ảnh PNG sang WebP và chỉ xuất các glyph bạn cần.

Blend Mode Trên Web​

Blend mode (cách pha trộn màu sắc chồng lên nhau, như "multiply" hoặc "screen") tốn kém tài nguyên trên web vì chúng đòi hỏi các bước xử lý bổ sung ở phía sau. Hãy dùng blend mode một cách tiết kiệm trong các dự án web.

Mẹo Về Artboard​

  • Clipping: Xóa clip khỏi artboard chính khi không có gì bên ngoài vùng Rive instance cần hiển thị lúc runtime (khi ứng dụng của bạn đang thực sự chạy cho người dùng). Thay vào đó, áp dụng clip cho các đối tượng cụ thể.
  • Artboard không dùng đến: Các artboard không được dùng vẫn được tải vào bộ nhớ. Hãy xóa bất kỳ artboard nào không sử dụng.

Hoạt Ảnh Chờ (Idle)​

Với các trạng thái không có chuyển động, hãy dùng hoạt ảnh one-shot (hoạt ảnh phát một lần rồi dừng). Khi không có hoạt ảnh nào đang lặp, Rive runtime có thể tự tạm dừng và giảm đáng kể mức sử dụng CPU. Điều này hữu ích cho các icon và nút chỉ hoạt ảnh khi người dùng tương tác.

Solo​

Một Solo ẩn các đối tượng anh em khi một đối tượng đang hoạt động — hữu ích để chuyển đổi giữa các trạng thái. Với các skin phức tạp (bộ kiểu dáng thay đổi ngoại hình của một nhân vật hoặc đối tượng) không cần liên kết bone (gắn các phần mesh vào bộ xương để chúng chuyển động cùng nhau), hãy dùng Data Binding (hệ thống kết nối dữ liệu trực tiếp với thuộc tính hiển thị) thay thế. Data Binding hiệu quả hơn vì nó chỉ render những gì cần thiết.

Blend State​

Đảm bảo các blend state chuyển sang trạng thái khác hoặc trạng thái thoát khi hoàn thành. Hãy hình dung như một cửa quay — nếu nó không bao giờ dừng, nó sẽ tiếp tục tiêu thụ năng lượng. Một blend state đang hoạt động sẽ giữ runtime chạy ngay cả khi không còn cần thiết nữa. Việc đặt điều kiện thoát rõ ràng sẽ giảm mức sử dụng CPU không cần thiết.

Mẹo Lúc Runtime​

Các mẹo dưới đây dành cho các nhà phát triển tích hợp Rive trong code.

Tải Tài Nguyên Riêng Lẻ (Out-of-Band)​

Tải hình ảnh, font chữ và âm thanh riêng lẻ lúc runtime thay vì nhúng chúng vào file .riv. Điều này mang lại:

  • Dung lượng file .riv nhỏ hơn
  • Tài nguyên có thể dùng chung cho nhiều file Rive
  • Tài nguyên có thể được preload và cache trước khi hiển thị
  • Tài nguyên có thể được hoán đổi tùy theo độ phân giải màn hình

Cache File .riv Của Bạn​

Nếu cùng một file Rive xuất hiện ở nhiều nơi trên trang hoặc trong ứng dụng, hãy cache file đó. Parse file một lần và tái sử dụng kết quả — điều này nhanh hơn nhiều so với việc giải mã lại mỗi khi một instance mới khởi động.

Tạm Dừng Khi Ra Khỏi Màn Hình​

Tạm dừng một Rive instance sẽ giảm mức sử dụng CPU xuống gần bằng không. Các thời điểm nên tạm dừng:

  1. Ra khỏi màn hình — Tạm dừng khi đồ họa cuộn ra ngoài vùng nhìn thấy. Tiếp tục khi nó quay lại.
  2. Giảm chuyển động — Kiểm tra cài đặt prefers-reduced-motion (cài đặt trình duyệt mà một số người dùng bật lên để giảm hoạt ảnh) của người dùng và tạm dừng hoặc đặt autoplay: false (tùy chọn trong code để tắt tự động phát) tương ứng.
  3. Trạng thái chờ — Tạm dừng khi đang chờ tương tác của người dùng, chẳng hạn state machine đang nghỉ.

Thiết Bị Cấu Hình Thấp​

Hãy kiểm thử trên phần cứng cấu hình thấp hơn nếu đối tượng người dùng của bạn bao gồm các thiết bị cũ. Cân nhắc tạo một artboard dự phòng với hoạt ảnh được giản lược, và chuyển sang artboard đó lúc runtime khi thiết bị kém mạnh hơn.