Is it possible to use transitions on glisten layers? - gluon

Question

I created a custom layer, according to this material:
http://docs.gluonhq.com/charm/2.1.1/#_creating_a_layer, and added it to my application:
MobileApplication.getInstance().addLayerFactory(LAYER_NAME, () -> customLayer);
Now I would like to add a transition to this layer. You can use transitions on View like: view.setShowTransitionFactory(BounceInDownTransition:new)
Layer doesn't provide a method like that. So I tried this approach to apply a transition:
private void showLayer() {
MobileApplication.getInstance().showLayer(LAYER_NAME);
new BounceInDownTransition(customLayer).play();
}
When I call showLayer() for the first time the transition appears to be incomplete. The first part, where the layer should get transitioned out of view, is missing. Each further invocation of showLayer() shows the complete transition.
Are layers meant to be used in conjuction with transitions at all?
If possible what is the recommended way?

Answer 1

You can use the built-in transitions in Gluon Charm, since all you need is pass a node to them, and call play to start the animation.
In case of the Gluon's Layers, there's no built-in mechanism as for Views, but you can easily add it to your class.
This will create a bounce-in effect for showing and bounce-out effect for hiding.
public class MyLayer extends Layer {
private final Node root;
private final double size = 150;
public MyLayer() {
final BounceInDownTransition transitionIn = new BounceInDownTransition(this, true);
final BounceOutDownTransition transitionOut = new BounceOutDownTransition(this, true);
transitionOut.setOnFinished(e -> hide());
Button button = new Button("", MaterialDesignIcon.CLOSE.graphic());
button.setOnAction(e -> transitionOut.playFromStart());
root = new StackPane(button);
root.setStyle("-fx-background-color: white;");
getChildren().add(root);
getGlassPane().getLayers().add(this);
showingProperty().addListener((obs, ov, nv) -> {
if (nv) {
layoutChildren();
setOpacity(0);
transitionIn.playFromStart();
}
});
}
#Override
public void show() {
getGlassPane().setBackgroundFade(GlassPane.DEFAULT_BACKGROUND_FADE_LEVEL);
super.show();
}
#Override
public void hide() {
getGlassPane().setBackgroundFade(0.0);
super.hide();
}
#Override
public void layoutChildren() {
root.setVisible(isShowing());
if (!isShowing()) {
return;
}
root.resize(size, size);
resizeRelocate((getGlassPane().getWidth() - size)/2, (getGlassPane().getHeight()- size)/2, size, size);
}
}
And now, add the layer:
#Override
public void init() {
addViewFactory(BASIC_VIEW, () -> new BasicView(BASIC_VIEW));
addLayerFactory("My Layer", () -> new MyLayer());
}