The Illusion of Life

„NANTS INGONYAMA BAGITHI BABBA“ – Die Vögel fliegen durch die Savannah, Erdmännchen sammeln sich in einer Reihe, die Sonne steigt am Horizont empor und der Tag beginnt. Sicher jeder hat König der Löwen schon mal gesehen. Die wunderbaren Landschaften und liebenswerten Charaktere, die in ihren Bewegungen so lebensecht wirken.

Aber was macht es aus, dass uns die Disneycharaktere so faszinieren und wir so leicht einen Narren an ihnen fressen? Frank Thomas und Ollie Johnston, zwei von Disneys Mitarbeitern, haben 1981 ein ganzes Buch verfasst, „The Illusion of Life“, über Praktiken, die schon in den 30er Jahre angewendet wurden. Darin sprechen sie von zwölf Animationsprinzipien, die den bewegten Objekten eben jenes Leben einhauchen, das auch die Disneycharaktere in sich tragen. Auch heute noch sind das Buch und diese zwölf Regeln aktuell, finden sich immer wieder Verweise dazu in Blogeinträgen zum Thema Animation & Motion Design. Auch hier soll es euch nicht vorenthalten werden: Wikipedia: basic principles of animation.

Doch wie wir alle wissen, sagt ein Bild mehr als tausend Worte. Und da es um Bewegung geht, sollte diese auch grafisch aufgearbeitet sein. Deshalb nehmt euch doch ein paar Minuten Zeit und findet heraus, was denn genau Disney Animationen ausmachen:

12 Principles of Animation

Kritik
von Tobias Balmer

Idee

Immer wieder wenn ich Blogeinträge und Artikel gelesen habe, in denen es um Animation/Motion Design ging, kamen dieses Buch und die zwölf Animationsprinzipien zur Sprache. So richtig dem gewidmet habe ich mich aber nie. Als wir dann die Einführung in Digezz bekamen, fiel mir gleich dies als mögliches Thema ein um mich vertieft damit zu befassen.

Konzept

Den Wikipediaartikel zu den Animationsprinzipien hatte ich glücklicherweise noch als Lesezeichen gespeichert. Ich konnte also gleich loslegen, den Inhalt zu studieren. Der Text war ziemlich selbsterklärend und es entstanden schnell schon die ersten Skizzen. Die Schwierigkeit war, alle Prinzipien auf das grundlegende herunterzubrechen und mit kleinen zweidimensionalen Animationen zu vermitteln.

Die nächste Frage war die Wahl des Mediums: Es hätte auch alles z.B. in Adobe AfterEffects umgesetzt werden können aber für mich gab es mehrere Vorteile die für die Realisation mit HTML/CSS/JS sprachen:

- Es stellte eine grössere Herausforderung dar als solch „simple“ Animationen mit AE umzusetzen
- Die Möglichkeiten von Webtechnologien aufzeigen
- Interaktivität: Reaktion auf Events (Play/Pause, Texte ein/ausblenden)
- Dynamik: Optimierung von Desktop bis Smartphone

Nicht zuletzt muss man einer Webumsetzung aber auch einen Vorteil bei der Ladezeit einräumen, der nicht unterschätzt werden darf.

Erkenntnisse

Das ganze Projekt umzusetzen hat Spass gemacht auch wenn es doch zeitlich und nervlich intensiv war. Es bot mir die Möglichkeit, mich vertieft mit CSS Animationen zu befassen und Stärken und Schwächen zu testen. Ausserdem war es gleich eine gute Übung auf jQuery und andere Drittbibliotheken zu verzichten (Ausnahme: Fastclick.js) und mit purem Javascript zu coden. Nicht immer ganz einfach aber dennoch hat es funktioniert. Da die Animationen selbst mit CSS umgesetzt sind, machte ich das Abspielen auch bei deaktiviertem Javascript ebenfalls möglich.
Von allen gröberen Schwierigkeiten blieb ich dann aber doch nicht verschont: Bei Mozilla FireFox haben zwei Animationen leichte Darstellungsbugs die nicht ohne völliges Umschreiben behoben werden können. Ausserdem war ich sehr überrascht, als ich feststellte, dass der Internet Explorer 11 den HTML5 Tag <main> immer noch nicht offiziell unterstützt!

Übers ganze gesehen war es aber auf allen Ebenen ein lehrreiches Projekt.

Keine Kommentare

Schreibe einen Kommentar