Animationsbeispiel Bilderhüpfen

Animationen in Internetbrowsern sind seit 1995 mit dem Flash Plugin möglich, seit Anfang der 00er gibt es aber auch verschiedene ander Wege. Beeinflussung des Fensterinhalts mit Javascript ist ein Beispiel. Der zu dieser Zeit weit verbreitete MS Internet Explorer konnte aber Skript-Animationen nicht synchron darstellen, einen flüssigen Bewegungsablauf war mit ihm nicht möglich. Das WWW-Konsortium entwickelte in der Zeit als Antwort auf dass proprietäre Flash mit seiner teuren Entwicklungsumgebung die freien Standards SVG und SMIL.

Etwa 2001 hab ich da mal ein paar Animationen gebastelt, davon läuft heute (2015) nur noch das Beispiel im Flash PLayer, der ja auch bald abgeschafft werden soll. Ein Teil von dem alten Kram, namentlich SVG, ist heute aber im neuen HTML5-Format nutzbar, was mich zu einer kleinen Überarbeitung angeregt hat.


Die 2. Version des SMIL-Formats (Synchronized Multimedia Integration Language, will wie das englische "smile" gesprochen werden) des w3c (World Wide WebConsortium) bietet Möglichkeiten einer deklarativen Animation. Das bedeutet, dass die Animation in einem vorgegebenen Format beschrieben wird, nicht aber Programmiert werden muss. In Browsern wurde dieses Format nur zwischenzeitlich vom MS Internet Explorer zumindest in den Versionen 5.5 und 6 unterstützt, neuere Versionen interpretieren das Format allerdings nicht mehr. Ein kleines Beispiel hierzu:

Hüpfendes Bild mit SMIL (Nur MS Internet Explorer von 5.5 bis ca. 6.x)

Die SMIL Animations-Syntax kann man auch im Vektor-Grafik-Format SVG (Scalable Vector Graphics , ebenfalls w3c, s.o.) verwenden, dem sie ursprünglich sogar entstammt. Um sich das ganze im Browser anzusehen, braucht man zu der Zeit allerdings den Adobe SVG-Plugin. Nach der feindlichen Übernahme von Macromedia (und damit des Flash Players) durch Adobe 2005 stellte Adobe aber die Entwicklung des SVG-Plugins ein. Erst einige Jahre später begannen Browser, SVG als natives Format zu unterstützen, sodass das alte Beispiel heute in den meisten Browsern außer den Internet Explorer läuft:

Hüpfendes Bild als standalone SVG (alle aktuelleren Browser außer Internet Explorer)

Das Beispiel ist 2001 im Rahmen meines Vortrags an der Uni Bonn zum Thema SMIL entstanden:

"SMIL - Ein standartisiertes Multimedia-Integrationsformat"

Das gleiche Beispiel (leicht vereinfacht) gibts auch als Flash, umgesetzt als sogenannter "Tween". Dieser ist auch ohne prozedurale Programmierung (in Flash wäre das "ActionScript", eine von JavaScript abgeleitete Sprache) möglich. Man erkennt allerdings bei genauem Hinsehen, dass die Bewegungsparabel zu einzelnen Geraden (also zu einem Polygonzug) approximiert wird:

Hüpfendes Bild mit Flash(Nur mit Flash Plugin)

Flash Quelldatei(.fla-file)


Die obigen Beispiele stammen so ungefähr von 2001. Seit der Veröffentlichung von HTML5 im Oktober 2014 sind in kompatiblen Browsern die meisten Module von SVG direkt in Html einbettbar. Ein Teil der Animation Modules von SMIL sind wiederum direkter Bestandteil (gleicher Namespace) des Sprachumfangs von SVG. Mit einem aktuellen Browser (außer Internet Explorer) sollte die Animation jetzt direkt hier zu sehen sein (SVG in HTML5 eingebettet).