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

Web — Phát State Machine

Một state machine (đồ thị logic quyết định animation nào sẽ phát dựa trên các điều kiện) trong Rive có thể được điều khiển trực tiếp từ JavaScript. Hãy hình dung nó như một bộ điều khiển đèn giao thông — nó hoạt động ở nền, lắng nghe tín hiệu, và tự động chuyển đổi giữa các trạng thái. Trang này trình bày các mẫu điều khiển phổ biến nhất.

Tự động phát State Machine​

Đặt autoplay: true để khởi động state machine ngay khi tệp được tải.

mẹo

Lưu ý: trang này sử dụng CDN global (rive.Rive). Nếu bạn cài qua npm và dùng import Rive from '@rive-app/webgl2', hãy dùng new Rive({...}) thay thế.

const r = new rive.Rive({
  src: 'https://cdn.rive.app/animations/vehicles.riv',
  canvas: document.getElementById('canvas'),
  autoplay: true,
  stateMachines: 'bumpy',
  onLoad: () => {},
});

Phát, Tạm dừng và Dừng​

Sử dụng các phương thức play, pause, và stop để điều khiển việc phát theo cách thủ công.

const r = new rive.Rive({
  src: 'https://cdn.rive.app/animations/vehicles.riv',
  canvas: document.getElementById('canvas'),
  stateMachines: 'bumpy',
});

// Later, trigger these however you like:
r.play();
r.pause();
r.stop();

Đặt lại State Machine​

Gọi reset() để hủy artboard và state machine hiện tại rồi bắt đầu lại từ đầu. Truyền vào các tùy chọn giống như khi bạn khởi tạo constructor.

r.reset({
  stateMachines: 'bumpy',
  autoplay: true,
});

Xem Rive Parameters để biết tất cả các trường RiveResetParameters khả dụng.

Inputs​

Inputs của state machine là các giá trị mà code của bạn thiết lập để điều khiển các chuyển đổi — giống như các núm xoay trên bảng điều khiển cho animation biết phải làm gì tiếp theo. Các loại phổ biến:

  • Boolean — cờ đúng/sai, ví dụ: isHovered
  • Number — giá trị số, ví dụ: speed
  • Trigger — kích hoạt một lần rồi tự động reset
onLoad: () => {
  const inputs = r.stateMachineInputs('bumpy');
  const speedInput = inputs.find(i => i.name === 'Speed');
  speedInput.value = 5;
}

Lắng nghe Events​

Rive có thể phát ra các event được đặt tên từ state machine (tín hiệu mà animation gửi lại cho code của bạn). Đăng ký với onEvent để phản hồi chúng.

r.on(rive.EventType.RiveEvent, (event) => {
  console.log('Rive event:', event.data.name);
});