SplitPane Animation with DoubleTransition

Today I added a nice effect to SnapCode which slides a SplitPane item onscreen when a button is clicked. This functionality was actually ported over from Swing where it required a significant amount of code, but in JavaFX, I was able to achieve the same effect with just a few lines of code.

So when I click on the “Add Support Pane” button, this code adds the SupportPane to the SplitPane and triggers the animation:

  mySplitPn.getItems().add(_supportPane);
  DoubleProperty dprop = mySplitPn.getDividers().get(0).positionProperty();
  DoubleTransition dt = new DoubleTransition(Duration.millis(500), dprop);
  dt.setFromValue(1); dt.setToValue(500); dt.play();

When I click the button again (to remove), similar code is called, except that the item is removed OnFished:

  DoubleProperty dprop = mySplitPn.getDividers().get(0).positionProperty();
  DoubleTransition dt = new DoubleTransition(Duration.millis(500), dprop);
  dt.setToValue(1d); dt.play();
  dt.setOnFinished(new EventHandler<ActionEvent>() {
    public void handle(ActionEvent e) {
      getBrowserBox().getItems().remove(1); }});

So it is very simple to add such a nice animated effect. Now the only slight complication is that there is no “DoubleTransition” class in JavaFX. It turns out that this class is trivial to implement with just a slight modification to something like FadeTransition. And this DoubleTransition class will undoubtedly come in handy in other places as well.

Here is a link to the source: DoubleTransition.java

And a link to a simple video demo as well: SplitPane Animation Video

About these ads

2 Responses to “SplitPane Animation with DoubleTransition”

  1. JavaFX links of the week, June 2 // JavaFX News, Demos and Insight // FX Experience Says:

    […] The ReportMill blog has a post about creating a SplitPane animation using a DoubleTransition. […]

  2. Java desktop links of the week, June 2 « Jonathan Giles Says:

    […] The ReportMill blog has a post about creating a SplitPane animation using a DoubleTransition. […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Follow

Get every new post delivered to your Inbox.

%d bloggers like this: