Rossz méret vagy homályos

Az animáció renderelődik, de rossz méretben, nyújtottan, levágva, homályosan — vagy csak átméretezés után válik élessé.

Akkor használd, ha

Az animáció pixeles Retina / 4K kijelzőn.
Nem tölti ki a helyet, ahova tetted.
Csak akkor lesz éles vagy nagyobb, amikor megváltoztatod az ablakméretet.
Az első betöltéskor ugrik a mérete.

Mire lesz szükséged

Egy már betöltődő animáció (ha nem, lásd: Nem töltődik be az animáció).
A handoff.md-ből a javasolt fit és képarány.

A két aranyszabály

1. szabály — CSS-sel méretezz, ne a `width` / `height` attribútumokkal

html

<!-- ROSSZ -->
<canvas id="rive-canvas" width="500" height="500"></canvas>

<!-- JÓ -->
<div style="width:100%; aspect-ratio: 16/9;">
  <canvas
    id="rive-canvas"
    style="width:100%; height:100%; display:block; touch-action:none;"
  ></canvas>
</div>

A width / height HTML attribútumok a canvas belső backing store méretét állítják, és resetelik a WebGL kontextust. A canvast mindig a CSS-szel — a szülő konténeren — méretezd.

2. szabály — Hívd a `resizeDrawingSurfaceToCanvas()`-t betöltéskor és átméretezéskor

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

window.addEventListener("resize", () => r.resizeDrawingSurfaceToCanvas());

Ez közli a Rive-val, hogy a canvas backing store-ja kövesse a tényleges CSS-méretet és a device pixel ratio-t (DPR). Enélkül a Retina képernyők fele felbontáson rendereldik az animációt — ez a leggyakoribb „homályos” érzet.

A React useRive hook ezt elintézi. A Framer prebuilt komponense is. Ha saját kódot írsz, mindkét sor kell.

Fit és alignment

A handoff.md-ben szereplő értékkel egyezzen meg. Tipikus értékek:

import { Layout, Fit, Alignment } from "@rive-app/webgl2";

new Rive({
  // ...
  layout: new Layout({ fit: Fit.Contain, alignment: Alignment.Center }),
});

Fit	Mit csinál	Mikor használd
`Contain`	A teljes animáció befér, körülötte üres sáv lehet	Alapértelmezés — megtartja a designt
`Cover`	Kitölti a canvast, közben vág az animáción	Hero bannerek
`Fill`	Nyújtja a teljes méretre, képarány nélkül	Szinte sosem — torzítja a designt
`None`	Az artboard saját méretén renderel	Pixel-pontos UI elemek
`Layout`	Reszponzív layout engine (az artboard adaptálódik)	Csak ha a `handoff.md` ezt írja

Képarány eltérés

Ha a konténer 16:9, az artboard pedig 1:1, a Contain üres sávokat hagy a két oldalon. Vagy igazítsd a konténer arányát az artboard-éhoz, vagy használj Cover-t, ha vágható az animáció.

Az animáció jól indul, de átméretezésnél elromlik

Leggyakoribb ok: a resizeDrawingSurfaceToCanvas() csak onLoad-ban fut. Add hozzá az ablak resize figyelőjét:

window.addEventListener("resize", () => r.resizeDrawingSurfaceToCanvas());

Ha a konténer nem csak ablakméretváltáskor változik (reszponzív layout-ugrások, szülő-összecsukás), ott is hívd:

const ro = new ResizeObserver(() => r.resizeDrawingSurfaceToCanvas());
ro.observe(canvas.parentElement);

Ne hagyd, hogy a ResizeObserver írja a canvas.width / canvas.height értékét

Online példák sokszor egy ResizeObserver callback-ben így állítják: canvas.width = entry.contentRect.width és canvas.height = .... Ez tönkreteszi a renderert. Csak a resizeDrawingSurfaceToCanvas()-t hívd — a backing store-t a Rive belül kezeli.

Mobil-specifikus

A canvasen állítsd be a touch-action: none-t, hogy a böngésző ne értelmezze a húzást scrollként / zoomként.
Állítsd be a pointer-events: auto-t, hogy az overlay-ek ne fogják el az inputot.
Tesztelj valódi eszközön — a telefonokon a DPR (gyakran 2 vagy 3) miatt látszanak a homályossági problémák, amik desktopon nem.

Gyakori hibák

<canvas width="..." height="..."> a HTML-ben. Vedd ki ezeket az attribútumokat.
A canvas.width = window.innerWidth manuális állítása JS-ből. Ne. Használj CSS-t + resizeDrawingSurfaceToCanvas()-t.
Nincs magassága a szülőnek. Egy height: 100% canvas egy magasság nélküli szülőben 0px. Adj a szülőnek aspect-ratio-t vagy fix magasságot.
Elmarad az ablak resize figyelő. Betöltéskor éles, átméretezéskor homályos.
Fit.Fill-t használsz, pedig Contain lett volna a szándék — torzítja a designt.

Ha elakadsz, ezt küldd a Lupiannak

Egy képet a hibás méretről és egy képet arról, ahogy ki kellene néznie.
A canvas wrapper CSS-ét.
A használt Fit értéket és a képarányt.
A teljes lista: Kérj segítséget a Lupiantól.

Rossz méret vagy homályos ​

Akkor használd, ha ​

Mire lesz szükséged ​

A két aranyszabály ​

1. szabály — CSS-sel méretezz, ne a width / height attribútumokkal ​

2. szabály — Hívd a resizeDrawingSurfaceToCanvas()-t betöltéskor és átméretezéskor ​

Fit és alignment ​

Az animáció jól indul, de átméretezésnél elromlik ​

Mobil-specifikus ​

Gyakori hibák ​

Ha elakadsz, ezt küldd a Lupiannak ​

Kapcsolódó ​