×

JavaFX Fade Transition

In the JavaFX application, in order to generate the fade transition, we have to apply fade transition on any particular shape. It has the ability to show the fading colors of the given shape. All methods needed for this purpose are present in the javafx.animation.FadeTransition class.

Properties and corresponding methods to create Fade Transition:

1. byValue

This property is of double type. It is used to represent the stop opacity factor and the setByValue() method is used to set it.

2. fromValue

This property is of double type. It is used to represent the start opacity factor and the setFromValue() method is used to set it.

3. toValue

This property is of double type. It is used to represent the stop value for opacity factor and the setToValue() method is used to set it.

4. duration

This property is of the object type. It is used to represent the duration of the transition and the setDuration() method is used to set it.

5. node

This property is of the object type. It is used to represent the shape on which transition is to be applied and the setNode() method is used to set it.

JavaFX Animation - Fade Transition

Example:

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 AnimationUI extends Application {  


    @Override  
    public void start(Stage stage) throws Exception 
    { 
   
     Circle cir = new Circle(250,120,80);  
         
         cir.setFill(Color.BLUE);  
           
         FadeTransition fade = new FadeTransition();  
           
           
         fade.setDuration(Duration.millis(3000));  
           
         fade.setFromValue(10);  
         fade.setToValue(0.1);  
           
         fade.setCycleCount(1000);  
           
         fade.setAutoReverse(true);  
           
         fade.setNode(cir);  
           
           
         fade.play();  
           
         Group root = new Group();  
         root.getChildren().addAll(cir);  
         Scene scene = new Scene(root,500,250);  
         stage.setScene(scene);  
        stage.setTitle("JavaFx Fade Transition example");  
         stage.show();  
     }
      
    public static void main(String[] args) {  
        launch(args);  
    }  
}

Output:

In order to create the Fade Transition in JavaFX, we have to import all the required libraries such as javafx.animation.FadeTransition, javafx.application.Application, javafx.scene.Group, javafx.scene.Scene, javafx.scene.paint.Color, javafx.scene.shape.Circle, javafx.stage.Stage, javafx.util.Duration.

Then we have created one class named AnimationUI extending the Application class. Also, we have to override the start method to provide implementation details. This method creates an object of Stage as primaryStage. For the container to hold a fading circle, a Group object is created which is then passed to the Scene class object.

The Circle is created with the help of the constructor and the size parameter and blue color to be filled are passed in it. A fade Transition object is created and using setters various properties are set. Then it will show the fading circle.

The stage is prepared, the title is set and the show() method is called to display output. In order to run the application, the launch(args) method is called in the main() method. In output Frame like container is displayed with the title, " JavaFX Animation - Fade Transition Example”. Also, it displays a circle filled with blue color showing the faded shade after some time.

JavaFX Animation - Fade Transition JavaFX Animation - Fade Transition

JavaFX Animation -Fade Transition on Rectangle

Example:

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.Rectangle;
import javafx.stage.Stage;
import javafx.util.Duration;


public class AnimationUI extends Application {  


    @Override  
    public void start(Stage stage) throws Exception 
    { 
   
    Rectangle rect = new Rectangle(20,20,200,200);  
         
    rect.setFill(Color.RED);  
           
         FadeTransition fade = new FadeTransition();  
           
           
         fade.setDuration(Duration.millis(3000));  
           
         fade.setFromValue(10);  
         fade.setToValue(0.1);  
           
         fade.setCycleCount(1000);  
           
         fade.setAutoReverse(true);  
           
         fade.setNode(rect);  
           
           
         fade.play();  
           
         Group root = new Group();  
         root.getChildren().addAll(rect);  
         Scene scene = new Scene(root,500,450);  
         stage.setScene(scene);  
        stage.setTitle("JavaFx Fade Transition example");  
         stage.show();  
     }
      
    public static void main(String[] args) {  
        launch(args);  
    }  
}

Output:

In order to create the Fade Transition on Rectangle in JavaFX, we have to import all the required libraries such as javafx.animation.FadeTransition, javafx.application.Application, javafx.scene.Group, javafx.scene.Scene, javafx.scene.paint.Color, javafx.scene.shape.Rectangle, javafx.stage.Stage, javafx.util.Duration.

Then we have created one class named AnimationUI extending the Application class. Also, we have to override the start method to provide implementation details. This method creates an object of Stage as primaryStage. For the container to hold a fading Rectangle, a Group object is created which is then passed to the Scene class object.

The Rectangle is created with the help of the constructor and the size parameter and red color to be filled are passed in it. A fade Transition object is created and using setters various properties are set. Then it will show the fading rectangle.

The stage is prepared, the title is set and the show() method is called to display output. In order to run the application, the launch(args) method is called in the main() method. In output Frame like container is displayed with the title, " JavaFX Animation - Fade Transition Example”. Also, it displays a rectangle filled with red color showing the faded shade after some time.

JavaFX Animation - Fade Transition JavaFX Animation - Fade Transition

Related Topics

JavaFX Tutorial

Introduction of JavaFX: The most popular applications called Rich Internet Application are build using the JavaFX. This application can run across many platforms. Various devices such as mobile, computers, and tablets...

4 minutes read.

JavaFX Installation

In order to run JavaFX applications, we need to have eclipse and java installed on our machine. Prerequisite: Operating systemAny Operating system (Windows, Linux, Mac)Memory requirementNo minimum requirementDisk SpaceNo minimum requirementJDK versionJDK...

3 minutes read.

JavaFX Inline Styles

In the JavaFX application, in order to apply various Inline css effect we will use the various css classes available in the JavaFX. It is used to apply the various...

4 minutes read.

JavaFX Selectors

In the JavaFX application, in order to apply various css effect, we use the various css classes available in the JavaFX. This is generally used to enhance the appearance property...

4 minutes read.

JavaFX Scaling

In the JavaFX application, in order to apply various Scaling effects, we use this class. It has the ability to change the size of the given object. All methods needed...

5 minutes read.

JavaFX Drop Shadow

In the JavaFX application, in order to apply various Drop Shadow effect, we use this class. It has the ability to create the drop shadow of the given object. This...

4 minutes read.

JavaFX Line Chart

In the JavaFX application, in order to create a Line Chart, LineChart class is used. The LineChart allows us to plot markers point according to the entities on number axes....

4 minutes read.

JavaFX Rotation

In the JavaFX application, in order to apply various rotation effects, we use this class. It has the ability to rotate the given object. It rotates the given node along...

3 minutes read.

JavaFX HBox

In the JavaFX application, in order to set HBox as a layout, the HBox class is used. The HBox layout allows us to arrange the components in one row. All...

3 minutes read.

JavaFX Bubble Chart

In the JavaFX application, in order to create Bubble Chart, the BubbleChart class is used. The Bubble Chart allows us to plot three dimensional data. All methods needed for this...

4 minutes read.

JavaFX Line

In the JavaFX application, in order to draw a line, the Line class is used. The line allows us to join any two points with x and y coordinates in...

3 minutes read.

JavaFX Event Filters

In JavaFX, in order to handle the event which are created by any of the mouse action, keyboard action, rotate action, scroll action Event filters are used. The event filters...

3 minutes read.

JavaFX Motion Blur

In the JavaFX application, in order to apply various Motion blur effect, we use Motion Blur class. It has the ability to apply the Motion blur effect on the given...

4 minutes read.

JavaFX Light Point

In the JavaFX application, in order to apply various LightPoint effect from a single source, we use this class. It has the ability to apply light from a single source...

4 minutes read.

JavaFX Reflection

In the JavaFX application, in order to apply various reflection effect, we use this class. It has the ability to create the reflection of the given object. This effect adds...

4 minutes read.

JavaFX Blend

In the JavaFX application, in order to apply various blend effect, we use Blend class. It has the ability to blend the colors of the shape. All methods needed for...

4 minutes read.

JavaFX Color Input

In the JavaFX application, in order to apply various color input effect, we use the ColorInput class. It has the ability to fill the specified shape with a given color...

4 minutes read.

JavaFX Button

The button is one of the UI control present in the JavaFX. The javafx.scene.control.Button class is used for creating a button in javafx example. It is also possible to create...

5 minutes read.

JavaFX Light Spot

In the JavaFX application, in order to apply various Light Spot effect from a single source, we use this class. It has the ability to apply light from all the...

4 minutes read.

JavaFX Label

The UI Control Label in a JavaFX is used to display the simple text. To use Label in JavaFX application javafx.scene.control.The label class is used. We can place Labels on...

3 minutes read.