SVG Animationen sind das neue Video

soccer.jpg

Es zeigen sich immer mehr Seiten, die mit animiertem Content aufwarten. Meistens kleine Animationen mit Interaktivität. Diese basieren auf Vektor Animationen, die auf SVG, Javascript und CSS basieren.

Déjà-vu?

Bildschirmfoto 2018-03-31 um 23.34.49.png

Diese Anfänge erinnern an Ende der 90er / Anfang 2000. Also Adobe Flash in seiner rudimentären Fassung genau das abgedeckt hatte. Es waren Vektor - Animationen in einer Zeitleiste, die rudimentären Coding angereichert und teil interaktiv wurde. Schnell entwickelte sich Flash zu einem sehr umfangreichem und mächtigem Tool, bis es größten Teils durch Apple zu Fall gebracht wurde und zumindest auf deutschen Webseiten gänzlich verschwunden ist.

Flash ist tot. Lang lebe Animate

Adobe hat vor einiger Zeit sein Flash Programm um das Konzept der HTML5 Animation erweitert, um eben diese Lücke wieder füllen zu können.
Das Prinzip: Timeline Animation in Kombination mit Javasctipt. Als Output entsteht ein HTML5 Package aus CSS, JS, SVG und JPGs das ohne Plugin auskommt. Dadurch sind für den Designer wieder "komplexere" Animationen möglich, die über klassische JS / CSS Programmierung kaum umsetzbar sind.
Allerdings reichen die Möglichkeiten der Programmierung nicht annähernd an die Hochzeiten von Adobe Flash heran. Zu Zeiten von AS3 war eine Objektorientiere Programmierung mit Klassen und Vererbung möglich. Dadurch konnten sehr komplexe und Umfangreiche Websites erstellt werden. Bei aktuellem Animate Stand kann man dies nur in Grundzügen durch verschachtelte Klassen und Bibliotheken auffangen. Es erinnert sehr an die Anfänge.

Animate vs. Video

Warum wieder auf Vektor Animation zurückgreifen, wenn doch Video-Streamen möglich ist?

  • Vektor Animationen haben deutlich geringere Datenmenge
  • Animation kann um Interaktivität erweitert werden
  • Vektoren sind frei skalierbar und bleiben dabei immer scharf
  • Komplexere Vektoranimationen benötigen mehr Rechenleistung
  • Vektor Animationen werden auch auf iOS Mobilgeräten sofort abgespielt. Es muss nicht erst getappt werden, so dass es dann in einem Layer öffnet.
  • Einige Browser blockieren sein automatisches Abspielen von Videos.
Andrea Cavallaro