Válaszd ki az utat
30 másodperces gyorssegéd. Nyisd meg a stackedhez illő receptet.
Akkor használd, ha
A .riv fájl már a kezedben van, és most fogod beilleszteni a projektedbe.
Gyorssegéd
Ökölszabály
Ha nem vagy biztos, válaszd a Vanilla Webet. Minden alábbi környezetben működik, és a React/Framer wrapper úgyis ugyanazokat a neveket használja.
| A stacked | Ezt a receptet válaszd |
|---|---|
| Sima HTML oldal | Vanilla Web |
| WordPress (egyedi HTML blokk, sablon, page builder) | Vanilla Web |
| Webflow, Squarespace, Wix, hasonló oldalépítők (egyedi embed blokk) | Vanilla Web |
| Shopify (egyedi liquid vagy script blokk) | Vanilla Web |
Bármilyen oldal, amibe <script> vagy „Custom HTML” beilleszthető | Vanilla Web |
| Statikus oldalgenerátorok (Astro, Eleventy, Hugo) | Vanilla Web kliensoldali blokkban |
| React (CRA, Vite, egyedi) | React / Next.js |
| Next.js, Remix, Gatsby (SSR/SSG Reacttel) | React / Next.js + kliensoldali wrapper |
| Framer | Framer |
| Vue / Svelte / Solid / Angular | Vanilla Web kliensoldali komponensben |
| iOS, Android, Flutter, React Native | Használd a Rive natív futtatókörnyezeteit — lásd: rive.app/docs. A .riv fájl, amit küldtünk, minden Rive runtime-on működik. |
Miért a Vanilla Web az alapértelmezett
- Minden webes környezetben működik módosítás nélkül.
- Nem kell build eszköz.
- Az artboard, state machine, input- és eseménynevek ugyanazok, akár vanilla JS, akár React, akár Framer alól töltöd.
- Bármikor átállhatsz React-re vagy Framer-re anélkül, hogy a
.rivfájlhoz hozzá kellene nyúlni.
Mi marad változatlan a stackek között
A .riv fájl, és a benne lévő nevek:
- Artboard neve (pl.
Hero). - State machine neve (pl.
State Machine 1). - Input nevek és típusok (boolean, szám, trigger).
- Eseménynevek, amiket az animáció kibocsát.
Ezeket a Lupian állítja be a Rive szerkesztőben. A wrapper kódod csak hivatkozik rájuk — a neveknek pontosan egyezniük kell az átadási dokumentumban szereplőkkel.
Következő lépés
- Alapértelmezett: Vanilla Web recept.
- React/Next: React / Next.js recept.
- Framer: Framer recept.
- Előtte nézd meg, mit küld a Lupian, hogy a kódban szereplő nevek egyezzenek a fájllal.