1. Animations - Part II
Layout animations are some of the most important yet easy to use animations in Codename One. They make the application flow feel reactive and responsive.
6. CheckoutForm
quantityButton.addActionListener(e -> {
String sel = quantityButton.getSelectedString();
if(sel == null) {
return;
}
if(sel.equals(PICKER_STRINGS[0])) {
Display.getInstance().callSerially(() -> {
dishContainer.setX(getDisplayWidth());
Container p = dishContainer.getParent();
p.animateUnlayoutAndWait(250, 255);
dishContainer.remove();
p.animateLayoutAndWait(200);
Restaurant.getInstance().cart.get().
dishQuantity.remove(di);
updatePrice();
});
} else {
This entire animation is done in 5 lines of code. Lets go over them one by one. First we set the deleted dish container to the display width which pushes it out of the
visible range with a setX call.
7. CheckoutForm
quantityButton.addActionListener(e -> {
String sel = quantityButton.getSelectedString();
if(sel == null) {
return;
}
if(sel.equals(PICKER_STRINGS[0])) {
Display.getInstance().callSerially(() -> {
dishContainer.setX(getDisplayWidth());
Container p = dishContainer.getParent();
p.animateUnlayoutAndWait(250, 255);
dishContainer.remove();
p.animateLayoutAndWait(200);
Restaurant.getInstance().cart.get().
dishQuantity.remove(di);
updatePrice();
});
} else {
We now perform animate unlayout and wait. We maintain full opacity which corresponds to the second argument. This animates the removal of the dish from the screen
by sliding it to the right.
8. CheckoutForm
quantityButton.addActionListener(e -> {
String sel = quantityButton.getSelectedString();
if(sel == null) {
return;
}
if(sel.equals(PICKER_STRINGS[0])) {
Display.getInstance().callSerially(() -> {
dishContainer.setX(getDisplayWidth());
Container p = dishContainer.getParent();
p.animateUnlayoutAndWait(250, 255);
dishContainer.remove();
p.animateLayoutAndWait(200);
Restaurant.getInstance().cart.get().
dishQuantity.remove(di);
updatePrice();
});
} else {
We next remove the component that we animated out. This is important as we are currently in an invalid state but the component is still in the hierarchy.
9. CheckoutForm
quantityButton.addActionListener(e -> {
String sel = quantityButton.getSelectedString();
if(sel == null) {
return;
}
if(sel.equals(PICKER_STRINGS[0])) {
Display.getInstance().callSerially(() -> {
dishContainer.setX(getDisplayWidth());
Container p = dishContainer.getParent();
p.animateUnlayoutAndWait(250, 255);
dishContainer.remove();
p.animateLayoutAndWait(200);
Restaurant.getInstance().cart.get().
dishQuantity.remove(di);
updatePrice();
});
} else {
Now we can animate the other element into their new place, since the dish was removed there is more available space and we can use it by shifting everything into the
new location