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 RotateTransitionExample

Al 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 ScaleTransitionExample

Al 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 TranslateTransitionExample

Al 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