This is a part of an online Codename One course published around 2017 see it all for free at https://debugagent.com/series/cn1

1. Animations - Part I

2. Animations
© Codename One 2017 all rights reserved
✦Animations are here to signify & draw attention. Not just
for frivolous appearance there are 2 common purposes
✦Draw attention
✦Confirm
✦Codename One has multiple types of animations and
each use case is served by a different type

3. Transitions
© Codename One 2017 all rights reserved
✦The first animation you will probably notice. Moves
between forms or replaces one component with another
✦The easiest one to use…
✦Builtin implementations include: CommonTransition,
FlipTransition, MorphTransition & BubbleTransition
✦Common transitions include: Slide, cover/uncover, fade,
slide-fade title, timeline & dialog pulsate
✦Default transitions can be defined globally in the look
and feel class or thru the theme constants

4. Transition direction, In & Out
© Codename One 2017 all rights reserved
✦Transitions have a transition in & out
✦For dialogs in is shown when showing and out when
dismissing
✦For forms out is usually used by convention, using
transition-in makes sense in some edge cases
✦Some transitions have navigational direction which is
why we have show() and showBack() where the
direction is flipped

5. © Codename One 2017 all rights reserved

6. © Codename One 2017 all rights reserved

7. CheckoutForm
public static void showCheckOut() {
Form existingForm = Display.getInstance().getCurrent();
CheckoutForm f = new CheckoutForm(existingForm);
f.oldTransition = existingForm.getTransitionOutAnimator();
Image background = Image.createImage(existingForm.getWidth(),
existingForm.getHeight());
Graphics g = background.getGraphics();
existingForm.paintComponent(g, true);
g.setAlpha(150);
g.setColor(0);
g.fillRect(0, 0, background.getWidth(), background.getHeight());
background = Display.getInstance().gaussianBlurImage(background, 10);
f.getUnselectedStyle().setBgImage(background);
f.getUnselectedStyle().setBackgroundType(BACKGROUND_IMAGE_SCALED_FILL);
f.setTransitionOutAnimator(CommonTransitions.createUncover(
CommonTransitions.SLIDE_VERTICAL, true, 200));
existingForm.setTransitionOutAnimator(CommonTransitions.createCover(
CommonTransitions.SLIDE_VERTICAL, false, 200));
f.show();
}

8. CheckoutForm
public static void showCheckOut() {
Form existingForm = Display.getInstance().getCurrent();
CheckoutForm f = new CheckoutForm(existingForm);
f.oldTransition = existingForm.getTransitionOutAnimator();
Image background = Image.createImage(existingForm.getWidth(),
existingForm.getHeight());
Graphics g = background.getGraphics();
existingForm.paintComponent(g, true);
g.setAlpha(150);
g.setColor(0);
g.fillRect(0, 0, background.getWidth(), background.getHeight());
background = Display.getInstance().gaussianBlurImage(background, 10);
f.getUnselectedStyle().setBgImage(background);
f.getUnselectedStyle().setBackgroundType(BACKGROUND_IMAGE_SCALED_FILL);
f.setTransitionOutAnimator(CommonTransitions.createUncover(
CommonTransitions.SLIDE_VERTICAL, true, 200));
existingForm.setTransitionOutAnimator(CommonTransitions.createCover(
CommonTransitions.SLIDE_VERTICAL, false, 200));
f.show();
}

9. CheckoutForm
private CheckoutForm(Form previous) {
super(new BorderLayout());
Button x = new Button("", "Title");
FontImage.setMaterialIcon(x, FontImage.MATERIAL_CLOSE);
x.addActionListener(e -> {
previous.showBack();
previous.setTransitionOutAnimator(oldTransition);
});

10. MainMenuForm
private Container createDishContainer(Dish dish) {
TextArea ta = new TextArea(dish.description.get(), 3, 80);
ta.setEditable(false);
ta.setFocusable(false);
ta.setGrowByContent(false);
ta.setUIID("DishListBody");
Button order = new Button("Order " + Restaurant.getInstance().
formatCurrency(dish.price.get()), "AddToOrderButton");
Button moreInfo = new Button("More Info", "MoreInfoButton");
moreInfo.addActionListener(e -> {
DishViewForm dvf = new DishViewForm(dish);
MorphTransition mt = MorphTransition.create(400);
mt.morph("thumb" + dish.id.get(), "backgroundImage");
Transition original = getTransitionOutAnimator();
setTransitionOutAnimator(mt);
CommonTransitions uncover = CommonTransitions.createUncover(
CommonTransitions.SLIDE_VERTICAL, true, 350);
dvf.setTransitionOutAnimator(uncover);
dvf.addShowListener(ee -> setTransitionOutAnimator(original));
dvf.show();
});