Listeners
Listeners cho phép bạn thêm các hành vi tương tác — click, hover, kéo thả — trực tiếp trong Rive mà không cần viết code. Một Listener theo dõi hành động của người dùng và phản hồi bằng cách thay đổi thuộc tính View Model (một vùng chứa lưu trữ dữ liệu của ứng dụng — được định nghĩa trên trang Data Binding), kích hoạt sự kiện, hoặc di chuyển các đối tượng.
Listeners nằm bên trong một State Machine (hãy hình dung state machine như một sơ đồ luồng quyết định animation nào sẽ phát). Mở một state machine để thêm và quản lý chúng.
Cấu Trúc Của Listener
Mỗi Listener có ba phần:
- Target — Shape hoặc group đóng vai trò là vùng nhận tương tác. Bất kỳ thao tác con trỏ nào trên object này đều kích hoạt Listener.
- Condition — Loại sự kiện cần lắng nghe.
- Action — Điều xảy ra khi condition được đáp ứng.
Thêm Listener
Click nút + bên dưới State Machine Graph và chọn Listener. Cấu hình Target, Condition và Action của nó trong Inspector.
Điều Kiện Listener
Pointer Event
| Điều kiện | Kích hoạt khi |
|---|---|
| Pointer Down | Con trỏ được nhấn bên trong target |
| Pointer Up | Con trỏ được thả bên trong target |
| Pointer Enter | Con trỏ đi vào vùng target |
| Pointer Exit | Con trỏ rời khỏi vùng target |
| Pointer Move | Con trỏ di chuyển trong vùng target |
| Click | Chuỗi nhấn-rồi-thả hoàn chỉnh bên trong target |
Điều Kiện Dựa Trên Dữ Liệu
| Điều kiện | Kích hoạt khi |
|---|---|
| Listen for Event | Một named event kích hoạt trên Component target |
| View Model Property Change | Một thuộc tính View Model được chọn thay đổi giá trị |
Action Của Listener
| Action | Tác dụng |
|---|---|
| View Model Change | Đặt thuộc tính View Model về một giá trị cụ thể, hoặc sao chép giá trị từ thuộc tính khác. Có thể dùng converter (một quy tắc biến đổi giá trị trước khi sử dụng — ví dụ, chuyển một số thành cờ đúng/sai) để chuyển đổi giá trị. |
| Report Event | Kích hoạt một named event khi condition được thỏa mãn. |
| Align Target | Di chuyển một object theo vị trí X/Y của con trỏ — hữu ích cho tương tác kéo thả hoặc cursor follower. |
Ví Dụ: Button Hover
Một button điển hình có ba state (Idle, Hovered, Clicked) và hai listener:
- Pointer Enter → Idle đặt
isHovered = true, thúc đẩy chuyển tiếp sang state Hovered. - Pointer Exit đặt
isHovered = false, quay trở về Idle.
Tài liệu tham khảo đầy đủ về conditions, actions và các pattern tương tác phức tạp của Listener.
Listeners hoạt động bên trong State Machines — tìm hiểu toàn bộ mô hình state machine.