JavaFX - Fill Transition

In the colors section of this tutorial, we have learned that JavaFX nodes can be colored with various colors. However, we had only learned about coloring objects using setFill() method; we can also use animation to change the fill colors of a shape. This type of animation is known as Fill Transition.

Fill transition is a type of transition that changes the color of a JavaFX node during a specified period. This transition is commonly used in applications to conduct quizzes: where the option turns "green" if the answer is correct and "red" otherwise.

Fill Transition

Fill Transition is performed on a JavaFX node using the FillTransition class which belongs to the javafx.animation package. This class contains various properties which can be used to setup the animation on an object.

  • duration − The duration of this FillTransition.

  • shape − The target shape of this FillTransition.

  • fromValue − Specifies the start color value for this FillTransition.

  • toValue − Specifies the stop color value for this FillTransition.

Example

Following is the program which demonstrates Fill Transition in JavaFX. Save this code in a file with the name FillTransitionExample.java.

import javafx.animation.FillTransition; 
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 FillTransitionExample 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(100.0f); 
      
      //Setting the color of the circle 
      circle.setFill(Color.BROWN); 
      
      //Setting the stroke width of the circle 
      circle.setStrokeWidth(20); 
       
      //Creating the fill Transition 
      FillTransition fillTransition = new FillTransition(Duration.millis(1000)); 
      
      //Setting the shape for Transition 
      fillTransition.setShape(circle); 
      
      //Setting the from value of the transition (color) 
      fillTransition.setFromValue(Color.BLUEVIOLET);  
      
      //Setting the toValue of the transition (color) 
      fillTransition.setToValue(Color.CORAL); 
      
      //Setting the cycle count for the transition 
      fillTransition.setCycleCount(50); 
      
      //Setting auto reverse value to false 
      fillTransition.setAutoReverse(false);  
      
      //Playing the animation 
      fillTransition.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("Fill 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 and execute the saved java file from the command prompt using the following commands.

javac --module-path %PATH_TO_FX% --add-modules javafx.controls FillTransitionExample.java 
java --module-path %PATH_TO_FX% --add-modules javafx.controls FillTransitionExample

Output

On executing, the above program generates a JavaFX window as shown below.

Fill Transition
Advertisements