2026 Designer-Entscheidungsmatrix: Lottie-Animation als PNG-Sequenz — Framerate, Farbe, sRGB & Remote-Mac-M4-Batch-Abnahme

Entscheidungsmatrix: PNG-Sequenz vs. Live-Lottie

Bevor Sie Render-Skripte oder Watch-Folder produktiv schalten, entscheiden Sie anhand des Kanals, ob die Fertigungseinheit „Sequenz + Manifest“ oder „JSON + Player“ ist. Die folgende Matrix fasst typische 2026-Szenarien zusammen — sie ersetzt keine Rechtsabteilung, aber sie verhindert teure Raster-Nachbesserungen.

Wenn mehr als eine Spalte auf Ihr SKU „hohes Risiko“ zeigt, priorisieren Sie PNG-Streifen mit dokumentierter FPS und einem versionierten manifest.jsonl — selbst wenn parallel eine .json für die App ausgeliefert wird.

Checks vor dem Export

Sequenzen scheitern meist an profanen Ursachen: Frame-Off-by-one, halbtransparente Mattes, unterschiedlich gebackenes Motion-Blur zwischen After Effects und Laufzeit-Player. Behandeln Sie die Komp in AE (oder dem Authoring-Tool) als Vertrag und belegen Sie, dass JSON und Rasterisierer Work Area, Time-Remap und Effekt-Stack identisch interpretieren.

• FPS-Lock: Wählen Sie eine Stufe aus 24 (Kino, viele Social-Master), 30 (Web, NTSC-freundlich) oder 60 (UI-Mikro-Motion, Spiele). Export bei 24 FPS aus einer 30 FPS-Komp ohne dokumentierte Frame-Drops ist ein klassischer Abnahme-Konflikt.
• Frame-Mathematik: Erwartete Anzahl = ceil(duration_sec × export_fps) für halb-offene Timelines; manche Tools hängen einen Schwanz-Frame an — Ihr Gate sollte ±0 gegen die Spez erlauben, nicht „ungefähr passend“.
• Alpha-Hygiene: Premultiplied vs. straight muss zum Ziel-Engine-Reader passen; legen Sie Testframes auf #000- und #FFF-Platten — inhaltlich dieselbe Logik wie bei statischen PNGs in der Batch-Transparenz-Checkliste.
• Effekte ehrlich machen: Plugins ohne Bodymovin-/Lottie-Unterstützung vor dem Raster-Export flatten — sonst entstehen Geister zwischen JSON-Preview und PNG-Wahrheit.

Stapelparameter, Benennungsvorlage & Validierungsschwellen

Legen Sie diese Werte neben den Jobordner (README oder CI-Variablen), damit ein Remote-Worker in sechs Monaten dieselben Bytes erzeugt wie heute.

Export-FPS-Stufen (Standardwerte)

Benennungsvorlage (zero-padded)

Vermeiden Sie Sortier-Chaos, bei dem frame-2.png hinter frame-19.png landet.

• Vorlage: {produkt}_{animation}_v{semver}_f%05d.png — Beispiel: checkout_success_v2.1.0_f00042.png.
• Startindex: global 0 oder 1 wählen und in README_JOB.md festhalten — FFmpeg, Engines und Compositoren sind uneinig.
• Sprach-Suffixe: _de-DE nur anhängen, wenn Motion wirklich abweicht; keine Marketing-Sätze im Dateinamen, wenn CMS-Slugs das verbieten.

CLI-Schwellen (macOS, kopierbar)

# zsh: Maß-Drift in inbox/ prüfen
spec_w=1080 spec_h=1080
for f in inbox/*.png(N); do
  read w h <<<$(magick identify -format "%w %h" "$f")
  [[ "$w" == "$spec_w" && "$h" == "$spec_h" ]] || print "FAIL $f ${w}x${h}"
done

Abnahme-Matrix (Batch-QA)

Die folgende Tabelle bündelt die Abnahme-Entscheidung für Motion-Strips: jede Zeile ist ein Gate, das Sie vor dem Verschieben nach out/ automatisch oder manuell abhaken.

Nach bestandenen Pixel-Gates dürfen Sie verlustfrei metadatenbereinigen — immer nach den Gates, nicht davor; ICC-Disziplin wie bei statischen Marketing-PNGs im Technik-Blog nachschlagen.

Cross-Tool-Konsistenz & Farbe

Lottie-Player interpretieren Merge Paths, Mattes und Weichzeichner subtil unterschiedlich. Ihre Abnahme sollte genau einen gepinnten Raster-Pfad pro SKU definieren — nicht „was gestern im Browser gut aussah“. Dokumentieren Sie AE + Bodymovin-Version, Canvas-Skalierung und Hintergrundfarbe in manifest.jsonl neben sha256 je Frame. Den Farbintent fassen Sie mit derselben Präzision wie bei Stills: die Checkliste sRGB vs. Display P3 gibt die sprachliche Policy für getaggte vs. untagged PNGs vor.

Für Design-Handoff sollten Benennung, Farb-Tokens und Export-Boxen zu Still-Assets passen, damit Motion-Streifen nicht Sonderfälle werden — der Überblick im Artikel Affinity / Sketch / Figma: PNG-Parameter-Workflow hilft, dieselbe Sprache zwischen UI- und Motion-Lieferungen zu halten. Wo Player und PNG auseinanderlaufen, ist ein Referenz-Still (Mitte und letzte Frame) oft schneller als endloses Pixel-Peeping.

Fehlerbilder & Retry

Stapel-Jobs brechen sporadisch: thermisches Drosseln, Font-Caches, headless-GPU-Pfade. Machen Sie Retries zum Spez-Teil.

• Zuerst quarantänisieren: fehlerhafte Bereiche nach quarantine/frames_120-140/ mit stderr — niemals bestehende out/-Bäume blind überschreiben.
• Backoff: sleep $((2**n)) Sekunden, Deckel z. B. 120 s; maximal fünf Versuche ohne menschlichen Circuit-Breaker.
• Teil-Render: nur Index-Spanne neu rasterisieren und ins Manifest mergen — volle Rekomposition verschwendet GPU-Minuten auf M4-Clustern.
• Logging: JSONL-Zeilen pro Frame (Bytes, WxH, Tool-Version, pass/fail) wie bei OpenClaw-ähnlichen QA-Jobs im Blog beschrieben — reproduzierbare Postmortems ohne GUI.

Fazit & nächste Schritte

Lottie bleibt die editoriale Quelle, PNG-Sequenzen sind das Fertigungs-Output. Wenn Sie FPS-Stufe, Framezahl, Benennungsvorlage und Maß-/Byte-/Alpha-Gates verbindlich machen, wird die Abnahme reproduzierbar. Legen Sie lange Raster-Läufe und wiederholbare QA auf einen dedizierten Remote Mac mini M4 — dann bleiben Laptops für Layout und Kundenfeedback frei, während nachts Manifeste und sha256-Summen entstehen. Dasselbe Betriebsmodell skaliert auf große Still-Batches mit höheren Auflösungen; der entscheidende Hebel ist ein stabiler Apple-Silicon-Worker statt wechselnder lokaler Notebooks.

Ohne Login einsteigen: MacPng-Startseite, Mieten & Kaufen, Preise & Knoten, Hilfe inkl. SSH/VNC sowie der Technik-Insights-Blog.