Transições de tela no LWUIT

Hoje vamos aprender como fazer aqueles tão atraentes efeitos de transição de tela.

A transição pode ser Out ou In. No modo Out a transição é aplicada na saída do form. E no modo In o efeito de transição é aplicado quando o form está entrando, ou seja sendo mostrado na tela.

Tipos de Transições

Transições Comuns

• Fade: a próxima tela surge de forma transparente sobrepondo a tela anterior.

 NOMEDOFORM.setTransitionOutAnimator(CommonTransitions.createFade(TEMPO));

TEMPO: Tempo de duração da transição, em milissegundos

• Slide: transição estilo de slide. A próxima tela surge pela vertical ou

horizontal.

 NOMEDOFORM.setTransitionOutAnimator(CommonTransitions.createSlide(TIPO, BOOLEAN, TEMPO));

TIPO:
- CommonTransitions.SLIDE_HORIZONTAL
- CommonTransitions.SLIDE_VERTICAL
BOOLEAN:
- true: a tela vem da esquerda para a direita ou de cima para baixo
- false: a tela vem da direita para a esquerda ou de baixo para cima

Transições 3D

• Cube: a transição funciona como um cubo giratório

  NOMEDOFORM.setTransitionOutAnimator(Transition3D.createCube(TEMPO,BOOLEAN));

BOOLEAN:
- true: a tela gira da esquerda para a direita
- false: a tela gira da direita para a esquerda

• 
  
  Rotation: É realizada uma rotação em torno do eixo central da tela

 NOMEDOFORM.setTransitionOutAnimator(Transition3D.createRotation(TEMPO, BOOLEAN));

BOOLEAN:
- true: a tela gira da direita para a esquerda
- false: a tela gira da esquerda para a direita

• 
  
  FlyIn: A nova tela surge do centro e cresce até preencher todo o espaço.

 NOMEDOFORM.setTransitionOutAnimator(Transition3D.createFlyIn(TEMPO));

• 
  
  SwingIn: A próxima tela surge como uma janela balançando.

  NOMEDOFORM.setTransitionOutAnimator(Transition3D.createSwingIn(TEMPO));

ou

  NOMEDOFORM.setTransitionOutAnimator(Transition3D.createSwingIn(TEMPO, BOOLEAN));

BOOLEAN:
-true: a tela está presa em cima e balança em baixo
- false: a tela está presa em baixo e balança em cima


Veja um aplicação de exemplo

import com.sun.lwuit.Command;
import com.sun.lwuit.Display;
import com.sun.lwuit.Form;
import com.sun.lwuit.animations.CommonTransitions;
import com.sun.lwuit.animations.Transition3D;
import com.sun.lwuit.events.ActionEvent;
import com.sun.lwuit.events.ActionListener;
import com.sun.lwuit.plaf.UIManager;
import com.sun.lwuit.util.Resources;
import java.io.IOException;

import javax.microedition.midlet.*;

public class midletPrincipal extends MIDlet implements ActionListener{
 Command troca, voltar;
 Form fPrincipal;
 Form fSecundario;

 public void startApp() {
    Display.init(this);
    // TEMA
    try{
     Resources res = Resources.open("/imagens/javaTheme.res");
     UIManager.getInstance().setThemeProps(res.getTheme(res.getThemeResourceNames()[0]));
    }catch(IOException e){
    }

    fPrincipal = new Form("Transicoes");
    fPrincipal.setTransitionOutAnimator(Transition3D.createCube(500, false));

    troca = new Command("Trocar Tela");
    fPrincipal.setCommandListener(this);
    fPrincipal.addCommand(troca);
    fPrincipal.show();
 }

 public void pauseApp() {
 }

 public void destroyApp(boolean unconditional) {
 }

 public void actionPerformed(ActionEvent e) {
    if(e.getSource() == troca){
       fSecundario = new Form();
       voltar = new Command("Voltar");
       fSecundario.addCommand(voltar);
       fSecundario.setCommandListener(this);
      fSecundario.setTransitionOutAnimator(CommonTransitions.createSlide(CommonTransitions.SLIDE_HORIZONTAL, false, 500));
       fSecundario.show();
    }
    if(e.getSource() == voltar){
       fPrincipal.show();
    }
 }
}

Para baixar o projeto completo clique aqui.