Tutorials/Animationen: Unterschied zwischen den Versionen
Fuchsf (Diskussion | Beiträge) |
K (Richtige Einbindung von Doc) |
||
(3 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
+ | {{DISPLAYTITLE:Tutorial: Animationen}} | ||
== Ziel des Tutorials == | == Ziel des Tutorials == | ||
Zeile 12: | Zeile 13: | ||
* '''Strecken-Animation''' <br /> Animiert ein Objekt auf einem Polygonzug (Zickzack-Linie) | * '''Strecken-Animation''' <br /> Animiert ein Objekt auf einem Polygonzug (Zickzack-Linie) | ||
− | Animationen werden von der Klasse {{Doc|AnimationsManager}} zur Verfügung gestellt. Die Klasse {{Doc|Game}} stellt eine Referenz auf das AnimationsManager-Objekt zur Verfügung. Es gibt nur eine einzige Instanz des AnimationsManagers ''(Singleton)''. | + | Animationen werden von der Klasse {{Doc|ea/AnimationsManager}} zur Verfügung gestellt. Die Klasse {{Doc|ea/Game}} stellt eine Referenz auf das AnimationsManager-Objekt zur Verfügung. Es gibt nur eine einzige Instanz des AnimationsManagers ''(Singleton)''. |
=== Geraden-Animation === | === Geraden-Animation === | ||
− | Für die Geraden-Animation steht folgende Methode der Klasse {{Doc|AnimationsManager}} zur | + | Für die Geraden-Animation steht folgende Methode der Klasse {{Doc|ea/AnimationsManager}} zur Verfügung: |
<source lang="Java"> | <source lang="Java"> | ||
Zeile 28: | Zeile 29: | ||
<source lang="Java"> | <source lang="Java"> | ||
− | + | this.animationsManager.geradenAnimation(r, p, 1000, 1000); | |
</source> | </source> | ||
Zeile 34: | Zeile 35: | ||
<source lang="Java"> | <source lang="Java"> | ||
− | + | this.animationsManager.geradenAnimation(r, p, 1000, 3000); | |
</source> | </source> | ||
Zeile 40: | Zeile 41: | ||
<source lang="Java"> | <source lang="Java"> | ||
− | + | this.animationsManager.geradenAnimation(r, p, 1000, 500); | |
</source> | </source> | ||
Zeile 50: | Zeile 51: | ||
=== Kreis-Animation === | === Kreis-Animation === | ||
− | Für die Kreis-Animation steht folgende Methode der Klasse {{Doc|AnimationsManager}} zur | + | Für die Kreis-Animation steht folgende Methode der Klasse {{Doc|ea/AnimationsManager}} zur Verfügung: |
<source lang="Java"> | <source lang="Java"> | ||
Zeile 61: | Zeile 62: | ||
<source lang="Java"> | <source lang="Java"> | ||
− | + | this.animationsManager.kreisAnimation(r, p, false, 5000, false); | |
</source> | </source> | ||
Zeile 67: | Zeile 68: | ||
<source lang="Java"> | <source lang="Java"> | ||
− | + | this.animationsManager.kreisAnimation(r, p, false, 5000, true); | |
</source> | </source> | ||
Zeile 73: | Zeile 74: | ||
<source lang="Java"> | <source lang="Java"> | ||
− | + | this.animationsManager.kreisAnimation(r, p, true, 5000, false); | |
</source> | </source> | ||
Zeile 82: | Zeile 83: | ||
=== Strecken-Animation === | === Strecken-Animation === | ||
− | Für die Strecken-Animation steht folgende Methode der Klasse {{Doc|AnimationsManager}} zur | + | Für die Strecken-Animation steht folgende Methode der Klasse {{Doc|ea/AnimationsManager}} zur Verfügung: |
<source lang="Java"> | <source lang="Java"> | ||
Zeile 93: | Zeile 94: | ||
<source lang="Java"> | <source lang="Java"> | ||
− | + | this.animationsManager.streckenAnimation(r, 10000, true, true, r.mittelPunkt(), new Punkt(200,100), new Punkt(400,500) ); | |
</source> | </source> | ||
Zeile 99: | Zeile 100: | ||
<source lang="Java"> | <source lang="Java"> | ||
− | + | this.animationsManager.streckenAnimation(r, 10000, true, false, r.mittelPunkt(), new Punkt(200,100), new Punkt(400,500) ); | |
</source> | </source> | ||
Zeile 105: | Zeile 106: | ||
<source lang="Java"> | <source lang="Java"> | ||
− | + | this.animationsManager.streckenAnimation(r, 10000, false, true, r.mittelPunkt(), new Punkt(200,100), new Punkt(400,500) ); | |
</source> | </source> | ||
Zeile 111: | Zeile 112: | ||
<source lang="Java"> | <source lang="Java"> | ||
− | + | this.animationsManager.streckenAnimation(r, 10000, false, false, r.mittelPunkt(), new Punkt(200,100), new Punkt(400,500) ); | |
</source> | </source> | ||
Zeile 121: | Zeile 122: | ||
Endlose Kreis-Animationen können natürlich wieder angehalten werden. Jede endliche Animation kann aber auch vorzeitig beendet werden. | Endlose Kreis-Animationen können natürlich wieder angehalten werden. Jede endliche Animation kann aber auch vorzeitig beendet werden. | ||
− | Hierzu stellt die Klasse {{Doc|AnimationsManager}} folgende Methode bereit: | + | Hierzu stellt die Klasse {{Doc|ea/AnimationsManager}} folgende Methode bereit: |
<source lang="Java"> | <source lang="Java"> |
Aktuelle Version vom 28. Mai 2016, 17:08 Uhr
Inhaltsverzeichnis
Ziel des Tutorials
Die Engine Alpha bietet dir verschiedene Möglichkeiten, deine Objekte animiert zu bewegen. Nach dem Abschluss dieses Tutorials kennst du die verschiedenen Animations-Arten und kannst damit jedes Grafik-Objekt animieren.
Animations-Arten
Es gibt folgende Animations-Arten:
- Geraden-Animation
Animiert ein Objekt auf einer einfachen Halbgerade - Kreis-Animation
Animiert ein Objekt auf einer Kreisbahn um ein Zentrum - Strecken-Animation
Animiert ein Objekt auf einem Polygonzug (Zickzack-Linie)
Animationen werden von der Klasse AnimationsManager
zur Verfügung gestellt. Die Klasse Game
stellt eine Referenz auf das AnimationsManager-Objekt zur Verfügung. Es gibt nur eine einzige Instanz des AnimationsManagers (Singleton).
Geraden-Animation
Für die Geraden-Animation steht folgende Methode der Klasse AnimationsManager
zur Verfügung:
public void geradenAnimation(Raum r, Punkt p, int zeit_bis_Punkt, int animations_Zeit)
Dabei wird das Objekt r in Richtung des Punktes p geradlinig bewegt. Der dritte Parameter steht für die Zeit in Millisekunden, bis r bei p angekommen ist. Der vierte Parameter gibt die Zeit in Millisekunden an, wie lange die Animation insgesamt dauern soll.
Beispiele:
this.animationsManager.geradenAnimation(r, p, 1000, 1000);
... bewegt das Objekt r in einer Sekunde von seinem ursprünglichen Ort bis zum Punkt p. Dort endet die Animation dann und r hat p als Mittelpunkt.
this.animationsManager.geradenAnimation(r, p, 1000, 3000);
... bewegt das Objekt r in einer Sekunde von seinem ursprünglichen Ort Richtung p. Die Animation geht aber noch zwei Sekunden lang weiter. R hat dann die dreifache Strecke von seinem ursprünglichen Ort bis p zurück gelegt.
this.animationsManager.geradenAnimation(r, p, 1000, 500);
... würde das Objekt r in einer Sekunde von seinem ursprünglichen Ort bis zum Punkt p bewegen. Da die Animation aber nur 500ms lang dauern soll, bleibt r auf halbem Weg Richtung p stehen.
Es gibt auch verkürzte Methodenaufrufe, die in der Dokumentation genauer beschrieben werden.
Kreis-Animation
Für die Kreis-Animation steht folgende Methode der Klasse AnimationsManager
zur Verfügung:
public void kreisAnimation(Raum r, Punkt m, boolean loop, int umlaufdauer, boolean im_uhrzeigersinn )
Dabei wird das Objekt r um den Punkt m im Kreis gedreht. Der Punkt m ist dabei der Mittelpunkt der Animation. Der Animations-Radius ergibt sich aus dem ursprünglichen Abstand des Mittelpunkts von r zum Rotations-Zentrum m. Ist der dritte Parameter true, so erfolgt die Drehung endlos (loop), bei false erfolgt genau eine Umdrehung. Der vierte Parameter gibt die Zeit einer Umdreheung (Umlaufdauer) in Millisekunden an. Ist der letzte Parameter true, so wird im Uhrzeigersinn gedreht, bei false gegen den Uhrzeigersinn.
Beispiele:
this.animationsManager.kreisAnimation(r, p, false, 5000, false);
... dreht das Objekt r in 5 Sekunden einmal um den Punkt p. Nach einer Umdrehung endet die Animation (dritter Parameter: loop=false). Die Drehung erfolgt gegen den Uhrzeigersinn (letzter Parameter: im_uhrzeigersinn=false).
this.animationsManager.kreisAnimation(r, p, false, 5000, true);
... dreht das Objekt r in 5 Sekunden einmal um den Punkt p. Nach einer Umdrehung endet die Animation (dritter Parameter: loop=false). Die Drehung erfolgt im Uhrzeigersinn (letzter Parameter: im_uhrzeigersinn=true).
this.animationsManager.kreisAnimation(r, p, true, 5000, false);
... dreht das Objekt r in 5 Sekunden um den Punkt p. Es wird nach unendlich lange weiter gedreht (dritter Parameter: loop=true). Die Drehung erfolgt gegen den Uhrzeigersinn (letzter Parameter: im_uhrzeigersinn=false).
Es gibt auch verkürzte Methodenaufrufe, die in der Dokumentation genauer beschrieben werden.
Strecken-Animation
Für die Strecken-Animation steht folgende Methode der Klasse AnimationsManager
zur Verfügung:
public void streckenAnimation(Raum r, int dauer, boolean wiederholen, boolean geschlossen, Punkt... Streckenzug )
Dabei wird das Objekt r von seinem ursprünglichen Mittelpunkt zuerst geradlinig zum ersten Punkt des Streckenzugs bewegt, dann geradlinig weiter zum zweiten Punkt usw. Die Dauer gibt an, wie lange eine solche Bewegung dauert. Ist der dritte Parameter true, so wird die Animation endlos wiederholt. bei false nur genau ein Mal. ISt der vierte Parameter true, so erfolgt eine ANimation längs eines geschlossenen Polygonzugs, also vom letzten Punkt wieder zurück zum ursprünglichen Mittelpunkt. Im Falle eines nicht geschlossenen Polygonzugs und gewünschter Wiederholung erfolgt die Bewegung entlang der Punkte und danach wieder auf demselben Weg zurück usw. Der letze Parameter ist eigentlich eine beliebige Folge von Punkten, d.h. es muss mindestens ein Punkt angegeben werden, es können aber Komma-getrennt beliebig viele Punkte übergeben werden.
Beispiele:
this.animationsManager.streckenAnimation(r, 10000, true, true, r.mittelPunkt(), new Punkt(200,100), new Punkt(400,500) );
... bewegt das Objekt r von seinem ursprünglichen Mittelpunkt zunächst zum Punkt (200|100), danach zum Punkt (400|500) und dann vom letzen Punkt geradlinig zurück zu seinem ursprünglichen Mittelpunkt (vierter Parameter: geschlossen=true). Danach wiederholt sich diese Animation (dritter Parameter: wiederholen=true). Ein solcher Umlauf dauert 10 Sekunden.
this.animationsManager.streckenAnimation(r, 10000, true, false, r.mittelPunkt(), new Punkt(200,100), new Punkt(400,500) );
... bewegt das Objekt r von seinem ursprünglichen Mittelpunkt zunächst zum Punkt (200|100), danach zum Punkt (400|500) und dann wieder auf demselben Weg zurück zu seinem ursprünglichen Mittelpunkt (vierter Parameter: geschlossen=false). Danach wiederholt sich diese Animation (dritter Parameter: wiederholen=true). Ein solcher Umlauf dauert 10 Sekunden.
this.animationsManager.streckenAnimation(r, 10000, false, true, r.mittelPunkt(), new Punkt(200,100), new Punkt(400,500) );
... bewegt das Objekt r von seinem ursprünglichen Mittelpunkt zunächst zum Punkt (200|100), danach zum Punkt (400|500) und dann vom letzen Punkt auf demselben Weg zurück zurück zu seinem ursprünglichen Mittelpunkt (vierter Parameter: geschlossen=true). Die Animation findet nur ein Mal statt (dritter Parameter: wiederholen=false). Ein solcher Umlauf dauert 10 Sekunden.
this.animationsManager.streckenAnimation(r, 10000, false, false, r.mittelPunkt(), new Punkt(200,100), new Punkt(400,500) );
... bewegt das Objekt r von seinem ursprünglichen Mittelpunkt zunächst zum Punkt (200|100), danach zum Punkt (400|500) und am letzten Punkt endet die Animation (vierter Parameter: geschlossen=false). Die Animation findet nur ein Mal statt (dritter Parameter: wiederholen=false). Ein solcher Umlauf dauert 10 Sekunden.
Es gibt auch verkürzte Methodenaufrufe, die in der Dokumentation genauer beschrieben werden.
Animation vorzeitig beenden
Endlose Kreis-Animationen können natürlich wieder angehalten werden. Jede endliche Animation kann aber auch vorzeitig beendet werden.
Hierzu stellt die Klasse AnimationsManager
folgende Methode bereit:
public void animationBeendenVon(Raum r)
Hierdurch werden alle Animationen des entsprechenden Objekts angehalten!
Probleme?
Hier kannst du ein Beispielprojekt herunterladen.