JavaFX - Fade Transition

A Fade transition is a type of a geometrical transition that changes the opacity property of an object. Using fade transition, you can either reduce the opacity of the object or increase it. This transition is known as a geometrical transition as it deals with the geometry of an object.

In JavaFX, the fade transition is used to transition a node's opacity from a starting value to an ending value over a specified duration. This can be done using the FadeTransition class belonging to the javafx.animation package.

Fade Transition in JavaFX

You can apply the fade transition to a JavaFX object using the FadeTransition class properties. You have to set the starting value and ending value of the transition using fromValue and toValue. When fromValue is not specified, the node's current opacity value is considered by default; and when toValue is not specified, the byValue is added to the starting value.

Note that Transition properties − fromValue, toValue and byValue, cannot be changed while a transition is running. However, if you attempt to change a property while the transition is running, the change is ignored. Hence, the animation must be stopped and restarted to assign the new property value(s) to the transition. No exception is thrown either.

The FadeTransition class contains the following properties −

• byValue − Specifies the incremented stop opacity value, from the start, of this FadeTransition.

• duration − The duration of this FadeTransition.

• fromValue − Specifies the start opacity value for this FadeTransition.

• node − The target node of this Transition.

• toValue − Specifies the stop opacity value for this FadeTransition.

Example

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

import javafx.animation.FadeTransition; 
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 FadeTransitionExample 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 fade Transition 
      FadeTransition fadeTransition = new FadeTransition(Duration.millis(1000)); 
      
      //Setting the node for Transition 
      fadeTransition.setNode(circle); 
      
      //Setting the property fromValue of the transition (opacity) 
      fadeTransition.setFromValue(1.0); 
      
      //Setting the property toValue of the transition (opacity) 
      fadeTransition.setToValue(0.3); 
      
      //Setting the cycle count for the transition 
      fadeTransition.setCycleCount(50); 
      
      //Setting auto reverse value to false 
      fadeTransition.setAutoReverse(false); 
  
      //Playing the animation 
      fadeTransition.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("Fade 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 FadeTransitionExample.java 
java --module-path %PATH_TO_FX% --add-modules javafx.controls FadeTransitionExample

Output

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