Startseite » Lernen » Animation

Übersicht

Animation

Inkscape selbst unterstützt keine Animationen - obwohl das für die Zukunft nicht völlig ausgeschlossen ist, falls ein Programmierer, oder besser ein kleines Team, Interesse daran entwickelt, diese Herausforderung anzunehmen (wenn Du selbst gerne Animations-Funktionen für Inkscape programmieren möchtest, solltest Du zuallererst mit dem Entwickler-Team Kontakt aufnehmen). Bis es soweit ist, gibt es trotzdem jede Menge Möglichkeiten, Bilder, die mit Inkscape erstellt wurden, zu animieren (als SVG oder auch nach dem Export zu PNG), die auf dieser Seite beschrieben werden sollen. Als Inspiration für die weitreichenden Möglichkeiten der SVG-Animation können Dir die Beispiele auf A Bucketful of SVG Examples von David Dailey dienen.

Da sich die Browserunterstützung für die verschiedenen Animationsmethoden im Laufe der Zeit verändern kann, solltest Du Dich vor der Arbeit an einem Animationsprojekt für Webseiten über den aktuellen Stand informieren, um herauszufinden, welche Methode Du verwenden möchtest. Unter anderem finden sich Informationen im SVG-Teil der Webseite Can I Use?, die aktuelle Informationen über Browserunterstützung für unterschiedliche Funktionen bereithält.

Es gibt im Allgemeinen zwei Hauptmöglichkeiten, wie man Animationen aus Inkscape-SVGs erstellen kann:

  • unter Verwendung eines grafischen Programmes, das eine Benutzeroberfläche zur Verfügung stellt, oder
  • indem man selbst Skripte oder Auszeichnungssprache schreibt, in einem Texteditor oder einer IDE (integrierte Entwicklungsumgebung).

Grafischer Editor mit Benutzeroberfläche

Zu diesen Programmen gehören die Inkscape-Erweiterungen, die entweder bereits in Inkscape enthalten sind, oder nachinstalliert werden können, und externe, unabhängige Animationsprogramme.

Inkscape-Erweiterungen

JessyInk

JessyInk ist eine Inkscape-Erweiterung, die bereits vorinstalliert ist (Stand: Inkscape 0.91). Mit JessyInk kann man Animationen im Stil einer Diashow erstellen, um damit seine Vortragsfolien im Webbrowser zu präsentieren. JessyInk bettet dazu JavaScript in die SVG-Datei ein. Im Wiki zur Erweiterung gibt es Tutorials und weitere Dokumentationsmaterialien. Es finden sich auch einige Informationen im Handbuch zu Inkscape.

Sozi

Sozi ist eine Anwendung zur Erstellung von Präsentationen, die sich verschieben, zoomen und drehen und mit einem Webbrowser betrachtet werden können. Die Erweiterung bettet JavaScript in eine SVG-Datei ein. Dieser Editor wurde zunächst als Erweiterung für Inkscape entwickelt (die man nachinstallieren muss). Um jedoch eine flexiblere und nutzerfreundlichere Oberfläche nutzen zu können, hat sich der Sozi-Entwickler entlschlossen, Sozi nun als unabhängiges Programm weiterzuentwickeln. Irgendwann in naher Zukunft wird die Sozi-Erweiterung nicht mehr mit Inkscape funktionieren. Benutzer müssen dann auf das eigenständige Programm umsteigen (die Erweiterung funktioniert mit Inkscape 0.91, dies könnte jedoch die letzte Version sein, mit der die Erweiterung genutzt werden kann). Eine Tutorialreihe auf der Sozi-Webseite erklärt die Verwendung der Erweiterung. Da die eigenständige Version wesentlich intuitiver funktioniert, ist die bislang noch fehlende Dokumentation kein großes Hindernis für ihre Verwendung.

XIA

XIA kann entweder als Erweiterung oder als unabhängiges Programm installiert werden. Es erstellt mit HTML5 und JavaScript interaktive Grafiken, die in Webseiten eingebettet sind, und für Präsentationen oder kleine Spiele verwendet werden können. Die Seiten reagieren unter anderem auf Mausklicks, Darüberfahren mit der Maus oder auch Ziehen und Ablegen. Auf der Xia-Webseite gibt es ein Handbuch in Form einer PDF-Datei, ein Anleitungsvideo und mehrere Beispiele, die die Fähigkeiten von Xia demonstrieren.

Webseiten und Onlinedienste

AniGen

AniGen ist ein webbasierter, freier und quelloffener Editor für SVG-Animationen. Die Entwicklung ist vorwiegend auf den Chrome-Browser abgestimmt, das Programm sollte aber unter Firefox auch einigermaßen gut funktionieren. Die Benutzerführung ist zu Anfang ungewohnt, aber wenn man ein bereits mit Inkscape erstelltes SVG verwendet, lassen sich ordentliche Ergebnisse erzielen.

Unabhängige Programme

Xia und Sozi

Beide Programme (siehe oben) gibt es auch als unabhängige Einzelprogramme. Bei Sozi stellt die unabhängige Version einen Ersatz für die Erweiterung dar, die nicht mehr weiterentwickelt wird.

GIMP

GIMP ist ein freies und quelloffenes Programm zur Bearbeitung von 2D-Grafiken. Man kann damit sowohl Raster- als auch Vektorgrafiken erstellen, importieren und exportieren (hauptsächlich ist es jedoch für Rastergrafiken ausgelegt, hat aber einige kleinere Vektorfunktionen). Man kann damit relativ einfach GIF-Animationen erstellen, wofür es mindestens 3 Tutorials auf der Gimp-Webseite gibt. Diese lassen sich über die Dokumentationsseite finden. Der Ablauf ist der folgende: Bilderserien müssen aus Inkscape als PNG exportiert werden, um sie dann in Gimp zu importieren (Tipp: Importieren als Ebenen). Es gibt aber auch noch VIELE weitere Programme, mit denen man GIF-Animationen erstellen kann - eine Websuche bringt Dich hier weiter!

Tupi

Tupi ist ein freies und quelloffenes Programm, mit dem man sowohl Raster- als auch Vektorgrafiken animieren kann. Auf der Dokumentationsseite gibt es Links zu Handbüchern, Tutorials, FAQ, Beispielen und mehr.

Synfig Studio

Synfig Studio ist ein freies und quelloffenes Programm für 2D-Animationen, das SVG-Dateien direkt importieren und verwenden kann. Seit Version 0.91 kann Inkscape aber auch direkt in das Synfig-Format (SIF) exportieren. Handbuch und Tutorials gibt es  im Synfig-Wiki.

enve

enve ist ein relativ neues freies 2D-Animationsprogramm, das sowohl SVG-Dateien importieren kann als auch animierte SVG-Dokumente erstellen.

Blender

Blender ist ein freies und quelloffenes Programm zur 3D-Animation, das SVG-Bilder importieren kann. Handbuch und Anleitungen gibt es auf der Support-Seite.

Skripte und Auszeichnungssprache

Es gibt 3 allgemeine Möglichkeiten, SVG-Bilder zu animieren: SMIL, CSS3 und JavaScript. Wenn man diese direkt, ohne eine dazwischengeschaltete grafische Oberfläche, verwenden möchte, sollte man sich zunächst mit den Grundlagen der entsprechenden Progammiersprache / der Auszeichnungssprache vertraut machen. Einige der Tutorials, die hier aufgelistet sind, können dabei helfen, diese Grundlagen zu erlernen, aber wahrscheinlich braucht es noch weitere Informationsquellen, um wirklich ein gutes Verständnis zu erwerben (was den Rahmen dieser Seite sprengen würde). Wenn Du Dich bereits damit auskennst, wie man JavaScript und Auszeichnungssprachen wie CSS verwendet, und auch mit der SVG/XML-Dokumentenstruktur zurecht kommst, helfen Dir die unten aufgeführten Links dabei, Deine eigenen Animationen für das Web, Spiele oder coole Präsentationen zu erstellen..

Das Handbuch zu Inkscape, das Inkscape-Wiki und einige externe Seiten dienen dazu, einen guten Überblick über die Möglichkeiten zu gewinnen:

SMIL

SMIL (Synchronized Multimedia Integration Language, ausgesprochen wie 'smile' (=Lächeln)), ist, wie auch SVG, eine Art von XML (Extensible Markup Language, erweiterbare Auszeichnungssprache). In Kombination mit SVG kann man damit z.B. multimediale Präsentationen erstellen. Es gibt vergleichsweise wenige Tutorials, die die Verwendung von SMIL erklären. SMIL funktioniert auch im Jahr 2015 noch nicht in aktuellen Internet-Explorer-Versionen, sondern nur in Firefox und (besonders schnell) in Chrome-basierten Browsern. Leider haben sich die Google-Entwickler beschlossen, dass es an der Zeit wäre, die Funktion zur Abschaffung vorzuschlagen. Im Folgenden findest Du eine Reihe an Tutorials und Beispielen, die Du Dir anschauen kannst. Eine gründliche Websuche fördert möglicherweise noch weitere Informationen zutage.

*  Diese Seiten sind etwas veraltet. Der Code in den Beispielen ist jedoch immer noch aktuell und läuft in aktuellen Browserversionen.

CSS3

CSS ist eine Auszeichnungssprache, die zur Gestaltung von Webseiten verwendet wird. Meistens wird sie für statische Gestaltung genutzt.  Mit der Einführung von CSS3 wurden jedoch neue Funktionen hinzugefügt, die für Animationen - von ganz einfach bis ziemlich komplex - benutzt werden können. Zu diesem Thema gibt es eine riesige Fülle an Tutorials im Internet. Diese Liste enthält nur ein paar wenige, es lassen sich aber leicht noch sehr viele mehr finden, falls diese Dir nicht gefallen sollten.

JavaScript

JavaScript / ECMAScript ist eine Programmiersprache, die hauptsächlich dazu verwendet wird, das Nutzererlebnis auf Webseiten zu verbessern. Anders als mit CSS3 kann man damit jeden animierbaren Aspekt eines SVG-Bildes animieren (auch Pfade), und diese Möglichkeite ist von allen drei beschriebenen Möglichkeiten die flexibelste. Gleichzeitig ist sie aber wohl auch die schwierigste Option, denn man muss dafür eine echte Programmiersprache erlernen.

  • Snap.svg ist eine freie und quelloffene JavaScript-Bibliothek, die eine API für das Manipulieren von SVG-Grafiken zur Verfügung stellt, inklusive (aber nicht beschränkt auf) Animationen. Es gibt eine umfangreiche Dokumentation und Demos.
  • Aaron Nieze von Go Inkscape! hat ein paar Tutorials zur Verwendung von Snap.svg mit Inkscape geschrieben.
  • D3.js ist eine Bibliothek zur Datenvisualisierung, die u.a. animierte SVG-Bilder dazu verwendet. In der Galerie gibt es einige spektakuläre Demos!
  • Es finden sich noch viele weitere JavaScript-Bibliotheken zur Animation von SVG-Grafiken!  Zum Beispiel: svg.js, velocity.js oder Raphaël.
 
 
 
 

Inkscape ist freie und quelloffene Software und steht unter der GPL.