Beste Tools für Webanimationen

Wenn eine Website mehrere kurze, einfache, webbasierte Animationen enthält, mit welcher Software lassen sie sich am besten erstellen? (Am besten in Bezug auf (i) wie schnell die Animationen erstellt werden können; (ii) wie groß die Animationsdateien sind.) Insbesondere beziehe ich mich auf meine Website Socratease

Wenn Sie auf eines der Module klicken, werden Sie bald feststellen, dass es Animationen gibt, die die meisten Lernbildschirme begleiten. Die Animationen sind dazu da, den Inhalt ansprechend zu gestalten. Die Animationen wurden größtenteils mit Adobe Animate und Illustrator erstellt. Es wird als HTML5-Canvas-Element veröffentlicht und die Javascript-Datei wird als separate Datei gespeichert. Wenn die Webseite geladen wird, lädt sie die JS-Datei und rendert die Animation. Wir mussten auf Canvas zurückgreifen, weil Gifs für diese Dateigröße nicht gut genug waren. Und mp4s werden in bestimmten Browsern nicht automatisch geladen. Ich würde mich sehr freuen, wenn ich folgende Hilfe bekomme:

  1. Diese Methode scheint ein bisschen wie ein Hack zu sein: Exportieren auf Leinwand usw. Ich denke nicht, dass es sehr Standard ist. Gibt es langfristige Herausforderungen, die ich beachten sollte? Derzeit gibt es einige Dutzend Animationen, und mein erster Eindruck ist, dass ich dieses System für skalierbar halte.
  2. Neben Animate konnte ich auch After Effects verwenden. Leute, mit denen ich gesprochen habe, scheinen mit AE vertrauter zu sein als mit Animate. Aber wenn ich versuche, eine AE-Animation als Canvas-Element zu exportieren, sind die Dateien ziemlich groß, manchmal bis zu fünfmal so groß. Da die meisten meiner Bildschirme Animationen enthalten, ist die Dateigröße ein großes Problem. Ist AE für solch einfache Animationen ein bisschen übertrieben?
  3. Wenn die aktuelle Architektur die optimale ist, gibt es andere Dinge, die ich tun kann, um die Animationen zu optimieren? Irgendwelche nicht standardmäßigen Einstellungen, die ich beim Veröffentlichen usw. wählen kann, die die Dateigröße reduzieren oder mit weniger Rechenleistung rendern würden?

Antworten (2)

Es gibt eine viel ausgefeiltere Antwort als diese, aber in Bezug auf aktuelle Branchentrends und -entwicklungen kann ich diese relativ kurz halten.

Greensock war bis vor kurzem sehr beliebt für Animationen auf Leinwandbasis. Es war oft der Haupt-Javascript-Code, der die Canvas-Animation antreibt, die Sie auf größeren Websites finden würden. Dies kann manuell, im Code, unter Verwendung von Assets erfolgen, die in Ihrer bevorzugten Software gezeichnet wurden, oder automatisiert mit einer Vielzahl von Software von Drittanbietern, wie z. B. Adobe Animate .

Vieles hat sich dank bodymovin schnell geändert und die Branche hat sich ziemlich schnell darauf zubewegt, da es in Bezug auf automatisierte Webanimation (Interpolation von Keyframes usw.) das Potenzial ein Stück näher an Videostandards gebracht hat.

Wie? Indem Sie eines der wichtigsten Tools der Videobranche verwenden: After Effects , mit dem Sie vertraut zu sein scheinen. Bodymovin ist ein Export-Tool für After Effects , das die Möglichkeiten der verschiedenen Interpolation von Frames, die After Effects verwendet, in eine jsonDatei übersetzen kann, die von HTML-Canvas mit einem Bodymovin- Javascript-Player verstanden werden kann. Einer von After EffectsDie größte Stärke in Bezug auf die Animation ist die Menge an Eigenschaften, die jedes Asset aufweist, die durch eine Vielzahl von Interpolationsmethoden mit Keyframes versehen werden können (z. B. wie man in 5 Sekunden von Frame A nach B kommt. Ist ein scharfer Burst-Start und plötzlicher Stopp oder eine allmähliche Erhöhung/Verringerung der Geschwindigkeit? usw.). Obwohl Aspekte davon mit bestehenden Webanimationswerkzeugen möglich sind, bietet After Effects bessere und einfacher anzupassende Ergebnisse sowie größere Funktionen mit folgenden Pfaden und anderen Werkzeugen, die für die Vektoranimation relevant sind.

Es ist so beliebt, dass AirBnb- und Facebook- Entwicklerteams konkurrierende Tools veröffentlicht haben, um Bodymovin in iOS- und Android-Apps zu bringen.

Warum sind sie alle so eifrig? Neben dem, was ich oben erwähnt habe, ist ein großes Verkaufsargument, dass es unabhängig von der Auflösung ist. Videodateien (egal ob mp4, webm, gif, gifv) haben eine feste Auflösung. Im Internet hat die Verwendung von Bildern für Symbole stark zugenommen, svgda es sich hauptsächlich um eine Vektordatei handelt, die ohne Detailverlust in jeder Größe verwendet werden kann. Sie wissen, dass Sie dieselbe Datei auf einem 4k-Fernseher als mobiles Gerät verwenden können, ohne sich Gedanken über Detailverlust machen zu müssen (bis zu einem gewissen Punkt). Vektoranimationen, wie sie beispielsweise von Bodymovin aus After Effects exportiert werden, tun dasselbe für Videos, die zu reaktionsschnellen Websites und Apps passen, die auf einer Vielzahl von Bildschirmgrößen funktionieren müssen (und als Bonus ohne Verwendung von Flash) .). Der Videoinhalt kann auch so codiert werden, dass er Änderungen der Bildschirmgröße berücksichtigt und nur Aspekte des Videos an den neuen Bildschirm anpasst – nicht alle. Die Dateigrößen sind in der Regel drastisch kleiner als bei einem Rastervideoexport derselben.

Aus Ihrer Frage (Nummer 2) geht nicht hervor, wie Sie versucht haben, After Effects nach zu exportieren canvas? Bis bodymovin war es eine Nischenmöglichkeit, die ungeschickt und nicht zu empfehlen war.

Danke für die ausführliche Antwort! Ja, wir verwenden seit kurzem After Effects mit Bodymovin und ich stimme Ihnen zu. Die Qualität der Animationen ist weit überlegen. Der einzige Nachteil war, dass einige der AE-Effekte nicht mit bodymovin kompatibel sind . In solchen Fällen versuchen wir, den Effekt mit einer anderen Methode nachzubilden. Die Dateigrößen waren mit denen von Animate vergleichbar, das ist also kein Problem mehr. Meine Sorge ist immer noch, dass dies keine von Adobe entwickelte native Erweiterung zu sein scheint. Die Seite wird Tausende von Animationen enthalten. Hoffentlich ist das später kein Problem mehr.
@contrariwise Es ist zwar unmöglich zu beurteilen, ohne einzelne Projekte zu sehen, aber die Einschränkungen von JSON-Animationsvariablen sind nicht immer eine schlechte Sache. Historisch gesehen war das Web voller Animationen, die abschreckend wirken und die Ähnlichkeit mit Web-Layout und Print-Layout in Bezug auf die Interpretation der Informationen nicht berücksichtigen. Dynamische Elemente sind großartig, aber sie müssen sorgfältig beurteilt werden. Ich würde mir keine Sorgen machen, dass Adobe den Export nicht nativ erstellt hat. Sie waren nie die Pioniere der Webtechnologie, sondern nur Vermittler. Irgendwann werden sie dort ankommen.

Meiner Meinung nach sollten wir darauf abzielen, Animationen zu erreichen, indem wir so viel wie möglich die Grundbausteine ​​des Webs verwenden: HTML, CSS und Javascript.

Heutzutage können Sie allein mit CSS einige wirklich beeindruckende Animationen erstellen. Animationen, die vor nicht allzu langer Zeit nur mit Flash oder Javascript möglich waren.

Meine Vorliebe für komplexe Webanimationen ist die Verwendung von After Effects + BodyMovin. Es ermöglicht Ihnen, komplexe After Effects-Animationen als JSON-Datei zu rendern, die Sie dann im Browser auf SVG, HTML und Leinwand rendern können.

Hör zu!

Danke für die Empfehlung! Ja, wir verwenden AE + BodyMovin schon seit einiger Zeit, und wie ich oben erwähnt habe, hat es gute Ergebnisse erzielt. In Bezug auf das Erstellen von Animationen nur mit CSS stimme ich zu, dass das ziemlich cool sein wird. Aber auf unserer Website ist Animation der Inhalt. Es dient nicht nur der Optik. Und wir werden Tausende dieser Animationen haben. Zumindest im Moment glaube ich nicht, dass CSS die effizienteste Art ist, diese Animationen zu erstellen.
Beste Tools für Webanimationen
AntwortenHierDatenschutz-Bestimmungen1y, 0v