Animation

Animations can be used to make the GUI more appealing and more lively.

MWT provides a framework to create fluid animations. The principle is as follow:

  • make a step of all the running animations (with a probable new rendering of some widgets),
  • wait for the display to be flushed,
  • do it again.

The goals are:

  • doing animations as fast as possible (considering the complexity of the drawings and the hardware capabilities),
  • synchronizing all the running animations and avoiding glitches.

Usage

  • An animation can be created by implemeting Animation interface and its tick() method.

  • The tick() method is called for each step of the animation.

  • Every time the method is called, the widget should be re-rendered.

  • The animation can be stopped by returning false.

    Animation labelAnimation = new Animation() {
    
       int tick = 0;
    
       @Override
       public boolean tick(long currentTimeMillis) {
          label.setText(Integer.toString(tick++));
          label.requestRender();
          return true;
       }
    };
    Animator animator = new Animator();
    animator.startAnimation(labelAnimation);
    
  • The code above updates the label text everytime it is called:

    ../../_images/ticking.png
  • The final code looks like this:

    public static void main(String[] args) {
       MicroUI.start();
       Desktop desktop = new Desktop();
       final Label label = new Label("hello");
    
       Flow flow = new Flow(LayoutOrientation.VERTICAL);
       flow.addChild(label);
    
       Animation labelAnimation = new Animation() {
    
          int tick = 0;
    
          @Override
          public boolean tick(long currentTimeMillis) {
             label.setText(Integer.toString(this.tick++));
             label.requestRender();
             return true;
          }
       };
       Animator animator = new Animator();
       animator.startAnimation(labelAnimation);
    
       desktop.setWidget(flow);
       desktop.requestShow();
    }