Menü von 247GRAD

Fast 25 Jahre Google – Warum SEO heute der falsche Ansatz ist Warum SEO heute der falsche Ansatz ist Webinar ansehen

05.04.2018 . Design & Development . Thomas Christian Busenkell

The Illusion of Life: 12 Animationsprinzipien

Wir erklären, warum Bugs Bunny, Donald Duck, Micky Maus & Co. von Anfang an so sehr bewegt haben.

Auf Facebook teilen
Auf Twitter teilen
Per WhatsApp versenden
Auf Reddit teilen
Per E-Mail teilen

Der Begriff Illusion of Life und die damit verbundenen Regeln wurden während des Golden Age of American Animation in den Dreißigerjahren von Disney’s Nine Old Men bei der Kreation von ikonischen Charakteren wie Bugs Bunny, Donald Duck, oder Micky Maus geprägt. Diese Bewegungsprinzipien sollten für die Entwicklung einer realistischeren Animation unter Einhaltung der grundlegenden physikalischen Gesetze genutzt werden. Aber auch abstraktere Aspekte der grundlegenden Charaktererstellung wie „emotional timing“ und „character appeal“ gehören zu diesen Grundsätzen.

Ursprünglich wurden diese Regeln für handgezeichnete Animationen entwickelt und später für die Computeranimation adaptiert. Noch heute haben sie für die heutige Animation in Videos eine hohe Relevanz. 1981 erschien das Buch „The Illusion of Life: Disney Animation“ von Frank Thomas und Ollie Johnston, das sich mit den Prinzipien einer natürlichen Bewegungen in Animationen auseinandersetzt.

Illusion of Life

Wenn es auch nur ein einfache Würfel sind, die im Folgenden das zentrale Element der Animationen sind, meint man sofort den Stil alter Disney-Filme erkennen zu können. Das Spannende: Selbst in aufwendigen CGI-Orgien der Gegenwart scheinen diese Regeln noch Bestand zu haben. Eine gleichermaßen beeindruckende wie sehenswerte Arbeit.

Meine Damen und Herren, hier nun also die 12 Animationsregeln:

1. Quetschen & Strecken
(Squash & Stretch)

http://the12principles.tumblr.com/post/84179300674/squash-stretch


Die Formen der Figuren werden während einer Bewegung zusammengedrückt oder in die Länge gezogen, wobei das Gesamtvolumen der Form immer erhalten bleiben muss. Dies dient der Darstellung des formeigenen Gewichts oder der Darstellung von äußeren Kräften, die auf die Figur einwirken. Lebende Figuren deformieren sich bei einer Bewegung immer, wie zum Beispiel der Bizeps während einer Armbeuge.

 

2. Ausholen oder Vorwegnehmen
(Anticipation)

http://the12principles.tumblr.com/post/84179271499/anticipation


Wie beispielsweise bei dem Ausholen vor einem Wurf oder dem Anlaufnehmen vor einem Sprung, startet auch die Hauptbewegung einer Figur mit einer Gegenbewegung. So sind die eigentlichen Bewegungen – in diesem Beispiel ist es der Wurf oder der Lauf – besser les- und voraussehbar, wodurch sie natürlicher wirken.

In der Regel besteht eine Bewegung aus drei Phasen:

  • Vorbereitung der Aktion (Anticipation)
  • Aktion
  • Beendigung der Aktion

 

3. Inszenierung der Posen 
(Staging)

http://the12principles.tumblr.com/post/84179241059/staging


Bei der Inszenierung fokussiert man sowohl die Anordnung der einzelnen Figuren innerhalb der Szene als auch die Kreation von unverwechselbar erkennbaren Posen. Die Silhouette dient dabei als Kontrollhilfe für den Animator. Im Idealfall ist der Körperausdruck so unmissverständlich, dass er an den Umrissen einer Figur erkennbar ist. Die Idee dabei ist, eine Aktion, eine Persönlichkeit oder einen Ausdruck eindeutig zu inszenieren und die Aufmerksamkeit des Zuschauers genau auf den Punkt zu lenken, wo die primäre Aktion geschieht.

 

4. Drauflos & Schlüsselbildanimation 
(Straight Ahead & Pose-to-Pose)

http://the12principles.tumblr.com/post/84179180509/straight-ahead-pose-to-pose


In diesem Prinzip von Illusion of Life dreht sich alles um das sequentielle Planen und Konstruieren von Bewegungen.

Eine Straight-Ahead-Animation beginnt mit dem ersten Keyframe oder der ersten Zeichnung und wird chronologisch, Bild für Bild, weiter animiert. Diese Art der Konstruktion ist vor allem bei unkontrollierbaren Bewegungen, wie z. B. das Lodern einer Flamme sinnvoll, da man aus dieser Bewegung keine Schlüsselbilder wahrnehmen kann und sich bei der Animation auf physikalische Grundsätze stützt. Im Vergleich dazu konzentriert sich eine Pose-to-Pose-Animation primär auf die Schlüsselbilder einer Bewegung.

Kleines Beispiel gefällig?: Nehmen wir an, wir möchten einen Mann über einen Abgrund springen lassen. Unsere Schlüsselbilder sind der Start von Punkt 1, der Höhepunkt während des Sprungs und abschließend die sichere Landung auf Punkt 2. Wenn man in der Planung dieser Animation Straight Ahead vorgeht und jedes einzelne Bild nacheinander erstellt, kann es schnell dazu kommen, dass unsere Figur verformt wird (siehe 11. Solid Drawing) oder den gewünschten Punkt verfehlt.

Straight-Ahead-Animationen sind dynamischer, während Pose-to-Pose-Animationen kontrollierbarer und dadurch für komplexere Bewegungen mit mehreren Elementen geeignet sind.

 

5. Weiterführende und überlappende Bewegung 
(Follow Through & Overlapping Action)

http://the12principles.tumblr.com/post/84177204689/follow-through-overlapping


Follow Through wird oft angewandt, um zu beschreiben, wie unbelebte Elemente von Figuren wie Haare oder getragene Kleidung bei Bewegungen der Gliedmaßen einer Bewegung zeitversetzt folgen, dann über den Endpunkt dieser Bewegung hinausschießen, um final in ihre Ruheposition zurückzufallen. Dagegen müssen bei Overlapping Action nicht notwendigerweise alle abhängigen Elemente eine Bewegung gleichzeitig ausführen oder zu Ende bringen. Die Definitionsgrenze zwischen Follow Through und Overlapping Action sind dabei oft fließend.

 

6. Beschleunigung und Abbremsung 
(Slow In & Slow Out)

http://the12principles.tumblr.com/post/84177132184/slow-in-slow-out


Dieses Prinzip basiert darauf, dass natürliche Bewegungen meist langsam beginnen, anschließend stark beschleunigen und nach dem Geschwindigkeitshöhepunkt zum Ende wieder langsam abbremsen. Konkret bedeutet dies, dass sowohl am Anfang wie am Ende einer Bewegung mehr Einzelbilder verwendet werden als in der Mitte.

 

7. Bewegungsbögen 
(Arcs)

http://the12principles.tumblr.com/post/84177008544/arcs


Nur sehr wenige Objekte in der Natur sind in der Lage, Aktionen linear auszuführen. Die meisten Lebewesen bewegen sich auf einem kreisförmigen Pfad, der auch als Arc bezeichnet wird. Um eine Bewegung natürlich und nicht mechanisch aussehen zu lassen, ist es daher besonders wichtig, einen festen Drehpunkt wie ein Gelenk für die Dynamik zu definieren, an dem sich das Objekt orientiert.

 

8. Zweitrangige / Unterstützende Bewegung 
(Secondary Action)

http://the12principles.tumblr.com/post/84176923119/secondary-action


Diesem Prinzip liegen Bewegungen einer Figur zugrunde, welche gleichzeitig geschehen und die eigentliche Hauptbewegung als primäre Aktion unterstützen. Diese helfenden Bewegungen werden oft dazu eingesetzt, der Figur eine semantische Emotion hinzuzufügen.

Stellt euch vor: Eine Figur, die von links nach rechts geht, kann dabei wütend auf den Boden stampfen oder besonders vorsichtig einen Fuß vor den anderen setzen, um zu schleichen.

 

9. Bewegungsdauer
(Timing)

http://the12principles.tumblr.com/post/84176765864/timing


Das Timing ist maßgebend sowohl für die Dauer von Bewegungen als auch für den Zeitraum zwischen einzelnen, von einander unabhängigen Bewegungen. Dieser Aspekt ist stark vom Stil des Animators und dem Charakter der abgebildeten Figur (siehe 12. Appeal) abhängig. Seid euch darüber bestenfalls im Klaren, wie schnell oder langsam sich eine Figur aufgrund ihres Körpers, bzw. Gewichts bewegen kann. Oder auch wie schnell oder langsam sie Bewegungen aufgrund ihrer derzeitigen Emotion ausführt und wie viele Einzelbilder die Darstellung des Zeitraums benötigt.

 

10. Übertreibung, Karikatur
(Exaggeration)

http://the12principles.tumblr.com/post/84176726604/exaggeration


Um die Posen und Bewegungen von gezeichneten Charakteren besonders deutlich zu machen, ist es oft nötig, ihr Aussehen und ihre Bewegungen zu übertreiben. Hierbei müsst ihr kontrollieren, ob die Übertreibung der Moves negativ beeinflusst. Der Fluss kann durch eine Karikatur schnell hektisch oder ungenau werden und die eigentliche Szenenaussage verfälschen.

 

11. Solides Zeichnen
(Solid Drawing)

http://the12principles.tumblr.com/post/84175744754/solid-drawings


Hier richten wir den Fokus auf das grundsätzliche Talent des Zeichners, konsequente Figuren zeichnen zu können. Dabei ist die eigentlich Schwierigkeit, in verschiedenen Bewegungen und Perspektiven eine Figur proportional und perspektivisch stets korrekt darzustellen, ohne die Qualitäten in der Veränderung zu verlieren.

 

12. Charisma, Charme und Reiz 
(Appeal)

http://the12principles.tumblr.com/post/84175638939/appeal


Bei dem letzten Animationsprinzip dreht sich alles vor allem um die Persönlichkeit einer Figur. Das Appeal beschreibt, dass sowohl Aussehen und Design der Figur als auch ihre Posen und Bewegungen gefällig und dem Charakter der Figur angemessen sein sollen. Auch hierbei gibt es viel Interpretationsspielraum. Eine böse Figur kann schön wirken, durch ihr Schauspiel aber tatsächlich den wahren Charakter offenbaren, während eine häßliche Figur durch ihr Auftreten auch liebenswert werden kann. Appeal bedeutet in diesem Fall allerdings nicht automatisch Schönheit, sondern das Bestreben, die innere Qualität einer Figur effektiv und dem Charakter entsprechend darzustellen.

Bedeutung von The Illusion of Life für die Animation

Die Prinzipien von The Illusion of Life sind weniger ein Lehrplan. Vielmehr verstehen sie sich als Geschichte der Entwicklung von (Disney)animation, die durch die Augen der Männer erzählt, die sie jahrzehntelang unter Walt Disneys Führung zu den höchsten technischen Höhen von Amerikas goldenem Animationszeitalter gebracht haben. Frank Thomas und Ollie Johnson schreiben hier nicht nur irgendetwas. Wir erfahren wirklich viel darüber, wie die Trickfilme in den Anfangszeiten der Disney-Studios entstanden sind und warum uns Bewegung und Animation noch immer so faszinieren. Ideal also für alle, die sich für Animation interessieren und für diejenigen, die es vorhaben!

Animationsprinzipien treffen Social Media

Vielleicht fragt ihr euch, warum ich euch das alles erklärt habe. Als Art Director bei 247GRAD begegne ich nicht nur jeden Tag diesen Regeln. Wir wenden sie hier auch täglich beim Design von Websites und Mobile Apps an. Einen besonders hohen Stellenwert haben Animationen aber natürlich auch bei der Kreation von Social-Media-Content. Da vor allem Bewegtbild eine immer größere Relevanz erfährt, lassen sich die Regeln auch hier hervorragend anwenden.

Habt ihr Lust, euch abschließend noch zwei Beispiele anzusehen?

 

In diesem Video bekommt das leckere Pfannenbrot durch das Hinzufügen und Animieren der beiden illustrativen Arme einen liebenswerten Charakter (Appeal). Durch das wilde Hüpfen wirkt das vegane Brot besonders wütend (Exaggeration). Selbstverständlich bewegen sich die Arme mit dem „Körper“ des Brotes (Secondary Action).

 

Aufmerksamen Beobachtern ist sicher aufgefallen, dass die Bewegungen in dem Video deshalb so realistisch erscheinen, weil sie gleich mehrere Prinzipien vereinen. Die Position des Mauszeigers beispielsweise orientiert sich an einem Bewegungsbogen (Arc). Gleichzeitig beginnt die Animation langsam, beschleunigt bis zum Geschwindigkeitshöhepunkt und wird zum Ende wieder langsam (Slow In & Slow Out).

Wie sehr setzt ihr bereits Videos und Animationen im Rahmen eurer Kampagnen ein? Wenn ihr an dieser Stelle Support benötigt oder sonst zu diesem Thema Fragen habt, sprecht uns gerne persönlich darauf oder schickt uns eine Nachricht. Wir finden für euch ganz bestimmt richtig spannende Lösungen.

Kommentare

Keine Kommentare vorhanden

Kommentieren

Vielen Dank, {{inputName}}!

Wir prüfen deinen Kommentar und veröffentlichen ihn in Kürze hier im Blog.

247GRAD

Kommunikation braucht Dialog.
Schreiben Sie uns!