# Animación

> Presets, keyframes y transiciones para cualquier widget. Un componente nativo de Pyzed para GUIs de escritorio en Python, con vista previa, ejemplos y su API.

Source: https://albakore.github.io/pyzed/es/library/animation/

:::tip[En pocas palabras]
Hace que las cosas se muevan: aparecer, deslizarse, rebotar o brillar, sin trabajo extra.
:::

Todo widget tiene `animate()` y `transition()`. `animate` reproduce uno de los 47 presets o una `pz.Animation` cuando el widget aparece, en hover, al pulsar, con foco, al hacer clic o mientras `active`; `transition` anima los cambios de propiedades como CSS. `pz.stagger` hace entrar una lista en cascada y `pz.presence` anima la entrada y salida del contenido cuando cambia. Todo se reproduce de forma nativa, sin llamar a Python en cada fotograma. Ver la [guía de animación](https://albakore.github.io/pyzed/es/animation/).

`pz.Animation` · Categoría: [Contenido](https://albakore.github.io/pyzed/es/library/#contenido) · [Referencia completa →](https://albakore.github.io/pyzed/es/reference/widgets/#animation)

**Código:**

```python
pz.column(pz.stagger([
    ui.card(ui.label(name), width=320).animate("lift", on="hover")
    for name in ("fade_in_up", "lift on hover", "stagger")
], "fade_in_up", step=60), spacing=10)
```

:::note[Nuevo]
Este componente se añadió hace poco. Cuéntanos qué tal te funciona en el [gestor de incidencias](https://github.com/albakore/pyzed/issues).
:::

## Cuándo usarlo

- Para mostrar que algo apareció, cambió o necesita atención: un aviso, una fila nueva, la sacudida de un error.
- Para la respuesta en hover y al pulsar de tarjetas y botones propios.
- Para transiciones entre páginas y pestañas con `pz.presence`.

## Uso

```python
import pyzed as pz
from pyzed import ui

class Inbox(pz.App):
    errors = 0
    page = 0

    def view(self):
        return pz.column([
            ui.input(self.query, self.search).animate("shake", key=self.errors),
            pz.presence(self.page_view(), key=self.page, enter="fade_in_right", exit="fade_out"),
            ui.button("Record", self.record).animate("glow_pulse", active=self.recording),
        ], spacing=12)
```

## Eventos

Animación no tiene eventos propios: muestra lo que le das. Como todo widget, también tiene los **18 eventos comunes** (`click`, `double_click`, `right_click`, `mouse_enter`, `drag`, `key_down`, `resize`…), que se conectan con `.on(...)`: mira [Eventos](https://albakore.github.io/pyzed/es/guides/events/) y [Eventos de cada componente](https://albakore.github.io/pyzed/es/library/events/).

## Consejos

:::tip
Las capturas y `pz.set_reduced_motion(True)` muestran cada animación en reposo, así que los tests son estables. Respeta a quien apaga el movimiento.
:::

## Propiedades y API

### `pz.Animation`

```python
@dataclass
class Animation(keyframes=(), duration=300, delay=0, easing='ease', repeat=1, direction='normal', fill='both', on='mount', category='custom', description='', _frames=())
```

Una animación por keyframes, como una regla CSS `@keyframes` con su timing.

[Referencia completa →](https://albakore.github.io/pyzed/es/reference/widgets/#animation)

### `pz.stagger`

```python
stagger(items, animation='fade_in_up', *, step=40, delay=0, **options)
```

`items` con la misma animación, cada uno empezando `step` milisegundos después del anterior
(una lista que entra en cascada):

[Referencia completa →](https://albakore.github.io/pyzed/es/reference/widgets/#stagger)

### `pz.presence`

```python
presence(
    content,
    key,
    *,
    enter='fade_in',
    exit='fade_out',
    id=None,
    duration=None,
    easing=None,
)
```

Muestra `content` y, cuando cambia `key`, anima la salida del contenido anterior (`exit`)
mientras entra el nuevo (`enter`), como transiciones entre páginas:

[Referencia completa →](https://albakore.github.io/pyzed/es/reference/widgets/#presence)

### `pz.define_animation`

```python
define_animation(name, animation=None, **options)
```

Da nombre a una animación para que `animate(nombre)` la reproduzca; la devuelve.

[Referencia completa →](https://albakore.github.io/pyzed/es/reference/widgets/#define_animation)

### `pz.set_reduced_motion`

```python
set_reduced_motion(on=True)
```

Apaga el movimiento (`True`) o lo vuelve a encender: las animaciones muestran al instante su estado de reposo.

[Referencia completa →](https://albakore.github.io/pyzed/es/reference/widgets/#set_reduced_motion)

## Relacionados

- [Efectos](https://albakore.github.io/pyzed/es/library/effects/): Glow, bloom, glass y opacidad como propiedades de estilo.
- [Tarjeta](https://albakore.github.io/pyzed/es/library/card/): Una superficie con borde, título y acciones opcionales.
- [Notificación](https://albakore.github.io/pyzed/es/library/toast/): Notificaciones apiladas en la esquina inferior derecha.