Bodymovin eine gute Idee für Webanimationen?

Auf unserer neuen „So funktioniert es“-Seite möchten wir animierte Grafiken verwenden, um einige Konzepte unseres Dienstes besser zu erklären. Wir haben keine Erfahrung mit komplexeren Animationen und haben uns entschieden, Bodymovin auszuprobieren, da das Erstellen der Animationen in After Effects wertvolle Entwicklungsressourcen spart. Einige der visuellen Elemente müssen jedoch je nach Ansichtsfenster ihre Größe und ihr Layout ändern.

Jetzt fragen wir uns, ob Bodymovin die richtige Wahl ist: Ist es möglich, irgendwie auf das SVG zuzugreifen und diese Eigenschaften zu ändern, während die Animation intakt bleibt? Oder brauchen wir für jeden Viewport ein (etwas) anderes SVG, jedes mit seiner eigenen Bodymovin-json-Animationsdatei? Denn in diesem Fall wird diese Seite riesig ...

Generell gilt: Wenn Sie Vorschläge, Best Practices, Beispiele aus dem Leben von Bodymovin haben, wäre ich sehr dankbar, diese zu überprüfen.

Ist das nicht eine Frage für den BodyMov-Support?
Idk, gibt es so etwas wie Bodymovin-Unterstützung? Immerhin ist es nur eine AE-Erweiterung ... aber ich werde es überprüfen. Meine Hoffnung war, dass jemand anderes dieses Problem schon hatte und es gelöst hat. Oder zumindest meine Frage beantworten kann.
Dies ist definitiv eher eine Support- als eine Designfrage. Fragen Sie besser die Plugin-Entwickler statt uns: aescripts.com/bodymovin
Dies ist eine "echte Produkt"-Frage: Ich suche Leute, die Bodymovin ausprobiert haben und Erfahrung damit haben. Das ist „Produktdesign“.
"Allgemeine Ratschläge zu Bodymovin" ist eine zu weit gefasste Anfrage für eine sichere Q&A-Site wie GD. Ja, Bodymovin kann reagieren, wenn Sie es richtig machen. Es ist vielleicht nicht die beste Wahl. Sehen Sie sich den obigen Kommentar an, um Ihnen beim Durchdenken Ihrer Optionen zu helfen
Sie denken, dass die Frage nach realen Erfahrungen mit Bodymovin in Bezug auf meine 2, 3 spezifischen Fragen zu weit gefasst ist, aber Sie verlinken auf eine Frage, die buchstäblich lautet: „Wie kann man eine Illustration für das Web am besten animieren?“?? :D Aber danke für den Link, das sieht nach einer tollen Übersicht aus. Übrigens ... wir gingen mit GSAP.
@fgrau Die verknüpfte Frage hatte zumindest ein Beispiel für etwas, das sie veranschaulichen wollten, aber ich stimme Ihnen mehr oder weniger zu, dass es ein bisschen weit gefasst ist

Antworten (2)

Bodymovin ist das Beste, was Sie finden würden, wenn Sie einfache oder sogar komplexe Animationen animieren möchten. Es braucht nicht viel Entwicklungsarbeit, das Einstecken selbst hat eine Renderoption, die es Ihnen erlaubt, den Code auszuspucken, sogar .json-Code, um ihn in IOS-Apps oder auch Android-Apps zu verwenden.

Stellen Sie jedoch sicher, dass Ihre SVG-Dateien keine Farbverläufe aufweisen. Lottie kann keine Farbverläufe und weichen Kanten exportieren

Hier ist das Exportblatt

Geben Sie hier die Bildbeschreibung ein

Also probier es aus.

Persönlich habe ich es für ein Onboarding für die Fox Sports NRL-App verwendet

https://dribbble.com/shots/4162353-Onboarding-Animation

Tut mir leid, aber das beantwortet meine Frage nicht. Meine Frage ist, ob ich mehrere Key Visuals (und Animationen) für verschiedene Viewports benötige, wenn die kleinere Größe der Viewports eine Layoutänderung innerhalb dieser Key Visuals erfordert.
Tut mir leid, ich verstehe nicht, was du mit Key Visuals und Viewpoints meinst? Können Sie mir ein Beispiel verlinken, was Sie erstellen möchten?
Der „Viewport“ ist der sichtbare Bereich einer Website innerhalb eines Browserfensters; mit „key visuals“ meine ich eine art grafisches element, das auf der website platziert wird. Nehmen Sie eine beliebige Produktseite auf Dribbble mit dem üblichen abwechselnden „Text links – Bild rechts“-Layout: Wenn es sich um eine responsive Website handelt und der Darstellungsbereich schmaler wird, haben die Bilder nicht mehr so ​​viel Platz und müssen geändert werden.
Ah richtig, verstanden! Google Web Designer ist das, wonach Sie suchen, er erkennt das automatisch. Wobei Bodymovin nur die Größe hat, die Sie erstellen, und der Blickwinkel sich nicht ändert.

Es gibt ein weiteres großartiges Tool, das alle Ihre Bedürfnisse abdecken könnte. Ich meine Google Web Designer .

Mit diesem Tool können Sie bauen

  • Responsive Layouts
  • Komponenten verwenden
  • Veranstaltungen anrufen
  • mehrere Seiten verwenden
  • in 2D und 3D animieren

und vieles mehr. Auf jeden Fall sollten Sie dieses Tool ausprobieren.

Und ich habe vergessen: Sie können Medienregeln verwenden, die zu Ihrer Frage zu Ansichtsfenstern passen.
Scheint eher eine Werbung als eine Lösung für die gestellte Frage zu sein ...
Bodymovin eine gute Idee für Webanimationen?
AntwortenHierDatenschutz-Bestimmungen1y, 0v