Animación

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.

pz.Animation · Categoría: Contenido · Referencia completa →

Vista previa
Código

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)

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

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 y Eventos de cada componente.

Consejos

Propiedades y API

`pz.Animation`

@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 →

`pz.stagger`

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 →

`pz.presence`

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 →

`pz.define_animation`

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

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

Referencia completa →

`pz.set_reduced_motion`

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 →

Relacionados

EfectosGlow, bloom, glass y opacidad como propiedades de estilo.

TarjetaUna superficie con borde, título y acciones opcionales.

NotificaciónNotificaciones apiladas en la esquina inferior derecha.