Mit küld a Lupian

Egy tipikus Lupian Rive-csomag nem nagy. Ez az oldal végigvezet rajta: mi van benne, és mit jelentenek a fájlok.

Akkor használd, ha

Most kaptad meg a csomagot, és tudni szeretnéd, melyik fájl mire való, mielőtt belevágsz az integrációba.

Mi van a csomagban

Egy szokványos átadás így néz ki:

a-projekted/
├── animation.riv           ← ezt ágyazod be
├── fallback.png (vagy .svg) ← statikus kép WebGL nélküli böngészőkhöz / töltés alatt
├── handoff.md              ← nevek, méretek, javasolt fit, megjegyzések
└── preview.mp4 (opcionális) ← így néz ki a kész animáció

Néhány csomagban ezeken túl ez is benne lehet:

• Egy plusz .riv mobil vagy egyszerűsített változatként.
• Külső hivatkozott assetek (fontok, képek), ha a .riv referenced asset módot használ — lásd: Fájlok hostolása & CORS.

A .riv fájl

Bináris Rive fájl. Nem szerkeszted — kihelyezed valahova, és onnan tölti be a <canvas>.

• Tipikus méret: 10 KB és néhány száz KB között.
• Kezeld megváltoztathatatlanként: amikor a Lupian új verziót küld, változzon a fájlnév, vagy tegyél rá cache-bypass query-t (?v=2).
• Minden Rive runtime-mal együttműködik (web, iOS, Android, Flutter, RN, Unity, Unreal) — ugyanaz a fájl, csak más a wrapper.

A fallback kép

Statikus PNG vagy SVG az első / idle frame-ről, az animáció szánt megjelenési méretében.

Akkor mutasd, ha:

• A felhasználó böngészőjében nincs WebGL.
• A .riv még tölt.
• Az inicializálás elszáll (onLoadError).

Mintát találsz az Nem töltődik be az animáció oldalon.

A handoff.md jegyzet

Ez a forrása minden névnek, amire a kódodban hivatkozni fogsz. Tartalma:

Mező	Példa	Így használod a kódban
Artboard	Hero	artboard: "Hero"
State machine	State Machine 1	stateMachines: "State Machine 1"
Inputok	isHovering (bool), progress (szám), onClick (trigger)	stateMachineInputs(...)
Események	buttonClicked, sequenceComplete	onRiveEventReceived
Javasolt fit	Contain, középre	layout: new Layout({ fit: Fit.Contain, alignment: Alignment.Center })
Képarány	16:9, 1:1 stb.	a canvas konténer CSS mérete
Megjegyzések	„Az animáció négyzetes konténert vár, min. 240px”	—

A nevek kis- és nagybetűérzékenyek

A handoff.md-ben szereplő nevek pontosan azok, ami a .riv fájlban van. Ha a kódban "state machine 1" szerepel, a fájlban pedig "State Machine 1", az animáció szó nélkül elnémul.

Mire lesz szükséged

Mielőtt megnyitod a receptet, érdemes ezeket előkészíteni:

• A .riv fájlneve és a végleges URL-je.
• A state machine neve (szinte minden animációban van).
• Az inputnevek, amiket az interakciókhoz kötsz.
• A javasolt fit (Contain, Cover stb.) és a képarány.

Ha valami hiányzik a csomagból

Ha nincs handoff.md, nincs fallback kép, vagy a nevek nem egyértelműek — nézd meg a Kérj segítséget a Lupiantól oldalt, mielőtt elindulnál.

Következő lépés

• Alapértelmezett: Vanilla Web recept.
• React/Next: React / Next.js recept.
• Framer: Framer recept.