JavaFX comes with a number of animated transitions out of the box which are very easy to integrate into an application without too much effort. There are times though when the existing animations don’t cover a desired transition between UI states. Fortunately, implementing a custom animation is as easy as subclassing the javafx.animation.Transition class and providing an implementation of the interpolate() method. As an example, I had a JavaFX Parent component which I wanted to “grow” to a larger height if a large component was placed inside it. Rather than having the Parent component just jump to its new larger height, I wanted the transition to the new height to be animated over a specified amount of time. I was able to accomplish this effect by creating the ResizeHeightTranslation below.
In the constructor the duration of the animation is passed to the parent class, and the amount of space the component will need to grow is calculated.
All that remains to do in the interpolate() method is to calculate the new height based on how far along the animation is. The interpolate() method will be called by the JavaFX runtime with values starting from 0.0 and going to 1.0 as the animation progresses.
In the example below I have a JavaFX Pane (salmon color), and a Button. When the Button is clicked I would like to add a TableView to the Pane. The TableView however is taller than the Pane is so I would like the Pane to increase in height so the table fits completely within the Pane. To give this state transition a polished effect, I would like the resizing of the Pane to be animated and then I would like the TableView to fade into view once the resizing is complete. Below is a screenshot of the UI, containing the Pane and the Button components.
The FXML for the UI is below
In the controller class for the UI I have implemented and ActionListener method for the Button. When the Button is clicked a new TableView is created, along with a new ResizeHeightTranslation animation and a FadeTransition. Both of these animations are set to execute one right after the other by putting them in a SequentialTransition.
Finally, a short clip illustrating the animated transition in action.