Animación

Cualquier widget de Pyzed puede moverse, aparecer, crecer, girar, desenfocarse, brillar o cambiar de color. Esta sección explica cada parte del sistema de animación, con un ejemplo animado de cada una.

pz.text("Hola de nuevo").animate("fade_in_down")                 # al aparecer
pz.row(pz.stagger(tarjetas, "fade_in_up", step=80))              # una tras otra
insignia.animate("pulse", repeat="infinite")                     # sin parar
ui.button("Grabando", self.parar).animate("glow_pulse")          # un brillo en bucle
pz.icon("loader-circle").animate("spin")                         # un indicador de carga

Empieza aquí

¿Primera vez con animaciones? Empieza aquí: aplicar y reproducir muestra dónde va .animate(), todas las formas de iniciar una animación (al aparecer un widget, con el puntero, desde tu código con pz.Trigger, desde una línea de tiempo) y cómo se hace lo mismo en Pyzed Design.

Tres formas de animar

Elige la que encaje con lo que quieres hacer. Funcionan juntas, así que una app suele usar las tres.

Quieres…	Usa	Página
Darle a un widget su propio movimiento: aparecer, reaccionar al puntero, llamar la atención, repetirse.	widget.animate(...)	animate() y disparadores
Mover un widget con suavidad cada vez que cambia uno de sus valores (abrir un panel, seleccionar una fila).	widget.transition(...) y estados de estilo	Transiciones y estados
Reproducir una escena en la que cambian a la vez muchos widgets y valores de tu app, con reproducir, pausar y buscar.	pz.AnimationPlayer y pz.Clip	Animaciones con línea de tiempo

Y en Pyzed Design puedes hacer lo mismo sin código: una sección Animación en cada control y un panel Animation con una línea de tiempo para los clips.

Cómo se reproduce

Python describe una animación una vez, en view(). La parte de Rust la reproduce a la frecuencia de la pantalla, así que una animación en marcha nunca llama a tu código y no ralentiza tu app. Cuando algo cambia (un clic, datos nuevos), view() se vuelve a ejecutar como siempre; las animaciones que no cambiaron siguen donde estaban.

• Los presets son animaciones listas con un nombre ("fade_in_up", "lift", "spin"). Mira la galería de presets.
• Los keyframes describen tu propia animación paso a paso, como @keyframes en CSS. Mira Keyframes y curvas.
• Las propiedades son lo que una animación puede cambiar: posición, tamaño, rotación, colores, desenfoque, brillo… Mira Propiedades animables.
• Los efectos como glass, bloom y glow son propiedades de estilo que las animaciones también pueden cambiar. Mira Efectos.

Pruébalas

Ejecuta examples/animations.py para las animaciones de widgets y examples/timeline.py para una línea de tiempo. Los dos son cortos y están comentados.

En esta sección

Página	Qué explica
Empieza aquí: aplicar y reproducir	Dónde va .animate(), qué inicia una animación, cómo se nombran y se personalizan, en cada estilo de código y en el editor.
animate() y disparadores	Qué reproduce una animación (aparecer, hover, press, focus, clic, un indicador, un pz.Trigger) y sus opciones de tiempo.
Propiedades animables	Todas las propiedades que puede cambiar una animación y cómo funcionan los valores.
Keyframes y curvas	Tus propias animaciones con pz.Animation y las curvas que dan forma al movimiento.
Transiciones y estados	transition(), estilos de hover y pressed, cambios de página con presence, listas con stagger y transiciones de ventana.
Galería de presets	Todas las animaciones con nombre, en movimiento.
Efectos	Glass, glow, bloom, desenfoque, rotación y opacidad.
Animaciones con línea de tiempo	Clips, pistas, keys, bucles y llamadas a métodos en una línea de tiempo.
El reproductor de animaciones	Reproducir, pausar, buscar y encolar clips, y guardarlos en archivos .pzanim.
Movimiento reducido, tests y límites	Respetar “reducir movimiento”, probar vistas animadas y lo que el sistema no puede hacer.