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 esqueletoMainWindowacima.
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.transitioninicia emNONEetransitionDurationem0.5s. Pickers já usamFADEpor 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_LEFTpara avançar,SLIDE_RIGHT/SCALE_DOWNpara 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.