When developers try to sell the switch from Swing to JavaFX to their superiors they often say that the user interfaces will look better and more modern. However, to really deliver on this promise I believe that one can not just rely on the improved look and feel of the built-in controls of JavaFX but that some extra effort has to be made to make the UI really stand out and to make everyone say “yeah, this is really an improvement”.

One of the things that can be done to spice up the UI is to animate some of its elements, e.g. fade in / out, slide in / out.

In CalendarFX one of the places where I use animation is the red horizontal line that marks the current time.

Bildschirmfoto 2015-06-19 um 19.02.43

This line is only shown when the user is looking at the current day (“today”). So the line’s visibility has to be toggled, depending on the current date. When this happens the line does not just appear or disappear but it fades in or out. The following video shows this feature in action:

(For some reason the “red” line shows up in “black” in this quicktime screen capture, but the important thing can still be seen.)

The line softly appears or disappears with a very subtle fade-in / fade-out animation. This kind of animation is very well supported by JavaFX via its observable properties and the FadeTransition. CalendarFX manages the visibility of the line in a property called showCurrentTimeMarker. When this value changes the method updateTimeMarkerVisibility will be called.

	view.showCurrentTimeMarkerProperty()
                  .addListener(it -> updateTimeMarkerVisibility());

The update method first determines the current opacity of the time marker (1 if visible, 0 if not visible) and then uses the fade transition to change the start value to the new end value.

private Line currentTimeMarker;
private Circle currentTimeCircle;

private void updateTimeMarkerVisibility() {
	double lineOpacity =
           getSkinnable().isShowCurrentTimeMarker() ? 1 : 0;
	FadeTransition lineTransition =
           new FadeTransition(Duration.millis(600),
                                   currentTimeMarker);
	lineTransition.setToValue(lineOpacity);
	lineTransition.play();

	double circleOpacity =
           getSkinnable().isShowCurrentTimeTodayMarker() ? 1 : 0;
	FadeTransition circleTransition =
           new FadeTransition(Duration.millis(600),
                                   currentTimeCircle);
	circleTransition.setToValue(circleOpacity);
	circleTransition.play();
}

This is really all it takes to add some spice to your user interface but it will help you to make the little difference that will make people enjoy working with your application (and they will not even know why).