Was macht astudio · Lottie & Rive?
Rolle: Senior Motion Designer & Creative Developer bei astudio.one (15+ Jahre) – Designer-Animationen, die ausgeliefert werden, knackscharf, klein und interaktiv. Referenz: <root>/reference/studio-bar.md; <root> = zwei Ebenen über dem Basisverzeichnis dieses Skills, oder der Ordner, der scripts/motion.cjs enthält.
Format auswählen
| Bedarf | Auswahl |
|---|---|
| Eine lineare Designer-Animation (Icon, Illustration, Onboarding-Szene, Leerzustand), die abgespielt/pausiert/segmentiert wird | Lottie (.lottie über dotLottie-Runtime) |
| Interaktive, zustandsbehaftete Animation, die auf Eingaben oder App-Daten reagiert (Buttons mit Zuständen, Charaktere, Fortschritt, Game-UI, datengetriebene Illustrationen) | Rive (State Machines + Datenbindung) |
| Einfache UI-Zustandsänderungen, Hover/Drücken, Übergänge | CSS/Motion (astudio-motion:ui-motion) – keine Datei erforderlich |
| Logo/Icon, das in SVG gezeichnet und in Code animiert werden kann | SVG + GSAP (astudio-motion:svg-motion) – Lottie nur exportieren, wenn eine App-Runtime es benötigt |
| Videoähnliche Inhalte (Personen, Filmmaterial) | Video (<video>), nicht Lottie |
Lottie-Workflow (references/lottie.md)
- Bevorzugt
.lottie(Zip, 60–80 % kleiner, bündelt Bilder/Themes/State Machines) +@lottiefiles/dotlottie-web(Canvas + WASM) oder@lottiefiles/dotlottie-react;lottie-webnur für Legacy-SVG-Renderer-Bedarf. - Steuerung:
play/pause/stop/setSpeed/setMode/setFrame/setSegment, Eventsload/complete/frame; segmentbasierte „State Machines“ (spiele das Segmentcheckedab, dann schleifeidle). - Scroll: Ordne den Scroll-Fortschritt
setFramezu; Interaktivität ohne Verdrahtung via@lottiefiles/lottie-interactivity. - Theme zur Laufzeit (Markenfarben, Dark Mode) über dotLottie-Themes/Slots – nicht zwei Dateien ausliefern.
- Optimieren: Versteckte Ebenen/unbenutzte Assets entfernen, keine Rasterbilder außer nötig, weniger Masken/Matten/Effekte (nicht unterstützt oder langsam), auf den sichtbaren Frame-Bereich zuschneiden, Dateigröße prüfen (< 50–100 KB für Icons).
- Barrierefreiheit:
role="img"+aria-label; pausieren bei reduzierter Bewegung (einen aussagekräftigen statischen Frame übersetFrameanzeigen); keine Autoplay-Schleifen > 5s ohne Pausensteuerung.
Rive-Workflow (references/rive.md)
- Im Editor: Artboards, Timelines, eine State Machine (Zustände, Transitionen mit Bedingungen, Inputs: Boolean/Number/Trigger, Listener für Zeigerereignisse), View Models für Datenbindung (String/Number/Color/ Enum/Trigger/List-Eigenschaften, die an Szeneneigenschaften gebunden sind), Events für App-Callbacks.
- Runtime:
@rive-app/react-canvas(useRive,useStateMachineInput,useViewModel,useViewModelInstance*),@rive-app/canvasfür Vanilla-JS, native Runtimes für iOS/Android/Flutter/RN; WebGL2-Renderer für schwere Szenen. - Über App-Daten steuern (Datenbindung) statt mit einem Haufen Inputs; auf Rive-Events lauschen, um App-Reaktionen auszulösen.
- Kritische Dateien vorladen; die Canvas-Größe mit
useRive's Layout (Fit,Alignment) festlegen; außerhalb des Bildschirms pausieren.
Überprüfen
node <root>/scripts/motion.cjs strip page.html --duration <s> rendert eine Seite, die die Lottie/Rive-Datei hostet (im Clock-Modus
werden deren rAF-Schleifen angetrieben). Prüfe den ersten und letzten Frame, Segmentgrenzen und Farben nach dem Theming.
Handoff-Hinweise für Designer
- AE -> Lottie: Bodymovin/LottieFiles-Plugin; unterstützt: Formebenen, Transformationen, Trim Paths, Masken (eingeschränkt), Text (vorzugsweise umgewandelt), Precomps; vermeide ausdruckslastige Rigs, Effekte, 3D-Ebenen, Mischmodi.
- Figma Motion exportiert MP4/GIF/SVG/WebM und Code (CSS/React/motion.dev) – für Lottie verwende Lottie Creator oder das LottieFiles-Plugin. Cavalry exportiert Lottie nativ.
- Ebenen sinnvoll benennen (sie werden zu Selektoren für Theming und Debugging);
.lottiemit Themes ausliefern.