Egy karakteres Rive animáció jó teszt, mert elsőre pici feladatnak tűnik. Pislogjon, mozogjon, reagáljon hoverre vagy kattintásra. Aztán nagyon gyorsan kiderül, hogy a részleteken múlik az egész.

A Triangle Mascot ezért hasznos nekünk. Nem nagy kampányfilm, nem túlgondolt case study. Egy kicsi Rive példa, amin jól látszik, hogyan működik egy interaktív animáció weben, amikor nem csak autoplay videót akarunk berakni az oldalra.

Mi van a Rive fájlban

A lényeg az, hogy a karakter viselkedése nem teljesen a weboldal kódjában él. A .riv fájlban ott van az artboard, az animációs állapotok és a state machine logika is.

Ehhez a weboldalnak csak pár konkrét nevet kell tudnia:

  • Fájl: /riv/triangle_mascot.riv
  • Artboard: Character
  • State machine: State Machine

Ez a szerződés a motion és a fejlesztés között. Ha ezek a nevek stabilak, a komponens betölti a fájlt, elindítja, méretezi a canvast, és a Rive runtime kezeli a karakter belső logikáját.

Miért nem sima videó

Ha a karakter csak dísz, akkor egy videó is elég lehet. De amint reagálnia kell a felhasználóra, a videó elkezd kényelmetlen lenni. Klippeket vágsz egymásra, JS-ből próbálsz állapotokat szinkronizálni, vagy végül elengeded az interakciót.

Rive-nál a webes animáció vektor marad, kicsi marad, és közben tud reagálni. A weboldalnak nem kell minden pózt külön ismernie. Elég a state machine inputjaival beszélnie.

A Rive fejlesztés webes része

A boring rész ettől még nem tűnik el. Kell jó runtime választás, rendes canvas méretezés, resize kezelés, fallback, mobil teszt. Főleg iOS Safarin. Sok Rive animáció ott mutatja meg először, hogy az embed csak demó volt, vagy tényleg production-ready.

A technikai jegyzeteket külön gyűjtjük a dev.lupian.studio oldalon. Az élő Rive példák pedig a demo.lupian.studio alatt vannak. Ez a poszt inkább egy rövid műhelyjegyzet, nem teljes tutorial.

Rövid videó

Itt van hozzá a magyar short:

Ha ilyesmi karaktert, webes animációt vagy interaktív Rive komponenst építenél kampányba, appba vagy landing oldalra, nézd meg a Lupian demókat, vagy írj nekünk. Magyar Rive tartalomból nincs túl sok, úgyhogy erről még fogunk írni.