فراخوانی انیمیشن با rive

سلام دوست عزیز. برای فراخوانی فایل Rive با استفاده از پکیج @rive-app/canvas در محیط‌های مبتنی بر npm (مثل همین کدمحیطی که لینک دادید)، شما نیاز دارید که یک تگ <canvas> در HTML داشته باشید و سپس با کدهای جاوا اسکریپت، فایل انیمیشن خود (فرمت .riv) را به آن متصل کنید.
کافی است فایل index.js خود را در کدمحیط (CodeSandbox) باز کنید و کدهای زیر را درون آن قرار دهید:

import { Rive } from "@rive-app/canvas";

// ۱. گرفتن المان کانواس از صفحه HTML
const canvasElement = document.getElementById("canvas");

// ۲. راه‌اندازی و فراخوانی انیمیشن Rive
const r = new Rive({

// آدرس فایل انیمیشن شما (می‌تواند یک لینک CDN یا آدرس محلی در سورس پروژه باشد)
src: "https://cdn.rive.app/animations/vehicles.riv",

// متصل کردن به المان کانواس
canvas: canvasElement,

// اجرای خودکار انیمیشن پس از لود شدن
autoplay: true,

// نام استیت ماشین یا انیمیشنی که می‌خواهید اجرا شود (اختیاری)
// stateMachine: "bumpy",

// تنظیم سایز درست پس از بارگذاری کامل
onLoad: () => {
r.resizeDrawingSurfaceToCanvas();
},
});

در فایل index.html هم مطمئن شوید که تگ کانواس با آیدی درست وجود دارد:

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

با این کار انیمیشن شما بدون مشکل روی مرورگر رندر خواهد شد.

عالی
عالی عالی