JavaFX - Animaciones
En general, animar un objeto implica crear la ilusión de su movimiento mediante una visualización rápida. En JavaFX, un nodo se puede animar cambiando su propiedad con el tiempo. JavaFX proporciona un paquete llamadojavafx.animation. Este paquete contiene clases que se utilizan para animar los nodos. La animación es la clase base de todas estas clases.
Usando JavaFX, puede aplicar animaciones (transiciones) como Fade Transition, Fill Transition, Rotate Transition, Scale Transition, Stroke Transition, Translate Transition, Path Transition, Sequential Transition, Pause Transition, Parallel Transitionetc.
Todas estas transiciones están representadas por clases individuales en el paquete. javafx.animation.
Para aplicar una animación en particular a un nodo, debe seguir los pasos que se detallan a continuación:
Cree un nodo obligatorio utilizando la clase respectiva.
Cree una instancia de la clase de transición (animación) respectiva que se va a aplicar
Establezca las propiedades de la transición y
Finalmente reproduzca la transición usando el play() método del Animation clase.
En este capítulo vamos a discutir ejemplos de transiciones básicas (rotación, escalado, traducción).
Rotar transición
A continuación se muestra el programa que demuestra Rotate Transition en JavaFX. Guarde este código en un archivo con el nombreRotateTransitionExample.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);
}
}Compile y ejecute el archivo java guardado desde el símbolo del sistema utilizando los siguientes comandos.
javac RotateTransitionExample.java
java RotateTransitionExampleAl ejecutarse, el programa anterior genera una ventana JavaFX como se muestra a continuación.
Transición de escala
A continuación se muestra el programa que demuestra Scale Transition en JavaFX. Guarde este código en un archivo con el nombreScaleTransitionExample.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);
}
}Compile y ejecute el archivo java guardado desde el símbolo del sistema utilizando los siguientes comandos.
javac ScaleTransitionExample.java
java ScaleTransitionExampleAl ejecutarse, el programa anterior genera una ventana JavaFX como se muestra a continuación.
Transición de traducción
A continuación se muestra el programa que demuestra Translate Transition en JavaFX. Guarde este código en un archivo con el nombreTranslateTransitionExample.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);
}
}Compile y ejecute el archivo java guardado desde el símbolo del sistema utilizando los siguientes comandos.
javac TranslateTransitionExample.java
java TranslateTransitionExampleAl ejecutarse, el programa anterior genera una ventana JavaFX como se muestra a continuación.
Además de estos, JavaFX proporciona clases para aplicar más transiciones en los nodos. Los siguientes son los otros tipos de transiciones compatibles con JavaFX.
Transiciones que afectan los atributos de los nodos Fade, Fill, Stroke
Transiciones que involucran más de una transición básica Secuencial, Paralela, Pausa
Transición que traslada el objeto a lo largo de la ruta especificada Transición de ruta