Web (JavaScript)

Rive web runtime là thư viện JavaScript mã nguồn mở. Bên dưới, nó sử dụng WebAssembly (định dạng nhị phân được biên dịch, chạy trong trình duyệt với tốc độ gần bằng native), giúp nó chạy nhanh. Nó cho phép bạn phát animation Rive trên bất kỳ trang web nào. Hỗ trợ WebGL2 (API trình duyệt để render đồ họa tăng tốc phần cứng — giúp animation mượt mà nhờ sử dụng GPU của thiết bị), Canvas và các tùy chọn render nhẹ.

Cài đặt

Chọn phương thức phân phối phù hợp với cấu hình dự án của bạn.

Qua script tag (CDN):

<script src="https://unpkg.com/@rive-app/webgl2@2"></script>

Cách này tạo ra một đối tượng rive toàn cục trên trang.

Qua package manager:

npm install @rive-app/webgl2

Các gói có sẵn:

• @rive-app/webgl2 — Đầy đủ tính năng, dùng Rive Renderer (khuyến nghị). Rive Renderer là engine đồ họa chất lượng cao của riêng Rive, xây dựng trên nền WebGL2. Nó mang lại chất lượng hình ảnh phong phú nhất và hỗ trợ đầy đủ tính năng.
• @rive-app/canvas — Chỉ Canvas, không có Rive Renderer
• @rive-app/canvas-lite — Bundle nhỏ nhất, hỗ trợ tính năng hạn chế

Thiết lập cơ bản

Bạn cần ba thứ: phần tử <canvas>, instance Rive và đường dẫn đến file .riv.

<canvas id="rive-canvas" width="500" height="500"></canvas>

import Rive from '@rive-app/webgl2';

const r = new Rive({
  src: 'https://cdn.rive.app/animations/vehicles.riv',
  canvas: document.getElementById('rive-canvas'),
  autoplay: true,
  stateMachines: 'bumpy',
  onLoad: () => {
    // Được gọi khi file đã tải xong
    r.resizeDrawingSurfaceToCanvas();
  },
});

mẹo

Gọi resizeDrawingSurfaceToCanvas() sau khi tải để khớp canvas với tỉ lệ pixel thiết bị, đảm bảo render sắc nét trên màn hình high-DPI.

Dọn dẹp

Khi không còn cần instance Rive, gọi cleanup() để giải phóng bộ nhớ:

r.cleanup();

Cách này giải phóng các đối tượng WebAssembly bên dưới và ngăn ngừa rò rỉ bộ nhớ.

Tùy chọn tải

Dùng phương thức phù hợp với cách file .riv của bạn được phân phối:

Phương thức	Khi nào dùng
URL string (src)	File .riv được host trực tuyến
Tài nguyên bundle tĩnh	Đóng gói cùng ứng dụng
Fetch → ArrayBuffer (một khối dữ liệu nhị phân thô tải về từ URL hoặc API)	Tải từ API / nguồn động
Tái sử dụng file đã tải	Hiệu suất tốt nhất khi dùng cùng file ở nhiều nơi

Bước tiếp theo

• Phát lại State Machine — Điều khiển state machine từ JavaScript
• React Runtime — Component và hook React cho Rive
• Tham chiếu tham số — Tất cả các tùy chọn constructor của Rive