Flipping Nodes with the JavaFX PerspectiveTransform

In working on some new features for Music Explorer FX 2.0, one of the issues I’ve had to think about is where to put track information for an artist. The current UI is mostly visual and doesn’t afford a lot of space per artist. For reference, here is how a typical artist is currently represented:

Wouldn’t it be nice if we could just work within the current space constraints and flip that artist over to see the tracks that it has to offer? With JavaFX’s PerspectiveTransform (and the help of a Timeline for some animation) we can do just that.  Here’s a screenshot of a node flip in-progress.

Here’s a shot of the track listing on the “back” rotating into view.

And here’s the final state.

This is just a prototype (clearly I don’t listen to Nickelback), but feel free to go ahead and try it for yourself. Once you launch the app, click on the “flip” button to flip the node back and forth.

The code to make this work is an amalgam of Josh Marinacci’s “Photo Flip” demo and the Flip Transition in Lucas Jordan’s “JavaFX Special Effects” book. The main issue to be aware of here is that, as explained in Lucas’ book, we’re not flipping 180 degrees from front to back. If we did that the track listing UI would be reversed.

Rather what is really happening is that halfway through the rotation when the front node is “on edge”, we’re swapping it for the back node (the track listing) and rotating the track listing the “last” 90 degrees of the rotation — as if it had made a complete rotation.

In other words we’re rotating a full 360 degrees, but cutting out the “middle” 180 degrees to make it look like half a rotation. If we didn’t do this, but rather just rotated 180 degrees, the track listing would appear backwards.

Feel free to check out the source code for details.

Incidentally, this is just one of many neat tricks in Lucas’ book, so be sure to pick up a copy. By way of full disclosure and self-aggrandizement, I was the tech reviewer for the the book — but don’t let that stop you from ordering your copy today!