Overview
Mit JavaFX ist es spielend einfach, Animationen zu erzeugen: Mithilfe der absrakten Klasse Transition lassen sich Nodes bewegen, ein- oder ausfaden, rotieren und einiges mehr. Möglich wird das durch den Einsatz konkreter Unterklassen von Transition. In diesem Tutorial schauen wir uns diese einmal etwas genauer an.
Die Klasse Transition
Die abstrakte Klasse Transition erweitert die Klasse Animation und stellt die grundlegende Funktionalität für alle Animationen von JavaFX Nodes zur Verfügung. Die einzelnen Arten von Animation werden durch die von Transition erbenden konkreten Unterklassen realisiert:
- TranslateTransition: Die Klasse lässt ein Node entlang einer Achse drehen.
- FadeTransition: Animiert ein Node, indem es seine Opacity (Transparenz-Wert) ändert; lässt das Objekt also ein- oder ausfaden.
- FillTransition: Animation durch Ausfüllen der Körperfarbe eines Nodes.
- StrokeTransition: Animation durch Ändern des Rahmenfarbe eines Nodes.
- RotateTransition: Diese Klasse lässt ein Node z.B. entlang seines Zentrums drehen.
- ScaleTransition: Animation durch Änderung der Größe.
Was bedeutet Transition?
Das Wort Transition bedeutet zu deutsch "Übergang" und genau so funktioniert der Eindruck einer Bewegung bzw. Animation: Ein JavaFX Node ist in einem Zustand A und wechselt in einer bestimmten Zeit in einen Zustand B.
Die einzelnen Transition-Klassen stellen nun bestimmte Methoden zur Verfügung, um diesne Zustandswechsel, je nach Modus, zu erzielen.
Was das genau bedeutet, sehen wir uns jetzt anhand von konkreten Beispielen einmal an:
TranslateTransition
Eine sehr einfache JavaFX-Animation lässt sich durch die Klasse TranslateTransition erreichen. TranslateTransition bewegt ein Node in einer bestimmten Zeit von einer Position zu einer anderen.
Hier ein kleines Beispiel:
AnchorPane ap = new AnchorPane();
// Kreis-Node erstellen
Circle cir = new Circle(50,100,50);
cir.setFill(Color.FUCHSIA);
cir.setStroke(Color.BLACK);
// TranslateTransition erstellen
TranslateTransition translate = new TranslateTransition();
// Node um 400 Pixel nach rechts bewegen
translate.setByX(400);
//Dauer der Bewegung festlegen
translate.setDuration(Duration.millis(1000));
//Soll die Animation am Ende in die entgegengesetzte Richtung zurücklaufen?
translate.setAutoReverse(true);
//Wie oft soll die Animation wiederholt werden?
translate.setCycleCount(10);
// Node dem TranslateTransition hinzufügen und Animation starten
translate.setNode(cir);
translate.play();
ap.getChildren().add(cir);
primaryStage.setScene(new Scene(ap, 500, 200));
primaryStage.setTitle("TranslateTransition Beispiel");
primaryStage.show();Und so sieht das Ergebnis aus:
Für die TranslateTransition gibt es noch ein paar weitere super nützliche Methoden. Am besten schaust du hier einmal bei der Oracle-JavaFX Documentation zur Klasse vorbei.
FadeTransition
Eine FadeTransition lässt ein Node ein- oder ausfaden, also "erscheinen" und "ausblenden".
Repräsentiert wird dies durch die Klasse javafx.animation.FadeTransition und ein konkretes Beispiel für den Einsatz siehst du hier:
AnchorPane ap = new AnchorPane();
// Kreis-Node erstellen
Circle cir = new Circle(50,100,50);
cir.setFill(Color.FUCHSIA);
cir.setStroke(Color.BLACK);
// FadeTransition Objekt erstellen
FadeTransition fade = new FadeTransition();
//Transparenz-Anfangs- und Endwert bestimmen
fade.setFromValue(10);
fade.setToValue(0);
//Dauer der Bewegung festlegen
fade.setDuration(Duration.millis(1000));
// Soll die Animation am Ende in die entgegengesetzte Richtung zurücklaufen?
fade.setAutoReverse(true);
// Wie oft soll die Animation wiederholt werden?
fade.setCycleCount(10);
// Node dem TranslateTransition hinzufügen und Animation starten
fade.setNode(cir);
fade.play();
ap.getChildren().add(cir);
primaryStage.setScene(new Scene(ap, 500, 200));
primaryStage.setTitle("FadeTransition Beispiel");
primaryStage.show();Die Umsetzung in der JavaFX-Anwendung sieht dann so aus:
Fill Transition
Mit der Klasse javafx.animation.FillTransition bekommen wir es schließlich hin, dass sich die Farbe eines Nodes verändern lässt.
Das Ganze schaut dann so aus:
AnchorPane ap = new AnchorPane();
// Kreis-Node erstellen
Circle cir = new Circle(50,100,50);
cir.setFill(Color.FUCHSIA);
cir.setStroke(Color.BLACK);
// FillTransition Objekt erstellen
FillTransition fill = new FillTransition();
//Farb-Anfangs und Farb-Endpunkt bestimmen
fill.setFromValue(Color.FUCHSIA);
fill.setToValue(Color.GREEN);
//Dauer des Farbwechsels bestimmen
fill.setDuration(Duration.millis(3000));
// Soll die Animation am Ende in die entgegengesetzte Richtung zurücklaufen?
fill.setAutoReverse(true);
// Wie oft soll die Animation wiederholt werden?
fill.setCycleCount(10);
// Node dem FillTransition-Objekt hinzufügen und Animation starten
fill.setShape(cir);
fill.play();
ap.getChildren().add(cir);
primaryStage.setScene(new Scene(ap, 500, 200));
primaryStage.setTitle("FadeTransition Beispiel");
primaryStage.show();Hier siehst du den programmierten Farbwechsel von FUCHSIA nach GREEN und umgekehrt:
StrokeTransition
Um anstatt der Füllung den Rahmen eines Node farblich zu verändern, kannst du auch die Klasse StrokeTransition verwenden.
RotateTransition
Du willst, dass sich ein Node um eine Achse dreht? Kein Problem - auch das ist natürlich möglich. Verwende hierzu einfach die Klasse javafx.animation.RotateTransition:
AnchorPane ap = new AnchorPane();
// Rechteck-Node erstellen
Rectangle rect = new Rectangle(100,50,100,100);
rect.setFill(Color.FUCHSIA);
// RotateTransition Objekt erstellen
RotateTransition rotate = new RotateTransition();
//Rotationsachse festlegen
rotate.setAxis(Rotate.Z_AXIS);
// Rotationswinkel festlegen
rotate.setByAngle(360);
//Dauer eines Rotationsforgangs
rotate.setDuration(Duration.millis(4000));
//Soll die Animation am Ende in die entgegengesetzte Richtung zurücklaufen?
rotate.setAutoReverse(true);
//Wie oft soll die Animation wiederholt werden?
rotate.setCycleCount(100);
// Node dem RotateTransition-Objekt hinzufügen und Animation starten
rotate.setNode(rect);
rotate.play();
ap.getChildren().add(rect);
primaryStage.setScene(new Scene(ap, 500, 200));
primaryStage.setTitle("RotateTransition Beispiel");
primaryStage.show();
Scale Transition
Okay, einen haben wir noch 😋
Wir können Nodes natürlich auch in ihres Größe ändern (vergrößern, verkleinern). Die Klasse javafx.animation.ScaleTransition machts möglich:
AnchorPane ap = new AnchorPane();
// Kreis-Node erstellen
Circle cir = new Circle(250,250,50);
cir.setFill(Color.FUCHSIA);
cir.setStroke(Color.BLACK);
// ScaleTransition Objekt erstellen
ScaleTransition scale = new ScaleTransition();
// Skalierung der Größe einstellen
scale.setByX(1.5f);
scale.setByY(1.5f);
//Dauer eines Vorgangs
scale.setDuration(Duration.millis(1000));
//Soll die Animation am Ende in die entgegengesetzte Richtung zurücklaufen (verkleinern)?
scale.setAutoReverse(true);
//Wie oft soll die Animation wiederholt werden?
scale.setCycleCount(100);
// Node dem ScaleTransition-Objekt hinzufügen und Animation starten
scale.setNode(cir);
scale.play();
ap.getChildren().add(cir);
primaryStage.setScene(new Scene(ap, 500, 500));
primaryStage.setTitle("ScaleTransition Beispiel");
primaryStage.show();
