# Transiciones de pantalla

> Animar el cambio de ventana (fade/slide/scale) declarando WindowStyle.transition.

Source: https://crossfly.dev/es/docs/ui/animations/screen-transitions — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# Transiciones de pantalla

Al `show()`/`hide()` de una ventana, CrossFly puede animar el cambio capturando la pantalla **antes** y
**después** e interpolando entre ellas. Tú **declaras** el efecto en el `WindowStyle`; el framework dispara
la transición solo.

## Ejemplo completo (copiar, pegar y ejecutar)
```java
package com.exemplo;

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

/** Pantalla principal ejecutable. Apunta el launcher (classname) y corre: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      // Declara la transición ANTES de montar la UI (el "antes" se captura en el primer paint).
      // getStyle() infiere WindowStyle aquí, donde transition(...) está definido.
      getStyle().transition(UIConstants.Transition.SLIDE_LEFT, 0.4f);   // efecto + duración (s)

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

      Button avancar = new Button("Avançar");
      add(LAY_AUTO, avancar);
      // Al apilar otra ventana con transición SLIDE_LEFT, el framework anima el cambio solo:
      avancar.onAction(c -> new MainWindow().show());
   }
}
```
> Los fragmentos siguientes muestran **solo el núcleo** (lo que va dentro de `onShow()`). Para ejecutar, colócalos en el esqueleto `MainWindow` de arriba.

## La forma declarativa (recomendada)
Define el efecto en el estilo de la ventana — en `onShow()`, antes de que aparezca nada:
```java
@Override public void onShow() throws Exception {
   super.onShow();
   getStyle().transition(UIConstants.Transition.SLIDE_LEFT, 0.4f);  // efecto + duración (s)
   // … monta la UI …
}
```
O por los campos/fluidos del `WindowStyle`:
```java
getStyle().transition = UIConstants.Transition.FADE;   // campo público
getStyle().transitionDuration = 0.3f;
// equivalente fluido:
getStyle().transition(UIConstants.Transition.FADE).transitionDuration(0.3f);
```

## Efectos disponibles (`UIConstants.Transition`)
| Valor | Efecto |
|---|---|
| `NONE` | cambio instantáneo (predeterminado) |
| `FADE` | atenúa una pantalla sobre la otra |
| `SLIDE_LEFT` / `SLIDE_RIGHT` | desliza en el eje horizontal |
| `SLIDE_UP` / `SLIDE_DOWN` | desliza en el eje vertical |
| `SCALE` | la nueva pantalla crece desde el centro |
| `SCALE_DOWN` | la pantalla actual se encoge hacia el centro |

> Predeterminados: `WindowStyle.transition` empieza en `NONE` y `transitionDuration` en `0.5s`. **Los pickers** ya
> usan `FADE` por defecto.

## Cómo funciona por debajo
`ScreenTransition.begin(Transition, duration)` captura la pantalla actual como "antes", la nueva como
"después" en el siguiente frame e interpola (usando un `AlphaAnimation` interno). **No** sueles
llamar esto — el `Window.show()`/`hide()` lo llama cuando hay `transition != NONE`.

## Buenas prácticas
- Elige el efecto según la **intención de navegación**: `SLIDE_LEFT` para avanzar, `SLIDE_RIGHT`/`SCALE_DOWN`
  para volver.
- Mantén las duraciones cortas (0,25–0,4s) — las transiciones largas estorban.
- Define la transición en `onShow()` (antes de que la ventana sea pintada).

## Errores comunes
- Definir la transición demasiado tarde (después del primer paint) — el "antes" ya cambió.
- Duraciones largas que hacen la navegación lenta.

## Véase también
- [Animaciones de valor](/docs/ui/animations/value-animations) · [La pila de ventanas](/docs/ui/navigation/the-window-stack)