Statische Seiten, ganz ohne Animationen, werden zunehmend weniger oder abnehmend mehr, je nach Sichtweise. Mit CSS3 und JavaScript sind schließlich allerlei Effekte für animierte Übergänge und aufwändige Animationen möglich. Selbst interaktive Animationen stellen keine grundsätzliche Problematik in der Webentwicklung mehr dar. Dennoch erfordern gerade komplexe Bewegungen vor allem in Kombination mit interaktiven Elementen einen gewissen Programmieraufwand. Mit der JavaScript-Engine Popmotion steht dir ein umfangreiches Tool zur Verfügung, das dir beim Erstellen von diversen interaktiven Animationen und animierten Benutzeroberflächen unter die Arme greift.
Klare Aufteilung: Popmotion verwendet Actors und Tweens
Die Grundlage für eine Animation mit Popmotion sind die sogenannten Actors. Das sind HTML-Elemente, die mit einer Aktion – das kann ein Tween oder ein Simulate sein – in Bewegung gebracht werden.
var ball = new ui.Actor("#ball");
Im Beispiel machen wir per „ui.Actor()“ das HTML-Element mit der ID „ball“ zu einem Actor. Das Aussehen des Elementes wird wie gewohnt per CSS festgelegt. Anschließend definieren wir eine Aktion, welche die Art und Weise der Animation beschreibt.
Für eine klassische Animation bietet sich ein Tween an. In diesem legen wir fest, wie die Animation eines Actors auszusehen hat.
var bewegung = new ui.Tween({
values: {
y: 100
}
});
Im Beispiel wird per „ui.Tween()“ eine einfache Bewegung angelegt. Über ein Objektliteral fügst du dem Tween verschiedene Eigenschaften hinzu. Hier wird der Wert „y“ auf 100 festgelegt. Das bedeutet, dass sich der Actor um 100 Pixel auf der Y-Achse nach unten bewegen wird.
Die Features von Popmotion
Im letzten Schritt müssen Actor und Tween noch zusammengebracht werden.
ball.start(bewegung);
Aufmerksame Leser haben es vermutlich schon festgestellt. Bis hierhin unterscheidet sich ein Tween nicht von nativen CSS3-Animationen. Allerdings stehen dir mit Popmotion noch einige zusätzliche Parameter zur Verfügung. So gibt es eine Vielzahl an Easings, die über das hinausgehen, was CSS3 anbietet.
ball.start(bewegung.extend({
duration: 5000,
ease: "backOut"
}));
Über „extend()“ fügst du der Animation zusätzliche Parameter hinzu. Neben „duration“ für die Animationsdauer kannst du mit „ease“ eine Easingfunktion angeben. Das Schlüsselwort „backOut“ sorgt zum Beispiel dafür, dass die Animation zunächst über das angegebene Ziel hinausschießt und dann wieder zurückgefedert wird – ähnlich wie man es bei elastischen Materialien sieht.
Popmotion für Fortgeschrittene: Physikalische Simulation mit Simulates
Neben klassischen Tweens gibt es als Alternative sogenannte Simulates. Diese unterscheiden sich in der Funktionalität von klassischen Tweens. Ersetzt man im Beispiel einfach „ui.Tween()“ durch „ui.Simulate()“ ändert die Animation ihr Verhalten.
var bewegung = new ui.Simulate({
values: {
y: 100
}
});
Denn jetzt wird der Actor nicht mehr nur um 100 Pixel nach unten bewegt, sondern unendlich. Der Wert für „y“ gibt nämlich die Bewegung pro Sekunde an. Der Actor wird also pro Sekunde 100 Pixel bewegt.
Außerdem stellen die Simulates spezielle Parameter zur Verfügung, mit denen sich physikalische Animationen simulieren lassen. So gibt es den Parameter „acceleration“, über den die Beschleunigung einer Animation definiert wird. Erwartet wird ein Wert, der die Beschleunigung in Einheiten pro Sekunde angibt.
ball.start(bewegung.extend({
acceleration: 500
}));
Im Beispiel beschleunigt der Actor also um 500 Pixel pro Sekunde. Alternativ zur Beschleunigung kann mit „friction“ ein Wert für die Reibung angegeben werden. Erwartet wird hier ein Wert zwischen 0 und 1, wobei 1 für maximale Reibung steht. Eine Animation wird hierdurch je nach Wert langsam oder schnell abgebremst.
ball.start(bewegung.extend({
friction: 0.1
}));
Event-Handler für Interaktionen
Damit die Animationen auch tatsächlich interaktiv eingesetzt werden können, stellt Popmotion einige Event-Handler zur Verfügung, die zu Beginn oder Ende einer Animation, aber auch bei jedem Frame beziehungsweise jeder Veränderung eine Funktion aufrufen können.
var ball = new ui.Actor({
element: "#ball",
onComplete: function() {
alert("Fertig.");
}
});
Im Beispiel fügen wir dem Actor neben der ID des Elementes noch den Event-Handler „onComplete“ hinzu. Alles wird als Objektliteral angegeben, sodass die ID als Wert von „element“ hinterlegt werden muss.
Nach abgespielter Animation erfolgt im Beispiel die Ausgabe eines einfachen Alerts.
Tracking mit Popmotion: Benutzereingaben für Bewegungen nutzen
Ebenfalls interessant und sinnvoll ist das sogenannte Tracking. Hiermit kannst du zum Beispiel dafür sorgen, dass ein Nutzer mit der Maus ein Element in einem vorgegebenen Bereich bewegen kann.
var tracking = new ui.Track({
values: {
x: {
min: 0,
max: 100
}
}
});
Im Beispiel wird für die X-Achse ein Bereich zwischen 0 und 100 Pixel definiert. Über ein Event kannst du nun das Tracking auf einen Actor anwenden.
document.getElementById("ball").addEventListener("mousedown",function(e) {
e.preventDefault();
e.stopPropagation();
ballActor.start(tracking, e);
}, false);
Im Beispiel kann ein Nutzer bei gedrückter Maustaste auf dem Element mit der ID „ball“ dieses zwischen 0 und 100 Pixel auf der X-Achse verschieben. Mit dem Tracking kannst du also relativ einfach eigene Fortschrittsbalken definieren.
Fazit, Kosten und Lizenz
Die hier vorgestellten Möglichkeiten stellen nur einen kleinen Ausschnitt dessen dar, was die JavaScript-Engine alles kann. Ein Blick in die Guides mit einigen Beispielen lohnt sich, um sich einen umfassenden Eindruck von Popmotion zu verschaffen. Es gibt zudem eine umfangreiche Dokumentation.
Guides zeigen, was Popmotion kann
Die Bibliothek ist keine 50 Kilobyte groß und kommt ohne Abhängigkeiten aus. jQuery oder andere Frameworks sind also nicht notwendig, um Popmotion nutzen zu können. Die Engine nutzt zeitgemäßes JavaScript wie „requestAnimationFrame“, um Animationen performant auszuführen.
Für nicht-kommerzielle Projekte ist die Verwendung von Popmotion kostenlos. Die kommerzielle Nutzung kostet runde 10 US-Dollar pro Monat und Projekt.
(dpe)
