State machine nem működik

Az animáció lejátszódik, de nem reagál hoverre, kattintásra vagy a kódodra. Vagy a stateMachineInputs(...) üres.

Akkor használd, ha

• Az animáció betölt, de az interakciók nem csinálnak semmit.
• Az r.stateMachineInputs("...") []-t ad vissza.
• Egy klikkre az animáció vizuálisan reagál, de az onRiveEventReceived handlered sosem fut le.
• A stateMachines érték állítása semmit sem változtat.

Mire lesz szükséged

• DevTools konzol.
• A Lupiantól kapott handoff.md (ebben vannak az artboard, state machine, input- és eseménynevek).

Menj végig ezeken sorrendben

1. Ellenőrizd a state machine nevét

A leggyakoribb ok. A nevek kis- és nagybetűérzékenyek, és pontosan egyezniük kell a .riv-ben szereplővel.

// A handoff.md szerint a neve: "State Machine 1"

stateMachines: "state machine 1",  // ROSSZ — rossz kis-/nagybetű
stateMachines: "State Machine 1",  // JÓ
stateMachines: "StateMachine1",    // ROSSZ — más név

Logoltasd ki, ami valóban a fájlban van:

new Rive({
  src: "/animations/hero.riv",
  canvas,
  autoplay: true,
  onLoad: () => {
    console.log("state machine names:", r.stateMachineNames);
  },
});

A konzol kimenete az igazság forrása — pontosan az van a .riv-ben. Azt használd.

2. onLoad után olvastad az inputokat?

A stateMachineInputs(...) üres tömböt ad, amíg a fájl be nem töltődött.

// ROSSZ — túl korán olvas
const r = new Rive({ src: "...", canvas, stateMachines: "SM 1" });
const inputs = r.stateMachineInputs("SM 1"); // []

// JÓ
const r = new Rive({
  src: "...",
  canvas,
  autoplay: true,
  stateMachines: "SM 1",
  onLoad: () => {
    const inputs = r.stateMachineInputs("SM 1");
    // ...
  },
});

React alatt a useStateMachineInput(rive, "SM 1", "név") ezt elintézi. Csak vigyázz, hogy a rive ne legyen null, amikor olvasod (az első renderben null).

3. Jó az input neve és a típusa?

Három input-típus van — rossz típussal a jó név is csendben hatástalan.

Típus	Hogyan hajtod
boolean	input.value = true / false
number	input.value = 42
trigger	input.fire()

const inputs = r.stateMachineInputs("SM 1");
console.log(inputs.map(i => ({ name: i.name, type: i.type })));
// [{name: "isHovering", type: 59}, {name: "onClick", type: 58}, ...]

Vesd össze a handoff.md-vel. Ha a típus eltér attól, amire számítottál, a rossz API hívása miatt tűnik majd reagálatlannak.

4. Rossz artboard?

Egy .riv fájlban több artboard lehet. Ha nem adsz artboard értéket, az alapértelmezett artboard fut (amit a Lupian állít be a szerkesztőben). Ha konkrét kell:

new Rive({
  src: "/animations/hero.riv",
  canvas,
  autoplay: true,
  artboard: "Mobile",                   // a handoff.md-ből
  stateMachines: "State Machine 1",
});

Nem létező artboard megadása esetén a fájl gyakorlatilag nem töltődik be.

5. Nem szólalnak meg az események?

Nézd meg, hogy:

• onRiveEventReceived be van állítva a Rive konstruktoron (vagy prop-ként a useRive-on).
• Az esemény neve az if-edben pontosan egyezik: event.data.name === "submitClicked".
• Az animáció tényleg eljut arra a keyframe-re, ami az eseményt kibocsátja (tesztként indítsd egy trigger inputtal, ami odavezet).

new Rive({
  // ...
  onRiveEventReceived: (event) => {
    console.log("Rive event:", event.data.name, event.data);
  },
});

Ha ez egy olyan akciónál sem logol, ami egyébként eseményt küldene, a baj a .riv-ben van (az esemény nincs ahhoz az átmenethez bekötve) — ez Lupian-oldali javítás. Küldj egy felvételt.

6. Pointer-hajtott inputok (hover / klikk) a canvason belül

Bizonyos Rive interakciók a Rive belső pointer figyelőit használják — az animációban beépített hover / klikk hotspotok vannak.

• A canvason legyen pointer-events: auto és touch-action: none.
• Semmi ne legyen a canvas fölött (DevTools → Elements → hover a canvason → nézd a stacket).
• Framerben különösen: a rétegek elfoghatják az inputot — lásd: Framer recept.

Gyakori hibák

• Rossz kis- / nagybetűk a state machine, artboard vagy input nevekben.
• Inputot onLoad előtt olvasol. Üres tömb, utána néma hiba.
• .value = ... triggeren vagy .fire() boolean inputon.
• Elfelejted megadni a stateMachines: "..."-t a new Rive(...)-nak. Az animáció lejátssza az alapértelmezett timeline-t, de a state machine-be be sem lép.
• Nem létező artboardra kérdezel. Elgépelt artboard név → a fájl gyakorlatilag nem töltődik.

Ha elakadsz, ezt küldd a Lupiannak

• A konzol kimenetét: r.stateMachineNames és r.stateMachineInputs("...").map(i => i.name + ":" + i.type).
• Egy felvételt arról, mit látsz és mit szerettél volna.
• Az input- / esemény-bekötés snippetjét.
• A teljes lista: Kérj segítséget a Lupiantól.

Kapcsolódó

• State machine inputok & események
• Vanilla Web recept
• Részletes referencia: rive.app/docs