JavaFX - Animasi
Secara umum, menganimasikan suatu objek berarti menciptakan ilusi gerakannya dengan tampilan cepat. Di JavaFX, node dapat dianimasikan dengan mengubah propertinya dari waktu ke waktu. JavaFX menyediakan paket bernamajavafx.animation. Paket ini berisi kelas yang digunakan untuk menganimasikan node. Animasi adalah kelas dasar dari semua kelas ini.
Menggunakan JavaFX, Anda dapat menerapkan animasi (transisi) seperti Fade Transition, Fill Transition, Rotate Transition, Scale Transition, Stroke Transition, Translate Transition, Path Transition, Sequential Transition, Pause Transition, Parallel Transition, dll.
Semua transisi ini diwakili oleh kelas individu dalam paket javafx.animation.
Untuk menerapkan animasi tertentu ke node, Anda harus mengikuti langkah-langkah di bawah ini -
Buat node yang dibutuhkan menggunakan kelas masing-masing.
Instantiate kelas transisi (animasi) masing-masing yang akan diterapkan
Atur properti transisi dan
Terakhir, putar transisi menggunakan play() metode dari Animation kelas.
Dalam bab ini kita akan membahas contoh transisi dasar (Rotasi, Penskalaan, Terjemahan).
Putar Transisi
Berikut adalah program yang mendemonstrasikan Rotate Transition di JavaFX. Simpan kode ini dalam file dengan namaRotateTransitionExample.java.
import javafx.animation.RotateTransition;
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Polygon;
import javafx.stage.Stage;
import javafx.util.Duration;
public class RotateTransitionExample extends Application {
@Override
public void start(Stage stage) {
//Creating a hexagon
Polygon hexagon = new Polygon();
//Adding coordinates to the hexagon
hexagon.getPoints().addAll(new Double[]{
200.0, 50.0,
400.0, 50.0,
450.0, 150.0,
400.0, 250.0,
200.0, 250.0,
150.0, 150.0,
});
//Setting the fill color for the hexagon
hexagon.setFill(Color.BLUE);
//Creating a rotate transition
RotateTransition rotateTransition = new RotateTransition();
//Setting the duration for the transition
rotateTransition.setDuration(Duration.millis(1000));
//Setting the node for the transition
rotateTransition.setNode(hexagon);
//Setting the angle of the rotation
rotateTransition.setByAngle(360);
//Setting the cycle count for the transition
rotateTransition.setCycleCount(50);
//Setting auto reverse value to false
rotateTransition.setAutoReverse(false);
//Playing the animation
rotateTransition.play();
//Creating a Group object
Group root = new Group(hexagon);
//Creating a scene object
Scene scene = new Scene(root, 600, 300);
//Setting title to the Stage
stage.setTitle("Rotate transition example ");
//Adding scene to the stage
stage.setScene(scene);
//Displaying the contents of the stage
stage.show();
}
public static void main(String args[]){
launch(args);
}
}
Kompilasi dan jalankan file java yang disimpan dari command prompt menggunakan perintah berikut.
javac RotateTransitionExample.java
java RotateTransitionExample
Saat menjalankan, program di atas menghasilkan jendela JavaFX seperti yang ditunjukkan di bawah ini.
Transisi Skala
Berikut adalah program yang mendemonstrasikan Scale Transition di JavaFX. Simpan kode ini dalam file dengan namaScaleTransitionExample.java.
import javafx.animation.ScaleTransition;
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
import javafx.util.Duration;
public class ScaleTransitionExample extends Application {
@Override
public void start(Stage stage) {
//Drawing a Circle
Circle circle = new Circle();
//Setting the position of the circle
circle.setCenterX(300.0f);
circle.setCenterY(135.0f);
//Setting the radius of the circle
circle.setRadius(50.0f);
//Setting the color of the circle
circle.setFill(Color.BROWN);
//Setting the stroke width of the circle
circle.setStrokeWidth(20);
//Creating scale Transition
ScaleTransition scaleTransition = new ScaleTransition();
//Setting the duration for the transition
scaleTransition.setDuration(Duration.millis(1000));
//Setting the node for the transition
scaleTransition.setNode(circle);
//Setting the dimensions for scaling
scaleTransition.setByY(1.5);
scaleTransition.setByX(1.5);
//Setting the cycle count for the translation
scaleTransition.setCycleCount(50);
//Setting auto reverse value to true
scaleTransition.setAutoReverse(false);
//Playing the animation
scaleTransition.play();
//Creating a Group object
Group root = new Group(circle);
//Creating a scene object
Scene scene = new Scene(root, 600, 300);
//Setting title to the Stage
stage.setTitle("Scale transition example");
//Adding scene to the stage
stage.setScene(scene);
//Displaying the contents of the stage
stage.show();
}
public static void main(String args[]){
launch(args);
}
}
Kompilasi dan jalankan file java yang disimpan dari command prompt menggunakan perintah berikut.
javac ScaleTransitionExample.java
java ScaleTransitionExample
Saat menjalankan, program di atas menghasilkan jendela JavaFX seperti yang ditunjukkan di bawah ini.
Terjemahkan Transisi
Berikut adalah program yang mendemonstrasikan Transisi Terjemahan di JavaFX. Simpan kode ini dalam file dengan namaTranslateTransitionExample.java.
import javafx.animation.TranslateTransition;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
import javafx.util.Duration;
public class TranslateTransitionExample extends Application {
@Override
public void start(Stage stage) {
//Drawing a Circle
Circle circle = new Circle();
//Setting the position of the circle
circle.setCenterX(150.0f);
circle.setCenterY(135.0f);
//Setting the radius of the circle
circle.setRadius(100.0f);
//Setting the color of the circle
circle.setFill(Color.BROWN);
//Setting the stroke width of the circle
circle.setStrokeWidth(20);
//Creating Translate Transition
TranslateTransition translateTransition = new TranslateTransition();
//Setting the duration of the transition
translateTransition.setDuration(Duration.millis(1000));
//Setting the node for the transition
translateTransition.setNode(circle);
//Setting the value of the transition along the x axis.
translateTransition.setByX(300);
//Setting the cycle count for the transition
translateTransition.setCycleCount(50);
//Setting auto reverse value to false
translateTransition.setAutoReverse(false);
//Playing the animation
translateTransition.play();
//Creating a Group object
Group root = new Group(circle);
//Creating a scene object
Scene scene = new Scene(root, 600, 300);
//Setting title to the Stage
stage.setTitle("Translate transition example");
//Adding scene to the stage
stage.setScene(scene);
//Displaying the contents of the stage
stage.show();
}
public static void main(String args[]){
launch(args);
}
}
Kompilasi dan jalankan file java yang disimpan dari command prompt menggunakan perintah berikut.
javac TranslateTransitionExample.java
java TranslateTransitionExample
Saat menjalankan, program di atas menghasilkan jendela JavaFX seperti yang ditunjukkan di bawah ini.
Selain itu, JavaFX menyediakan kelas untuk menerapkan lebih banyak transisi pada node. Berikut ini adalah jenis transisi lain yang didukung oleh JavaFX.
Transisi yang mempengaruhi atribut node Fade, Fill, Stroke
Transisi yang melibatkan lebih dari satu transisi dasar Sequential, Parallel, Pause
Transisi yang menerjemahkan objek di sepanjang jalur Path Transition yang ditentukan