Custom Transitions

Long time since my last post, but I didn't had enough time to do more JavaFx work...

JavaFX has a lot of built in ready to use animations, called Transitions. There is a base class javafx.animation.Transition and many useful implementations, like the ScaleTransition for animating the size, the RotateTransition for animationg the rotation, or the FadeTransition for animation the transparency or the TranslateTransition for moving a node.

They are easy to use: Instantiate them, set a start and end value and a duration, and call play. Here an example that fades out myNode in 500 milliseconds:

FadeTransition transition = new FadeTransition(Duration.millis(500), myNode);
transition.setFromValue(1);
transition.setToValue(0);
transition.play();

But sometimes, the built in transitions don't fit. Either because the built in transitions only work on nodes, but e.g. not on popups, or because you want to have an animation, that is not yet implemented. So write your own! It is very easy. Just subclass the abstract class Transition and implement the protected method interpolate. Thats all. The param frac is a double between 0 and 1. From this value, the value change of your transition has to be calculated. This is very easy if the target value is a double between 0 and 1 like for opacity. So the easiest possible example is a fade transition for popups:

private class FadeTransitionForPopup extends Transition{
  private Popup popup;
  public FadeTransitionForPopup (Popup popup){
    this.popup = popup;
  } 


  @Override
  protected void interpolate(double frac) {
    popup.setOpacity(frac)    
  }
}

Implementing custom JavaFx Bindings

Built in Bindings

Probably you know the JavaFx property binding. (If not here is a tutorial). There are several ways to create a binding. The easiest way is to use the bind or bindBidirectional methods of the property you want to bind. For more complex bindings you can use the Bindings class. It provide a lot of special bindings as static methods e.g. ones that calulate number values, concat string properties, bind ObservableLists, ObservableMaps etc., but nothing for BigDecimal...

Here we have certain excamples for that:

Custom implemented Bindings

If the built in bindings do not fit your needs, JavaFx provides base classes, that you can use for custom implemented bindings. You find them in the package javafx.beans.bindings and all their names end with Binding.

There are only two things to do in your subclass of one of the Binding classes:

• Think about on which other properties your new binding is dependand of. Normally this are the properties you calculate your new value of. Use the bind method to add those properties to the dependencies of the new binding in the initializer block (as done in the examples below) or in the constructor. If the value of one of those changes, the binding value is newly calculated.
• Implement the computeValue method, which returns the new value of the binding.

Normally you think of numbers to compute a value. But you can do this with every object, that can be created from other values, if you use the ObjectBinding class. 

Here are several examples for that: