State machine inputok & események

Hogyan hajtsd a Lupian animációt a saját oldaladról (inputok), és hogyan reagálj rá (események).

Akkor használd, ha

• Az animációnak interaktív állapotai vannak (hover, click, progress, scroll stb.).
• Az animációnak jeleznie kell a kódod felé („submit gombra kattintottak”, „lefutott a szekvencia”).
• A handoff.md inputokat vagy eseményeket sorol fel.

Mire lesz szükséged

• Egy inicializált Rive példány (bármelyik receptből).
• A state machine neve a handoff.md-ből.
• Az input- / eseménynevek a handoff.md-ből (kis- és nagybetűérzékenyek).

Fogalmak

Kifejezés	Irány	Példa
Input	Kódod → animáció	isHovering = true indít egy hover animációt
Esemény	Animáció → kódod	"buttonClicked", amikor a felhasználó rákattint a vizuális gombra

Az inputok három típusa: boolean (value: true/false), szám (value: 0–100 stb.), trigger (egyszer hívd a .fire()-t).

Inputok olvasása Vanilla Webben

const r = new Rive({
  src: "/animations/hero.riv",
  canvas,
  autoplay: true,
  stateMachines: "State Machine 1",
  onLoad: () => {
    r.resizeDrawingSurfaceToCanvas();

    const inputs = r.stateMachineInputs("State Machine 1");

    const isHover  = inputs.find(i => i.name === "isHovering");  // bool
    const progress = inputs.find(i => i.name === "progress");    // szám
    const onClick  = inputs.find(i => i.name === "onClick");     // trigger

    canvas.addEventListener("mouseenter", () => { isHover.value = true; });
    canvas.addEventListener("mouseleave", () => { isHover.value = false; });
    canvas.addEventListener("click",      () => { onClick.fire(); });

    // Számot pl. scrollból is hajthatsz
    window.addEventListener("scroll", () => {
      progress.value = Math.min(100, window.scrollY / 5);
    });
  },
});

Inputokat csak onLoad után olvass

A stateMachineInputs(...) üres tömböt ad vissza, amíg a fájl be nem töltődött. Mindig onLoad-on belül vagy egy "load" esemény után olvasd.

Inputok olvasása Reactben

import {
  useRive,
  useStateMachineInput,
} from "@rive-app/react-webgl2";

export function Button() {
  const { rive, RiveComponent } = useRive({
    src: "/animations/button.riv",
    stateMachines: "Button SM",
    autoplay: true,
  });

  const isHover = useStateMachineInput(rive, "Button SM", "isHovering");
  const onClick = useStateMachineInput(rive, "Button SM", "onClick");

  return (
    <RiveComponent
      onMouseEnter={() => isHover && (isHover.value = true)}
      onMouseLeave={() => isHover && (isHover.value = false)}
      onClick={() => onClick?.fire()}
    />
  );
}

Eseményekre figyelés

Az események egyedi üzenetek, amiket az animáció küld (a Lupian állítja be a Rive szerkesztőben).

Vanilla Web:

new Rive({
  src: "/animations/form.riv",
  canvas,
  autoplay: true,
  stateMachines: "State Machine 1",
  onRiveEventReceived: (event) => {
    if (event.data.name === "submitClicked") {
      yourForm.submit();
    }
  },
});

React:

const { RiveComponent } = useRive({
  src: "/animations/form.riv",
  stateMachines: "State Machine 1",
  autoplay: true,
  onRiveEventReceived: (event) => {
    if (event.data.name === "submitClicked") {
      // ...
    }
  },
});

Az események hordozhatnak property-ket (szám, szöveg, URL) — ezek az event.data-ban vannak. A teljes eseményleírás: rive.app/docs.

Gyakori hibák

• Inputot onLoad előtt olvasol. Üres tömböt kapsz. Tedd onLoad-ba.
• Rossz inputnév. Kis- és nagybetűérzékeny. A handoff.md-ből másold át pontosan.
• Boolean-t szövegként állítasz (isHover.value = "true"). Tényleg true / false legyen.
• .fire()-t hívsz nem-trigger inputon (vagy .value = ...-t triggeren). A típust a Lupian rögzíti a szerkesztőben; a handoff.md mindegyiket felsorolja.
• Elfelejted, hogy React-ben az input az első renderben null lehet. Védd input && (...) vagy input?.fire() formával.
• Szám-inputot a deklarált tartományán kívülre állítasz. Csendben clamp-ol — az animáció csak megakad.

Ha elakadsz, ezt küldd a Lupiannak

• A state machine nevét, és az általad használt input- / eseményneveket.
• Egy rövid felvételt a hibás viselkedésről.
• A handoff.md-et, hogy össze tudjuk vetni, mi van bekötve.
• A teljes lista: Kérj segítséget a Lupiantól.

Kapcsolódó

• Vanilla Web recept
• React / Next.js recept
• State machine nem működik
• Részletes referencia: rive.app/docs