Components
Component là một artboard có thể tái sử dụng (một canvas độc lập mà bạn có thể đặt nhiều lần). Chỉ cần thay đổi artboard nguồn một lần, và mọi bản sao sẽ tự động được cập nhật.
Tạo Component
Chọn một artboard và nhấp vào biểu tượng Component trong Inspector để đánh dấu nó là component.
Phím tắt:
- Shift + N — bật/tắt component
- Cmd/Ctrl + Alt/Option + K — (giống phím tắt component của Figma)
- Shift + Alt/Option + N — chuyển về artboard thông thường
Chỉ các artboard được đánh dấu là component mới được xuất vào file .riv. Nếu bạn cần truy cập một artboard ở runtime, hãy đánh dấu nó là component.
Sử Dụng Components
Chọn Component Tool (N) từ Toolbar. Nhấp vào Stage để đặt một instance (bản sao của component). Một menu sẽ hiển thị các component có sẵn để bạn chọn.
Bạn cũng có thể chọn component trước bằng dropdown bên cạnh biểu tượng toolbar, sau đó nhấp để đặt.
Cấu Hình Instance
Chọn một instance đã đặt để cấu hình trong Inspector.
State Machines
Gán một state machine (đồ thị logic điều khiển cách các hoạt ảnh phát và phản hồi với đầu vào) cho instance để phát tương tác.
Thêm Hoạt Ảnh
Nhấp nút + trong Inspector để thêm hoạt ảnh vào instance. Có hai loại:
Simple — Phát hoạt ảnh trực tiếp trên timeline. Bạn có thể đặt keyframe cho điểm bắt đầu và điều chỉnh tốc độ phát.
Remap — Thời gian được biểu diễn theo phần trăm (0% = đầu, 100% = cuối), cho phép bạn kéo dài, rút ngắn hoặc đảo ngược hoạt ảnh.
Mix Value
Mix Value kiểm soát cách các hoạt ảnh pha trộn khi có nhiều hơn một hoạt ảnh đang hoạt động — hãy nghĩ nó như một thanh điều chỉnh âm lượng cho từng hoạt ảnh. Giá trị chạy từ 0% (không đóng góp) đến 100% (đóng góp toàn phần).
Để phát một hoạt ảnh rõ ràng, đặt mix của hoạt ảnh đó thành 100% và tất cả các hoạt ảnh còn lại thành 0%.
Chế Độ Instance
Mỗi component instance chạy ở một trong ba chế độ. Hãy nghĩ chúng như các quy tắc bố cục: chúng cho component biết cách tự định cỡ và định vị trong phần tử cha.
Node (mặc định)
Dùng cho các bố cục không responsive. Component tỉ lệ theo thuộc tính Scale của nó.
Leaf
Component tự định cỡ và định vị so với bố cục cha hoặc artboard của nó. Dùng chế độ Leaf khi component cần lấp đầy container nhưng không sử dụng hệ thống layout của Rive bên trong.
Tùy chọn Leaf Fit: Fill · Contain · Cover · Fit Width · Fit Height · None · Scale Down
Căn chỉnh Leaf: Lưới 3×3 (Center, Top Left, Bottom Right, v.v.), hoặc dùng giá trị X/Y số để kiểm soát chính xác hơn.
Layout
Dùng chế độ này khi component chứa các Rive layout cần reflow (tự động sắp xếp lại nội dung khi kích thước container thay đổi) theo kích thước cha. Artboard thay đổi kích thước để sắp xếp lại nội dung — nó không tỉ lệ.
Loại Scale Layout: Fixed · Hug · Fill