Effects in JavaFX - Quick Start

This time I will try to talk about the effects in JavaFX.

Oddly enough, the effects in JavaFX are simple :)

(carefully, illustrations)



To begin with, we’ll make a blank, which we will later mock:

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;

Stage {
    title: "Effects"
    scene: Scene {
        width: 250
        height: 80
        content: [
            Circle {
                translateX: 40
                translateY: 40
                radius: 15
                fill: Color.RED
            }
        ]
    }
}


If we run this code, we will see a simple window with a red circle: nothing surprising, we did not expect to see anything else.



Now let's apply some simple effect, for example, Gaussian blur:

package tiny;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;
import javafx.scene.effect.GaussianBlur;

Stage {
    title: "Effects"
    scene: Scene {
        width: 250
        height: 80
        content: [
            Circle {

                effect: GaussianBlur {
                    radius: 9
                }

                translateX: 40
                translateY: 40
                radius: 15
                fill: Color.RED
            }
        ]
    }
}


If we run, we will see a blurred circle. As you can see, we added only three lines and easily got blur.



Let's complicate the task. What if we want to apply an effect to many elements? Then we have two ways.
First, we can always specify the effect for each of the elements. Secondly, we can always combine elements into a group and apply the effect to it, and not to individual elements.

package tiny;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;
import javafx.scene.effect.GaussianBlur;
import javafx.scene.Group;
import javafx.scene.control.Button;

Stage {
    title: "Effects"
    scene: Scene {
        width: 250
        height: 80
        content: [
            Group {
                effect: GaussianBlur {
                    radius: 5
                }

                content: [
                    Circle {
                        translateX: 40
                        translateY: 40
                        radius: 15
                        fill: Color.RED
                    },
                    Button {
                        translateX: 5
                        translateY: 15
                        text: "Clickme"
                    }

                ]
            }
        ]
    }
}


By running we get a blurry circle and a working blurry button.



Now, let's add some dynamics. JavaFX provides a special tool for managing processes that occur over time - the Timeline.

Let's try to achieve a smooth change in the blur effect over time.

Add the blurRadius variable, the value of which will change over time:

var blurRadius : Number = 0;


Now create a timeline:

Timeline {
    repeatCount: Timeline.INDEFINITE
    autoReverse: true

    keyFrames: [
        KeyFrame {
            time: 1s
            values:
                blurRadius => 9 tween Interpolator.LINEAR
        }
    ]
}.play();


Here we determine that the timeline runs “forever”. autoReverse allows you to scroll back an animation after it is done.
Next, we define reference points, or rather, reference frames. Thus, we determine that at the 1st second, the value of the blurRadius variable should become equal to 9 and over time, the variable should approach this value in a linear manner.

Now bind the blur effect to our blurRadius variable :

effect:bind GaussianBlur {
                    radius: blurRadius
                }


That’s it, now we will unite everything together, and do not forget to start our timeline (by calling the .play () method):

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;
import javafx.scene.effect.GaussianBlur;
import javafx.scene.Group;
import javafx.scene.control.Button;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;
import javafx.animation.Interpolator;

var blurRadius : Number = 0;

Stage {
    title: "Effects"
    scene: Scene {
        width: 250
        height: 80
        content: [
            Group {
                effect:bind GaussianBlur {
                    radius: blurRadius
                }

                content: [
                    Circle {
                        translateX: 40
                        translateY: 40
                        radius: 15
                        fill: Color.RED
                    },
                    Button {
                        translateX: 5
                        translateY: 15
                        text: "Clickme"
                    }

                ]
            }
        ]
    }
};

Timeline {
    repeatCount: Timeline.INDEFINITE
    autoReverse: true

    keyFrames: [
        KeyFrame {
            time: 1s
            values:
                blurRadius => 9 tween Interpolator.LINEAR
        }
    ]
}.play();


When we run this code, we get an animated window.


But, what are we attached to Gauss? Let's try something else.

package tiny;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;
import javafx.scene.Group;
import javafx.scene.control.Button;
import javafx.scene.effect.Reflection;

Stage {
    title: "Effects"
    scene: Scene {
        width: 200
        height: 100
        content: [
            Group {
                effect: Reflection {
                    fraction: 0.75
                    topOffset: 0.0
                    topOpacity: 0.5
                    bottomOpacity: 0.0
                }

                content: [
                    Circle {
                        translateX: 40
                        translateY: 40
                        radius: 15
                        fill: Color.RED
                    },
                    Button {
                        translateX: 5
                        translateY: 15
                        text: "Clickme"
                    }

                ]
            }
        ]
    }
};


Also, in JavaFX there are several more effects, among them the effect of glow, distortion, glow, shadow, etc.:


On this, my cursory story about effects in JavaFX came to an end.

Good luck.

Cg.