Welche Formate, die Animationen unterstützen, sind für das Web geeignet?

13

Welche Formate, die Animationen unterstützen, sind für das Web geeignet und was sind die Vor- und Nachteile der einzelnen Formate?

image-format animation

— Alinium
quelle

Siehe auch Was ist der beste Weg, um eine Illustration für das Web zu animieren? Weitere Informationen zu den einzelnen Formaten

— Zach Saucier

13

Es hängt davon ab, welche Art von Animation Sie benötigen.

GIF-Bilder - Vollständig unterstützt, jedoch nur eingeschränkt für Frames verwendbar. .png-Dateien sollen Animationen unterstützen, aber wenn überhaupt, sieht man sie nicht sehr oft in freier Wildbahn.
Flash, Silverlight und andere Plugins - Flash ist am weitesten verbreitet, aber alle Plugins müssen in den Browsern installiert sein und können nicht unbedingt auf dem Computer eines Benutzers installiert werden. Funktioniert möglicherweise nicht für mobile Plattformen.
CSS3 - Eingeschränkte Transformationen oder Animationen, eingeschränkte Browserunterstützung.
HTML5-Video - Die zukünftige, aber eingeschränkte Browserunterstützung.
JavaScript - Muss aktiviert sein, sollte aber nahezu universelle Browser-Unterstützung haben. Begrenzte Animationsarten. Siehe Raphael.js .
Canvas-Tag - Moderne Browser-Unterstützung, unterstützt jedoch umfangreiche Animationen.

— Virtuosi Media
quelle

Ich werde hier nitpicken, aber <canvas>Animation ist im Wesentlichen JavaScript - es ist nur ein anderes Format, in dem Sachen gezeichnet werden können. Wenn Sie präzise sein möchten, sollten Sie zwischen animierenden HTML-Elementen, SVG (von raphael.js verwendet) und HTML5<canvas>

— Yi Jiang,

Der Unterschied zwischen SVG- und Canvas-Animation auf den Punkt gebracht: Mit SVG können Sie Daten und Ereignisse wie Klicken und Bewegen mit jedem Pfad verknüpfen und wie mit einem Div interagieren, während der Browser in Canvas eher Dinge erstellt und bereitstellt Diese Verhaltensregeln vergessen sie dann. SVG gibt es in IE vor IE 9 nicht, weshalb Raphael großartig ist - es steuert SVG oder verwendet in IE6-8 IE's altes Eigenmarkenäquivalent (genannt VML). Das einzige, wovon ich weiß, dass Raphael nicht funktioniert, sind alte Android-Standardbrowser (vor Version 2, glaube ich).

— user56reinstatemonica8

2

Dies ergänzt die großartige Antwort von Virtuosi Media:

Apple hat kürzlich Standbilder im JPEG- und PNG-Format für die Animation seiner Website verwendet. Sie verwenden JavaScript, um die Bilder zu wechseln. Es ist eine großartige Technik, wenn Sie nicht zu viele Frames haben, Alphatransparenzunterstützung benötigen, die Animation auf der Seite angezeigt werden soll und eine breite Browserunterstützung wünschen. Der Nachteil ist die Downloadgröße und der Aufwand.

Es kann auch interaktiv sein. Wenn Sie zum Abschnitt "Smart Cover" auf der iPad-Seite von Apple blättern, können Sie dies in Aktion sehen: http://www.apple.com/de/ipad/features/

— Marc Edwards
quelle

1

Beim Überlagern von Bildern mit Transparenz über animierten Bildern in Ebenen unter dem Bild. Sie werden feststellen, dass PNG24 das einzige Bildformat ist, in dem das Anti-Aliasing korrekt mit den Hintergrundbildern verschmilzt. Mit GIF und PNG8 werden Sie feststellen, dass Ihre Kanten klobig sind. Sieht nicht sehr gut aus, ist aber sehr leicht zu übersehen.

— John Drefahl
quelle