Differences

This shows you the differences between two versions of the page.

--- about:grundlagen_der_animation [2025/05/01 11:20] – [Storyboard und Ablaufplanung] Felix Hardmood Beck
+++ about:grundlagen_der_animation [2025/05/04 16:40] (current) – [Die 12 Prinzipien der Animation] Felix Hardmood Beck
@@ Line 1: / Line 1: @@
 ====== Grundlagen der Animation ======
-Diese Seite bietet eine Einführung in zentrale Grundlagen der Animation aus gestalterischer Perspektive. Die Inhalte bilden die theoretische und konzeptionelle Grundlage für einfache Animationsübungen (z. B. in GIF-Form) und dienen als Ausgangspunkt für spätere Arbeiten mit interaktiven oder generativen Tools wie TouchDesigner oder vvvv. Animation wird hier nicht nur als technische Disziplin verstanden, sondern als eigenständiges gestalterisches Medium, das Zeit, Bewegung und Transformation als kreative Ausdrucksmittel nutzt.
+Diese Seite bietet eine Einführung in zentrale Grundlagen der Animation aus gestalterischer Perspektive. Die Inhalte bilden die theoretische und konzeptionelle Grundlage für einfache Animationsübungen (z. B. in GIF-Form) und dienen als Ausgangspunkt für spätere Arbeiten mit interaktiven oder generativen Tools wie [[https://editor.p5js.org|P5.JS]], [[https://derivative.ca/download|TouchDesigner]] oder [[https://vvvv.org|vvvv]]. Animation wird hier nicht nur als technische Disziplin verstanden, sondern als eigenständiges gestalterisches Medium, das Zeit, Bewegung und Transformation als kreative Ausdrucksmittel nutzt.
+Die untere Übersicht dient als vertiefter theoretischer Einstieg und Referenzmaterial für Übungen, Besprechungen und spätere Projekte im Bereich Zeit-basierter Gestaltung.
 ===== Zeit und Bildfrequenz =====
-Die Grundlage jeder Animation ist die Erzeugung von Bewegung durch das schnelle Hintereinanderzeigen leicht veränderter Einzelbilder. Dieses Phänomen nutzt die Trägheit der menschlichen Wahrnehmung: Wenn pro Sekunde genügend Bilder gezeigt werden, entsteht der Eindruck kontinuierlicher Bewegung. Dieses Prinzip ist auch als „Persistence of Vision“ bekannt und bildet die Basis sowohl für klassische Trickfilmtechnik als auch für digitale Echtzeit-Animation.
+Die Grundlage jeder Animation ist die Erzeugung von Bewegung durch das schnelle Hintereinanderzeigen leicht veränderter Einzelbilder. Dieses Phänomen nutzt die Trägheit der menschlichen Wahrnehmung: Wenn pro Sekunde genügend Bilder gezeigt werden, entsteht der Eindruck kontinuierlicher Bewegung. Dieses Prinzip ist auch als „Persistence of Vision“((p5.js Coding Tutorial: Persistence of Vision Effect: https://www.youtube.com/watch?v=qO6A8iZZM04)) bekannt und bildet die Basis sowohl für klassische Trickfilmtechnik als auch für digitale Echtzeit-Animation.
-Ein zentraler technischer Parameter dabei ist die Bildfrequenz, gemessen in Frames per Second (FPS). Der klassische Kinostandard liegt bei 24 FPS – eine Geschwindigkeit, die als ausreichend empfunden wird, um Bewegungen flüssig, aber dennoch filmisch zu gestalten. Fernsehen, Videospiele und digitale Medien arbeiten häufig mit 25, 30 oder sogar 60 FPS. Höhere Framerates führen zu technisch „sauberer“ wirkender Bewegung, können aber – je nach Kontext – auch steril oder zu glatt wirken und emotionale Gestaltungsabsicht abschwächen.
+Ein zentraler technischer Parameter dabei ist die Bildfrequenz, gemessen in Frames per Second (FPS). Der klassische Kinostandard liegt bei 24 FPS – eine Geschwindigkeit, die als ausreichend empfunden wird, um Bewegungen flüssig, aber dennoch filmisch zu gestalten. Fernsehen, Videospiele und digitale Medien arbeiten häufig mit 25, 30 oder sogar 60 FPS. Höhere Framerates führen zu technisch „sauberer“ wirkender Bewegung, können aber – je nach Kontext – auch steril oder zu glatt wirken und emotionale Gestaltungsabsicht abschwächen. Eine einfache visuelle Darstellung, die zeigt, wie sich unterschiedliche Bildfrequenzen auf die Wahrnehmung von Bewegung auswirken ist in [[https://hugelol.com/lol/364250|diesem Beispiel]] zu sehen.
 Gestalterisch ist die Wahl der Bildfrequenz niemals neutral: Sie beeinflusst nicht nur die technische Qualität, sondern auch die Rhythmik, Wirkung und Ausdruckskraft einer Animation. Eine niedrige Framerate kann bewusst als Stilmittel eingesetzt werden – etwa um Grobheit, Naivität oder Nostalgie zu erzeugen. Umgekehrt kann eine hohe Framerate zur Darstellung von Präzision, Schnelligkeit oder digitaler Glätte beitragen. In der Praxis entstehen viele gestalterische Entscheidungen im Zusammenspiel von Framerate, Bildanzahl und tatsächlicher Abspielgeschwindigkeit.
@@ Line 27: / Line 29: @@
 Die von den Disney-Animatoren [[https://en.wikipedia.org/wiki/Frank_Thomas_(animator)|Frank Thomas]] und [[https://en.wikipedia.org/wiki/Ollie_Johnston|Ollie Johnston]] formulierten zwölf Prinzipien bilden ein praxisorientiertes Rahmenwerk, um Bewegung glaubhaft, lesbar und gestalterisch wirksam zu gestalten(([[https://www.amazon.de/-/en/Illusion-Life-Disney-Animation-Editions/dp/0786860707|The Illusion of Life: Disney Animation, 1981]][[http://example.com|External Link]])). Sie gelten als Grundlage für jede Form der Animation, auch in nicht-narrativen oder softwarebasierten Kontexten.
-  - **Squash and Stretch**: Dieses Prinzip beschreibt die Veränderbarkeit von Volumen unter Beibehaltung der Gesamtmasse. Wenn sich ein Objekt staucht oder dehnt – etwa ein springender Gummiball – entsteht der Eindruck von Elastizität und Gewicht. Dabei darf sich das Volumen nicht verändern: Wird ein Objekt gestreckt, muss es gleichzeitig schmaler werden. Squash and Stretch wird häufig bei cartoonesken Bewegungen verwendet, kann aber auch subtil in realistischer Animation eingesetzt werden. Es verleiht Bewegung Plastizität und hilft, physikalische Eigenschaften wie Materialität oder Impuls zu vermitteln.
+  - **Squash and Stretch**: Dieses Prinzip beschreibt die Veränderbarkeit von Volumen unter Beibehaltung der Gesamtmasse. Wenn sich ein Objekt staucht oder dehnt – etwa ein springender Gummiball – entsteht der Eindruck von Elastizität und Gewicht. Dabei darf sich das Volumen nicht verändern: Wird ein Objekt gestreckt, muss es gleichzeitig schmaler werden. Squash and Stretch wird häufig bei cartoonesken Bewegungen verwendet, kann aber auch subtil in realistischer Animation eingesetzt werden. Es verleiht Bewegung Plastizität und hilft, physikalische Eigenschaften wie Materialität oder Impuls zu vermitteln. \\ \\ {{:about:animation_prinzip_huepfender_ball.png?direct&800|}}
   - **Anticipation (Vorbereitung)**: Anticipation bedeutet, dass eine Bewegung vorbereitet wird, um sie verständlich zu machen. Bevor jemand springt, holt er aus – diese vorbereitende Geste lenkt die Aufmerksamkeit des Publikums und kündigt das Kommende an. Anticipation erhöht nicht nur die Lesbarkeit der Aktion, sondern gibt dem Zuschauer Zeit zur Reaktion. Auch in abstrakten Animationen kann sie eingesetzt werden, etwa durch visuelle Spannung oder ein kurzes Verharren vor einer plötzlichen Veränderung. Ohne Anticipation wirken Bewegungen abrupt, unverständlich oder zu schnell.
   - **Staging (Inszenierung)**: Staging ist die visuelle Inszenierung von Aktion, Emotion oder Information. Ziel ist es, das Wesentliche klar und eindeutig zu präsentieren. Dazu gehören Komposition, Blickführung, Lichtsetzung, Bewegungsführung und Timing. Staging stellt sicher, dass das Publikum genau weiß, worauf es achten soll, und dass Nebenelemente die Hauptaussage nicht überlagern. Auch in reduzierter, grafischer oder abstrakter Gestaltung ist eine durchdachte Inszenierung essenziell.
@@ Line 90: / Line 92: @@
 Schließlich gilt: Je komplexer die Animation, desto wichtiger die Planung. Auch in Projekten mit Echtzeit-Rendering, interaktiven Elementen oder generativem Verhalten hilft ein storyboard-ähnliches Vorgehen – etwa in Form von Flussdiagrammen, Ablaufskizzen oder Mapping-Strukturen. Es schafft Übersicht, ermöglicht Abstimmung im Team und reduziert spätere Korrekturschleifen erheblich. Die Fähigkeit, Ideen strukturiert vorzudenken und visuell vorzustrukturieren, ist daher eine grundlegende Kompetenz jeder professionellen Animationspraxis.
 ===== Technische Grundlagen =====
-Technische Parameter wie Auflösung, Dateiformat, Farbmodell und Bildrate beeinflussen die Wiedergabequalität, Kompatibilität und Weiterverarbeitung. Das GIF-Format beispielsweise eignet sich für einfache Loop-Animationen, ist aber auf 256 Farben beschränkt. Videoformate wie MP4 bieten höhere Qualität und Tonunterstützung, sind dafür aber weniger interaktiv. Ein fundiertes Verständnis der technischen Bedingungen ist Voraussetzung für gezielte gestalterische Entscheidungen.
-----
+Die Qualität, Funktionalität und Wirkung einer Animation hängen nicht nur von gestalterischen Entscheidungen ab, sondern in hohem Maße auch von den zugrunde liegenden technischen Parametern. Dazu zählen unter anderem Auflösung, Bildfrequenz, Farbmodell, Dateiformat und Komprimierung. Diese Aspekte bestimmen, wie die Animation dargestellt wird, ob sie sich für bestimmte Plattformen eignet, wie sie verarbeitet oder weiterverwendet werden kann – und letztlich, wie sie wahrgenommen wird.
+Die **Auflösung** einer Animation – also die Anzahl der Bildpunkte in Breite und Höhe – beeinflusst sowohl die Detailgenauigkeit als auch die Dateigröße. Eine niedrige Auflösung kann im gestalterischen Kontext gezielt eingesetzt werden (z. B. für Retro- oder Pixelästhetik), birgt aber Einschränkungen hinsichtlich Lesbarkeit und Skalierbarkeit. Höhere Auflösungen sind für Videoexporte oder großflächige Darstellungen notwendig, führen jedoch zu längeren Ladezeiten und höherem Speicherbedarf.
+Das **Dateiformat** entscheidet über Kompatibilität, Qualität, Dateigröße und verfügbare Funktionen wie Transparenz oder Ton. Das **GIF-Format** etwa eignet sich hervorragend für kurze, loopende Animationen und wird von fast allen Plattformen unterstützt – es ist allerdings auf 256 Farben pro Frame limitiert und unterstützt keine Tonspur. **MP4** (H.264) bietet höhere Bildqualität, Tonintegration und effiziente Kompression, ist jedoch für interaktive oder frame-genaue Anwendungen weniger geeignet. Für Echtzeit-Prozesse kommen oft Formate wie **WebM**, **APNG** oder direktes Rendering im Browser oder in Software wie TouchDesigner zum Einsatz.
+Auch das verwendete **Farbmodell** spielt eine entscheidende Rolle: Während RGB (Rot, Grün, Blau) im digitalen Kontext Standard ist, können bestimmte Formate (z. B. GIF oder ältere Codecs) Farbverläufe oder Transparenzen nur eingeschränkt darstellen. In Interfaces oder Webanimationen ist zudem die Farbkonformität über verschiedene Ausgabegeräte hinweg ein Thema. Farbprofile, Farbtiefe und Rendering-Modi sollten daher frühzeitig bedacht werden – insbesondere bei professionellen oder medienübergreifenden Produktionen.
+Die **Bildfrequenz** (Frames per Second, FPS) beeinflusst nicht nur die visuelle Qualität, sondern auch Dateigröße, Bewegungswirkung und Abspielbarkeit. Während 24 FPS dem klassischen Filmstandard entsprechen, können 30 FPS für digitale Medien oder 60 FPS für flüssige Echtzeit-Visualisierungen genutzt werden. Eine bewusste Wahl der Framerate ist nicht nur eine technische Frage, sondern auch ein gestalterisches Mittel, um Rhythmus, Tempo und Energie zu steuern.
+Ein fundiertes Verständnis dieser technischen Grundlagen ist essenziell, um gestalterische Entscheidungen bewusst treffen zu können. Nur wer die Auswirkungen von Formatwahl, Komprimierung, Farbtiefe oder Framerate kennt, kann mediengerecht und zielgerichtet animieren. In professionellen Kontexten ist technische Sorgfalt zudem Voraussetzung für funktionierende Produktionsabläufe, plattformübergreifende Verwendbarkeit und nachhaltige Archivierung. Technik und Gestaltung stehen in der Animation nicht im Widerspruch, sondern bedingen sich gegenseitig.
-Diese Übersicht dient als vertiefter theoretischer Einstieg und Referenzmaterial für Übungen, Besprechungen und spätere Projekte im Bereich Zeit-basierter Gestaltung.
+^ Format  ^ Farbtiefe / Farbmodell ^ Tonunterstützung ^ Transparenz ^ Loop-Funktion ^ Typischer Einsatzbereich ^
+| GIF     | 8 Bit / max. 256 Farben | Nein              | Ja (eine Farbe) | Ja            | einfache Web-Animationen, Memes, kurze Loops |
+| APNG    | 24 Bit (RGB + Alpha)    | Nein              | Ja (vollwertig) | Ja            | Web-Animationen mit Transparenz, bessere Alternative zu GIF |
+| MP4     | 24 Bit (RGB)            | Ja                | Nein           | Nein (nur über Player-Funktion) | Videoanimationen, Präsentationen, Social Media |
+| WebM    | 24 Bit (RGB)            | Ja                | Ja (Alpha möglich) | Ja (browserabhängig) | Webvideos, interaktive Animationen, Streaming |
+| MOV     | 24 Bit (RGB)            | Ja                | Ja (je nach Codec) | Nein (Player-abhängig) | High-End-Video, Filmschnitt, Archivierung |
+| SVG (mit SMIL oder CSS) | Vektorbasiert | Nein | Ja (vektorbasiert) | Ja | skalierbare Interface- oder UI-Animationen |