Effects in JavaFX - quick start

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



Oddly enough, effects in JavaFX are easy :)



(carefully, illustrations)

')





To begin with, we will make a blank, on 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, because we didn’t expect to see anything else.







Now let's apply some simple effect, for example, a 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 a blur.







Let's complicate the task. What if we want to apply an effect to many elements? Then we have two ways.

Firstly, we can always specify the effect for each of the elements. Secondly, we can always combine elements into a group and apply an effect to it, rather than 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 : " Click me "

}



]

}

]

}

}



Having started we will receive the blurred circle and the working blurred button.







Now, let's add some dynamics. To control the processes occurring in time in JavaFX, a special tool is provided - timeline.



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



Add a 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 define that the timeline runs “forever.” autoReverse allows you to scroll the animation back after it is executed.

Next, we define the reference points, or rather, the reference frames. Thus, we determine that at the 1st second the value of the blurRadius variable should be equal to 9 and over time the variable should approach this value in a linear relationship.



Now, let's associate a blur effect with our blurRadius variable:

effect : bind GaussianBlur {

radius : blurRadius

}



Everything, now let's merge 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 : " Click me "

}



]

}

]

}

} ;



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 : " Click me "

}



]

}

]

}

} ;



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





This is where my cursory story about effects in JavaFX comes to an end.



Good luck.



CG.