![](http://habrastorage.org/getpro/habr/avatars/fae/497/61f/fae49761f733be0e7ff03d28e34ae42e.jpg)
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:
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.
![a circle](http://files.fealot.ru/fx/1/one.png)
Now let's apply some simple effect, for example, Gaussian blur:
If we run, we will see a blurred circle. As you can see, we added only three lines and easily got blur.
![blurred circle](http://files.fealot.ru/fx/1/two.png)
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.
By running we get a blurry circle and a working blurry button.
![group of blurry elements](http://files.fealot.ru/fx/1/three.png)
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:
Now create a timeline:
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 :
That’s it, now we will unite everything together, and do not forget to start our timeline (by calling the .play () method):
When we run this code, we get an animated window.
![animation, frame](http://files.fealot.ru/fx/1/four.png)
![animation, frame](http://files.fealot.ru/fx/1/five.png)
But, what are we attached to Gauss? Let's try something else.
![reflection](http://files.fealot.ru/fx/1/six.png)
Also, in JavaFX there are several more effects, among them the effect of glow, distortion, glow, shadow, etc.:
![effects palette](http://files.fealot.ru/fx/1/seven.png)
On this, my cursory story about effects in JavaFX came to an end.
Good luck.
Cg.
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.
![a circle](http://files.fealot.ru/fx/1/one.png)
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.
![blurred circle](http://files.fealot.ru/fx/1/two.png)
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.
![group of blurry elements](http://files.fealot.ru/fx/1/three.png)
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.
![animation, frame](http://files.fealot.ru/fx/1/four.png)
![animation, frame](http://files.fealot.ru/fx/1/five.png)
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"
}
]
}
]
}
};
![reflection](http://files.fealot.ru/fx/1/six.png)
Also, in JavaFX there are several more effects, among them the effect of glow, distortion, glow, shadow, etc.:
![effects palette](http://files.fealot.ru/fx/1/seven.png)
On this, my cursory story about effects in JavaFX came to an end.
Good luck.
Cg.