The document details the creation of animations in JavaFX 2.0, explaining two primary methods: transitions and timelines. Various types of transitions, such as fade, fill, rotate, and scale transitions are discussed, including their implementation through builders. It also includes examples of animating car images and clouds along a track using JavaFX's timeline and keyframes.

1. JAVAFX 2.0
Rich Client Applications
Richard Bair & Jasper Potts

2. 0
100
200
300
400
100 200 300 400 500 600 700 800 900 1000
Swing JavaFX (fullspeed) JavaFX

3. •Two ways of creating animation in JavaFX
• Transitions (Action based animation)
• Timelines (Key Frame based animation)
ANIMATION

4. • FadeTransition
• FillTransition
• ParallelTransition
• PathTransition
• PauseTransition
• RotateTransition
• ScaleTransition
• SequentialTransition
• StrokeTransition
• TranslateTransition
TRANSITIONS

5. • FadeTransition
• FillTransition
• ParallelTransition
• PathTransition
• PauseTransition
• RotateTransition
• ScaleTransition
• SequentialTransition
• StrokeTransition
• TranslateTransition
TRANSITIONS

6. • FadeTransition
• FillTransition
• ParallelTransition
• PathTransition
• PauseTransition
• RotateTransition
• ScaleTransition
• SequentialTransition
• StrokeTransition
• TranslateTransition
TRANSITIONS
FadeTransitionBuilder.create()
.duration(Duration.seconds(4))
.node(rect)
.fromValue(1)
.toValue(0.2)
.cycleCount(Timeline.INDEFINITE)
.autoReverse(true)
.build()
.play();

7. • FadeTransition
• FillTransition
• ParallelTransition
• PathTransition
• PauseTransition
• RotateTransition
• ScaleTransition
• SequentialTransition
• StrokeTransition
• TranslateTransition
TRANSITIONS

8. •FadeTransition
•FillTransition
• ParallelTransition
• PathTransition
• PauseTransition
• RotateTransition
• ScaleTransition
• SequentialTransition
• StrokeTransition
• TranslateTransition
TRANSITIONS
FillTransitionBuilder.create()
.duration(Duration.seconds(3))
.shape(rect)
.fromValue(Color.RED)
.toValue(Color.DODGERBLUE)
.cycleCount(Timeline.INDEFINITE)
.autoReverse(true)
.build()
.play();

9. • FadeTransition
• FillTransition
• ParallelTransition
• PathTransition
• PauseTransition
• RotateTransition
• ScaleTransition
• SequentialTransition
• StrokeTransition
• TranslateTransition
TRANSITIONS

10. •FadeTransition
•FillTransition
• ParallelTransition
• PathTransition
• PauseTransition
• RotateTransition
• ScaleTransition
• SequentialTransition
• StrokeTransition
• TranslateTransition
TRANSITIONS
ParallelTransitionBuilder.create()
.node(rect)
.children(
FadeTransitionBuilder.create()
....... .build(),
TranslateTransitionBuilder.create()
....... .build(),
RotateTransitionBuilder.create()
....... .build(),
ScaleTransitionBuilder.create()
....... .build(),
)
.cycleCount(Timeline.INDEFINITE)
.autoReverse(true)
.build();

11. • FadeTransition
• FillTransition
• ParallelTransition
• PathTransition
• PauseTransition
• RotateTransition
• ScaleTransition
• SequentialTransition
• StrokeTransition
• TranslateTransition
TRANSITIONS

12. •FadeTransition
•FillTransition
•ParallelTransition
•PathTransition
• PauseTransition
• RotateTransition
• ScaleTransition
• SequentialTransition
• StrokeTransition
• TranslateTransition
TRANSITIONS
Path path = PathBuilder.create()
.elements(
new MoveTo(20,20),
new CubicCurveTo(380, 0, 380, 120, 200, 120),
new CubicCurveTo(0, 120, 0, 240, 380, 240)
)
.build();
.build();PathTransitionBuilder
.create()
.duration(Duration.seconds(4))
.path(path)
.node(rect)
.orientation(
OrientationType.ORTHOGONAL_TO_TANGENT)
.cycleCount(Timeline.INDEFINITE)
.autoReverse(true)
.build();

13. • FadeTransition
• FillTransition
• ParallelTransition
• PathTransition
• PauseTransition
• RotateTransition
• ScaleTransition
• SequentialTransition
• StrokeTransition
• TranslateTransition
TRANSITIONS

14. •FadeTransition
•FillTransition
•ParallelTransition
•PathTransition
• PauseTransition
• RotateTransition
• ScaleTransition
• SequentialTransition
• StrokeTransition
• TranslateTransition
TRANSITIONS
SequentialTransitionBuilder.create()
.node(rect)
.children(
TranslateTransitionBuilder.create()
....... .build(),
PauseTransitionBuilder.create()
.duration(Duration.seconds(2))
.build(),
TranslateTransitionBuilder.create()
....... .build()
)
.cycleCount(Timeline.INDEFINITE)
.autoReverse(true)
.build().play();

15. •FadeTransition
•FillTransition
•ParallelTransition
•PathTransition
• PauseTransition
• RotateTransition
• ScaleTransition
• SequentialTransition
• StrokeTransition
• TranslateTransition
TRANSITIONS
PauseTransitionBuilder.create()
.duration(Duration.seconds(1))
.onFinished(new EventHandler<ActionEvent>() {
@Override public void handle(ActionEvent t) {
text.setText("Bang!");
}
})
.build().play();

16. • FadeTransition
• FillTransition
• ParallelTransition
• PathTransition
• PauseTransition
• RotateTransition
• ScaleTransition
• SequentialTransition
• StrokeTransition
• TranslateTransition
TRANSITIONS

17. •FadeTransition
•FillTransition
• ParallelTransition
• PathTransition
• PauseTransition
• RotateTransition
• ScaleTransition
• SequentialTransition
• StrokeTransition
• TranslateTransition
TRANSITIONS
RotateTransitionBuilder.create()
.node(rect)
.duration(Duration.seconds(4))
.fromAngle(0)
.toAngle(720)
.cycleCount(Timeline.INDEFINITE)
.autoReverse(true)
.build().play();

18. • FadeTransition
• FillTransition
• ParallelTransition
• PathTransition
• PauseTransition
• RotateTransition
• ScaleTransition
• SequentialTransition
• StrokeTransition
• TranslateTransition
TRANSITIONS

19. •FadeTransition
•FillTransition
• ParallelTransition
• PathTransition
• PauseTransition
• RotateTransition
• ScaleTransition
• SequentialTransition
• StrokeTransition
• TranslateTransition
TRANSITIONS
ScaleTransitionBuilder.create()
.node(rect)
.duration(Duration.seconds(4))
.toX(3)
.toY(3)
.cycleCount(Timeline.INDEFINITE)
.autoReverse(true)
.build().play();

20. • FadeTransition
• FillTransition
• ParallelTransition
• PathTransition
• PauseTransition
• RotateTransition
• ScaleTransition
• SequentialTransition
• StrokeTransition
• TranslateTransition
TRANSITIONS

21. •FadeTransition
•FillTransition
• ParallelTransition
• PathTransition
• PauseTransition
• RotateTransition
• ScaleTransition
• SequentialTransition
• StrokeTransition
• TranslateTransition
TRANSITIONS
SequentialTransitionBuilder.create()
.node(rect)
.children(
RotateTransitionBuilder.create()
....... .build(),
ScaleTransitionBuilder.create()
....... .build(),
TranslateTransitionBuilder.create()
....... .build(),
FadeTransitionBuilder.create()
....... .build()
)
.cycleCount(Timeline.INDEFINITE)
.autoReverse(true)
.build().play();

22. • FadeTransition
• FillTransition
• ParallelTransition
• PathTransition
• PauseTransition
• RotateTransition
• ScaleTransition
• SequentialTransition
• StrokeTransition
• TranslateTransition
TRANSITIONS

23. •FadeTransition
•FillTransition
• ParallelTransition
• PathTransition
• PauseTransition
• RotateTransition
• ScaleTransition
• SequentialTransition
• StrokeTransition
• TranslateTransition
TRANSITIONS
StrokeTransitionBuilder.create()
.duration(Duration.seconds(3))
.shape(rect)
.fromValue(Color.RED)
.toValue(Color.DODGERBLUE)
.cycleCount(Timeline.INDEFINITE)
.autoReverse(true)
.build().play();

24. • FadeTransition
• FillTransition
• ParallelTransition
• PathTransition
• PauseTransition
• RotateTransition
• ScaleTransition
• SequentialTransition
• StrokeTransition
• TranslateTransition
TRANSITIONS

25. •FadeTransition
•FillTransition
• ParallelTransition
• PathTransition
• PauseTransition
• RotateTransition
• ScaleTransition
• SequentialTransition
• StrokeTransition
• TranslateTransition
TRANSITIONS
TranslateTransitionBuilder.create()
.duration(Duration.seconds(4))
.node(circle)
.fromX(20)
.toX(380)
.cycleCount(Timeline.INDEFINITE)
.autoReverse(true)
.build().play();

26. • FadeTransition
• FillTransition
• ParallelTransition
• PathTransition
• PauseTransition
• RotateTransition
• ScaleTransition
• SequentialTransition
• StrokeTransition
• TranslateTransition
TRANSITIONS

27. •Timeline animation can do anything transitions
can do and much more
TIMELINE ANIMATION

28. TimelineBuilder.create()
.keyFrames(
)
.build().play();
............
BASICTIMELINE

29. TimelineBuilder.create()
.keyFrames(
)
.build().play();
............
ImageView sedan = ImageViewBuilder.create()
.image(new Image(TimelineAnimation.class.getResourceAsStream("sedan-s.png")))
.translateX(10).translateY(110-27).build();
ImageView suv = ImageViewBuilder.create()
.image(new Image(TimelineAnimation.class.getResourceAsStream("suv-s.png")))
.translateX(10).translateY(140-27).build();
ImageView truck = ImageViewBuilder.create()
.image(new Image(TimelineAnimation.class.getResourceAsStream("truck-s.png")))
.translateX(10).translateY(170-27).build();
ImageView van = ImageViewBuilder.create()
.image(new Image(TimelineAnimation.class.getResourceAsStream("van-s.png")))
.translateX(10).translateY(200-27).build();
............
CREATE CAR IMAGEVIEWS

30. TimelineBuilder.create()
.keyFrames(
)
.build().play();
// DRIVING CARS ALONG TRACK
new KeyFrame( Duration.seconds(5.5+(3*Math.random())),
new KeyValue(sedan.translateXProperty(), TRACK_LENGTH, accelerate)),
new KeyFrame( Duration.seconds(5.5+(3*Math.random())),
new KeyValue(suv.translateXProperty(), TRACK_LENGTH, accelerate)),
new KeyFrame( Duration.seconds(5),
new KeyValue(truck.translateXProperty(), TRACK_LENGTH,
Interpolator.SPLINE(0.698,0.055,0.838,0.310))),
new KeyFrame( Duration.seconds(5.5+(3*Math.random())),
new KeyValue(van.translateXProperty(), TRACK_LENGTH, accelerate)),
............
ImageView sedan = ImageViewBuilder.create()
.image(new Image(TimelineAnimation.class.getResourceAsStream("sedan-s.png")))
.translateX(10).translateY(110-27).build();
ImageView suv = ImageViewBuilder.create()
.image(new Image(TimelineAnimation.class.getResourceAsStream("suv-s.png")))
.translateX(10).translateY(140-27).build();
ImageView truck = ImageViewBuilder.create()
.image(new Image(TimelineAnimation.class.getResourceAsStream("truck-s.png")))
.translateX(10).translateY(170-27).build();
ImageView van = ImageViewBuilder.create()
.image(new Image(TimelineAnimation.class.getResourceAsStream("van-s.png")))
.translateX(10).translateY(200-27).build();
............
ADD CAR KEYFRAMES

31. Interpolator.SPLINE(0.698,0.055,0.838,0.310)
ACCELERATION CURVE

32. TimelineBuilder.create()
.keyFrames(
)
.build().play();
............
Rotate truckWheelie = new Rotate(0,11,21);
truck.getTransforms().add(truckWheelie);
............
ImageView sedan = ImageViewBuilder.create()
.image(new Image(TimelineAnimation.class.getResourceAsStream("sedan-s.png")))
.translateX(10).translateY(110-27).build();
ImageView suv = ImageViewBuilder.create()
.image(new Image(TimelineAnimation.class.getResourceAsStream("suv-s.png")))
.translateX(10).translateY(140-27).build();
ImageView truck = ImageViewBuilder.create()
.image(new Image(TimelineAnimation.class.getResourceAsStream("truck-s.png")))
.translateX(10).translateY(170-27).build();
ImageView van = ImageViewBuilder.create()
.image(new Image(TimelineAnimation.class.getResourceAsStream("van-s.png")))
.translateX(10).translateY(200-27).build();
ADDTRUCK ROTATETRANSFORM

33. TimelineBuilder.create()
.keyFrames(
)
.build().play();
............
// TRUCK WHEELIE
new KeyFrame( Duration.seconds(3),
new KeyValue(truckWheelie.angleProperty(), 0)),
new KeyFrame( Duration.seconds(3.5),
new KeyValue(truckWheelie.angleProperty(), -15)),
............
Rotate truckWheelie = new Rotate(0,11,21);
truck.getTransforms().add(truckWheelie);
............
ImageView sedan = ImageViewBuilder.create()
.image(new Image(TimelineAnimation.class.getResourceAsStream("sedan-s.png")))
.translateX(10).translateY(110-27).build();
ImageView suv = ImageViewBuilder.create()
.image(new Image(TimelineAnimation.class.getResourceAsStream("suv-s.png")))
.translateX(10).translateY(140-27).build();
ImageView truck = ImageViewBuilder.create()
.image(new Image(TimelineAnimation.class.getResourceAsStream("truck-s.png")))
.translateX(10).translateY(170-27).build();
ImageView van = ImageViewBuilder.create()
.image(new Image(TimelineAnimation.class.getResourceAsStream("van-s.png")))
.translateX(10).translateY(200-27).build();
ANIMATETRUCK WHEELIE

34. TimelineBuilder.create()
.keyFrames(
)
.build().play();
............
// CLOUDS
new KeyFrame( Duration.seconds(30),
new KeyValue(cloud1.translateXProperty(), TRACK_LENGTH*0.8)),
new KeyFrame( Duration.seconds(30),
new KeyValue(cloud2.translateXProperty(), TRACK_LENGTH*0.1)),
new KeyFrame( Duration.seconds(30),
new KeyValue(cloud3.translateXProperty(), TRACK_LENGTH*0.3))
private static final String CLOUD =
"M44.618,14.363c0.504-0.8,0.795-1.696,0.795-2.647c0-3.333-3.476-6.034-7.765-6.034"+
"c-0.213,0-0.422,0.012-0.63,0.025c-0.268-2.93-4.914-5.265-10.623-5.265c-5.882,0-10.65,2.475-10.65,5.529"+
"c0,0.427,0.102,0.841,0.279,1.24c-4.767,0.863-8.207,3.293-8.207,6.163c0,0.21,0.022,0.417,0.058,0.622"+
"c-4.088,0.38-7.27,3.302-7.27,6.855c0,3.81,3.659,6.898,8.173,6.898c0.874,0,1.715-0.118,2.504-0.333"+
"c2.808,1.431,7.161,2.353,12.062,2.353c4.689,0,8.881-0.844,11.694-2.169c0.712,0.097,1.447,0.149,2.2,0.149"+
"c6.187,0,11.202-3.423,11.202-7.645C48.442,17.814,46.958,15.765,44.618,14.363z";
SVGPath cloud1 = SVGPathBuilder.create().content(CLOUD).fill(Color.WHITE)
.translateX(TRACK_LENGTH*0.1).translateY(10).build();
SVGPath cloud2 = SVGPathBuilder.create().content(CLOUD).fill(Color.WHITE)
.translateX(TRACK_LENGTH*0.9).translateY(5).build();
SVGPath cloud3 = SVGPathBuilder.create().content(CLOUD).fill(Color.WHITE)
.translateX(TRACK_LENGTH*0.6).translateY(15).build();
............
ADD & ANIMATE CLOUDS

35. TimelineBuilder.create()
.keyFrames(
)
.build().play();
// DRIVING CARS ALONG TRACK
new KeyFrame( Duration.seconds(5.5+(3*Math.random())),
new KeyValue(sedan.translateXProperty(), TRACK_LENGTH, accelerate)),
new KeyFrame( Duration.seconds(5.5+(3*Math.random())),
new KeyValue(suv.translateXProperty(), TRACK_LENGTH, accelerate)),
new KeyFrame( Duration.seconds(5),
new KeyValue(truck.translateXProperty(), TRACK_LENGTH,
Interpolator.SPLINE(0.698,0.055,0.838,0.310))),
new KeyFrame( Duration.seconds(5.5+(3*Math.random())),
new KeyValue(van.translateXProperty(), TRACK_LENGTH, accelerate)),
// TRUCK WHEELIE
new KeyFrame( Duration.seconds(3),
new KeyValue(truckWheelie.angleProperty(), 0)),
new KeyFrame( Duration.seconds(3.5),
new KeyValue(truckWheelie.angleProperty(), -15)),
// CLOUDS
new KeyFrame( Duration.seconds(30),
new KeyValue(cloud1.translateXProperty(), TRACK_LENGTH*0.8)),
new KeyFrame( Duration.seconds(30),
new KeyValue(cloud2.translateXProperty(), TRACK_LENGTH*0.1)),
new KeyFrame( Duration.seconds(30),
new KeyValue(cloud3.translateXProperty(), TRACK_LENGTH*0.3))
............
COMPLETETIMELINE

36. TimelineBuilder.create()
.keyFrames(
)
.build().play();
// DRIVING CARS ALONG TRACK
new KeyFrame( Duration.seconds(5.5+(3*Math.random())),
new KeyValue(sedan.translateXProperty(), TRACK_LENGTH, accelerate)),
new KeyFrame( Duration.seconds(5.5+(3*Math.random())),
new KeyValue(suv.translateXProperty(), TRACK_LENGTH, accelerate)),
new KeyFrame( Duration.seconds(5),
new KeyValue(truck.translateXProperty(), TRACK_LENGTH,
Interpolator.SPLINE(0.698,0.055,0.838,0.310))),
new KeyFrame( Duration.seconds(5.5+(3*Math.random())),
new KeyValue(van.translateXProperty(), TRACK_LENGTH, accelerate)),
// TRUCK WHEELIE
new KeyFrame( Duration.seconds(3),
new KeyValue(truckWheelie.angleProperty(), 0)),
new KeyFrame( Duration.seconds(3.5),
new KeyValue(truckWheelie.angleProperty(), -15)),
// CLOUDS
new KeyFrame( Duration.seconds(30),
new KeyValue(cloud1.translateXProperty(), TRACK_LENGTH*0.8)),
new KeyFrame( Duration.seconds(30),
new KeyValue(cloud2.translateXProperty(), TRACK_LENGTH*0.1)),
new KeyFrame( Duration.seconds(30),
new KeyValue(cloud3.translateXProperty(), TRACK_LENGTH*0.3))
............
COMPLETETIMELINE

37. •You can apply effects to any node
•Effects can be combined using Blend effect
•Available Effects:
EFFECTS
• Blend
• Bloom
• BoxBlur
• ColorAdjust
• DisplacementMap
• DropShadow
• GaussianBlur
• Glow
• InnerShadow
• Lighting
• MotionBlur
• PerspectiveTransform
• Reflection
• SepiaTone

38. Here is how to create dynamic text with a
recessed effect applied in realtime.
RECESSEDTEXT

39. Text label = TextBuilder.create()
.font(Font.font("Arial Black", 72))
.style("-fx-fill: linear-gradient(from 0% 0% to 0% 100%, #bebebe 0%,
#aaaaaa 100%);")
.text("Recessed")
.build();
TextField textField = TextFieldBuilder.create()
.text("Recessed")
.build();
label.textProperty().bind(textField.textProperty());
Scene scene = new Scene(VBoxBuilder.create()
.spacing(20)
.padding(new Insets(30))
.children(label, textField)
.style("-fx-background-color: linear-gradient(from 0% 0% to 0% 100%,
#cacaca 0%, #616161 100%);")
.prefWidth(800)
.build());

40. Effect recessed = BlendBuilder.create()
.mode(BlendMode.MULTIPLY)
.bottomInput(
DropShadowBuilder.create()
.color(Color.rgb(255,255,255,0.5))
.offsetX(1).offsetY(1)
.radius(0)
.build()
)
.topInput(
InnerShadowBuilder.create()
.color(Color.rgb(0,0,0,0.7))
.offsetX(2).offsetY(2)
.radius(5)
.build()
)
.build();
label.setEffect(recessed)