Pular para o conteúdo
CrossFly é 100% open sourceSiga no GitHub
CrossFlyCrossFly
Começar

Transições de tela

Ao show()/hide() de uma janela, o CrossFly pode animar a troca capturando a tela antes e depois e interpolando entre elas. Você declara o efeito no WindowStyle; o framework dispara a transição sozinho.

Exemplo completo (copiar, colar e rodar)

package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;

/** Tela principal executável. Aponte o launcher (classname) e rode: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      // Declare a transição ANTES de montar a UI (o "antes" é capturado no primeiro paint).
      // getStyle() infere WindowStyle aqui, onde transition(...) está definido.
      getStyle().transition(UIConstants.Transition.SLIDE_LEFT, 0.4f);   // efeito + duração (s)

      setLayout(new VerticalLayout());
      Label titulo = new Label("Nova tela");
      add(LAY_AUTO, titulo);

      Button avancar = new Button("Avançar");
      add(LAY_AUTO, avancar);
      // Ao empilhar outra janela com transição SLIDE_LEFT, o framework anima a troca sozinho:
      avancar.onAction(c -> new MainWindow().show());
   }
}

Os trechos abaixo mostram só o miolo (o que vai dentro de onShow()). Para rodar, coloque-os no esqueleto MainWindow acima.

O jeito declarativo (recomendado)

Defina o efeito no estilo da janela — em onShow(), antes de nada aparecer:

@Override public void onShow() throws Exception {
   super.onShow();
   getStyle().transition(UIConstants.Transition.SLIDE_LEFT, 0.4f);  // efeito + duração (s)
   // … monta a UI …
}

Ou pelos campos/fluentes do WindowStyle:

getStyle().transition = UIConstants.Transition.FADE;   // campo público
getStyle().transitionDuration = 0.3f;
// equivalente fluente:
getStyle().transition(UIConstants.Transition.FADE).transitionDuration(0.3f);

Efeitos disponíveis (UIConstants.Transition)

Valor Efeito
NONE troca instantânea (padrão)
FADE esmaece uma tela sobre a outra
SLIDE_LEFT / SLIDE_RIGHT desliza no eixo horizontal
SLIDE_UP / SLIDE_DOWN desliza no eixo vertical
SCALE nova tela cresce a partir do centro
SCALE_DOWN tela atual encolhe para o centro

Padrões: WindowStyle.transition inicia em NONE e transitionDuration em 0.5s. Pickers já usam FADE por padrão.

Como funciona por baixo

ScreenTransition.begin(Transition, duration) captura a tela atual como “antes”, a nova como “depois” no próximo frame e interpola (usando um AlphaAnimation interno). Você não costuma chamar isso — o Window.show()/hide() chama quando há transition != NONE.

Boas práticas

  • Escolha o efeito pela intenção de navegação: SLIDE_LEFT para avançar, SLIDE_RIGHT/SCALE_DOWN para voltar.
  • Mantenha durações curtas (0,25–0,4s) — transições longas atrapalham.
  • Defina a transição em onShow() (antes de a janela ser pintada).

Erros comuns

  • Definir a transição tarde demais (depois do primeiro paint) — o “antes” já mudou.
  • Durações longas que deixam a navegação lenta.

Veja também

Esta página foi útil?