Ejemplosdeanimación

Qué incluye

• Cuatro ejemplos de animación de 480 x 480, organizados como tableros Position, Size, Opacity y Mixed.
• Animación de posición, que mueve un widget de una ubicación a otra con cambios X/Y mediante keyframes.
• Animación de tamaño, que ajusta el ancho y alto del widget con cambios W/H mediante keyframes.
• Animación de opacidad, que cambia la transparencia de mezcla con el tiempo para efectos de desvanecimiento.
• Animación mixta, que combina varias pistas de animación en un solo widget.
• Botones Play Animation, uno por ejemplo, para activar cada línea de tiempo desde la UI.
• Vista previa del editor de línea de tiempo/keyframes, mostrando el modo de animación real con pistas y fotogramas clave.
• Objetivo con logo de PicoPixel, usado como widget animado en cada ejemplo.
• Iconos visuales reutilizables, incluidos gráficos de posición, tamaño, opacidad y animación mixta.
• Recursos de fuente Roboto, usados para títulos de tarjetas, textos secundarios y botones.

Resumen de recursos

El panel de recursos muestra este proyecto como una referencia compacta de animación LVGL:

• Imágenes: 5, incluido el logo de PicoPixel, el logotipo y pequeños iconos conceptuales de animación.
• Colores: 0, con colores aplicados directamente en el diseño.
• Fuentes: 2, Roboto 22 y Roboto Bold 32.
• Widgets: 0, manteniendo el ejemplo centrado en objetos de pantalla, eventos y líneas de tiempo de animación.

Los recursos de imagen visibles incluyen:

• Icono cian de estilo posición/redimensionado de 96x96.
• Icono cian punteado de estilo opacidad de 96x96.
• Imagen del logo PicoPixel de 250x250.
• Imagen del logotipo PicoPixel de 356x100.
• Icono rosa de estilo mixto/posición de 96x96.

Ese conjunto de recursos es intencionalmente pequeño. El movimiento viene de propiedades de objetos LVGL animadas por keyframes, no de almacenar una gran secuencia de fotogramas de imagen.

Estructura de capas

El panel de capas agrupa el proyecto por tipo de animación:

• Position, que contiene Play Pos Animation, Pico Logo, Image 1 y etiquetas.
• Size, que contiene Play Size Animation, Pico Logo, Image 3 y etiquetas.
• Opacity, que contiene Play Opacity Animation, Pico Logo, Image 4 y etiquetas.
• Mixed, que contiene Play Mixed Animation, Pico Logo y etiquetas.

Cada tablero sigue el mismo patrón didáctico: un título y una descripción explican el tipo de animación, un logo de PicoPixel actúa como objetivo animado y un botón azul activa la reproducción.

Línea de tiempo y fotogramas clave

El punto principal de esta plantilla es que las animaciones están controladas por una línea de tiempo. En la vista previa del editor de animación, el lado izquierdo lista tipos como Position, Size, Opacity y Mixed. Luego la línea de tiempo expande el widget animado seleccionado en pistas de propiedades.

Para el ejemplo mixto, la captura muestra:

• Pistas de posición, con valores X e Y separados.
• Pistas de tamaño, con valores W y H separados.
• Pista de opacidad, con un valor %.
• Varios fotogramas clave, colocados en distintos puntos del tiempo.
• Arrastre de la línea de tiempo, para inspeccionar la animación en una marca temporal precisa.

Eso hace que el ejemplo sea más potente que una transición simple. Puedes coreografiar un widget definiendo valores exactos en momentos exactos y previsualizar el resultado antes de exportar.

Animaciones de línea de tiempo vs animaciones por fotogramas

Esta plantilla trata de animaciones de widgets con keyframes: mover, redimensionar y cambiar la opacidad de objetos LVGL con el tiempo. Eso es diferente de una imagen animada basada en frames, donde cada frame es un bitmap separado.

• Usa esta plantilla cuando quieras animar propiedades de un objeto LVGL, como posición, ancho, alto u opacidad.
• Usa una imagen animada LVGL cuando tengas una secuencia de frames prerenderizada, como un spinner, un cargador tipo sprite o un bucle ilustrado.
• Usa el editor de eventos cuando quieras que un botón, carga de pantalla, gesto u otro disparador reproduzca una de estas animaciones.

Ambos enfoques pueden ser útiles. Los keyframes suelen ser mejores para movimiento y transiciones de UI porque mantienen el objeto editable y pueden evitar almacenar muchos frames de imagen.

Por qué funciona bien con LVGL

LVGL es bueno actualizando propiedades de objetos a lo largo del tiempo, y el modo de animación de PicoPixel hace visibles esos valores en vez de ocultarlos en C escrito a mano.

• Los keyframes de posición se asignan a coordenadas de objeto, útiles para paneles, iconos, tarjetas y movimiento de notificaciones.
• Los keyframes de tamaño se asignan a ancho y alto, útiles para controles expansibles, efectos de pulso, énfasis de progreso y estados de foco.
• Los keyframes de opacidad se asignan a transparencia de mezcla, útiles para fades, estados deshabilitados, revelados y señales de atención.
• Las pistas mixtas combinan varias propiedades, para que un widget pueda moverse, redimensionarse y desvanecerse en una sola línea de tiempo.
• Los eventos pueden activar animaciones, así que un clic de botón puede ejecutar la línea de tiempo en la vista previa en vivo y en el proyecto LVGL exportado.
• El proyecto se exporta como código UI LVGL 8.x estándar, integrable en ESP-IDF, Arduino, PlatformIO, STM32, Zephyr u otro build LVGL.

Patrón en tiempo de ejecución

PicoPixel puede generar por ti la configuración de animación y las acciones de reproducción. Si necesitas extender a mano un proyecto exportado, el mismo concepto se traduce al código normal de animación LVGL: inicializar una animación, elegir un objeto objetivo, definir valores y tiempos, y arrancarla.

static void set_opa(void * obj, int32_t value)
{
    lv_obj_set_style_opa((lv_obj_t *)obj, (lv_opa_t)value, 0);
}

static void fade_logo(lv_obj_t * logo)
{
    lv_anim_t a;
    lv_anim_init(&a);
    lv_anim_set_var(&a, logo);
    lv_anim_set_values(&a, LV_OPA_COVER, LV_OPA_30);
    lv_anim_set_time(&a, 450);
    lv_anim_set_exec_cb(&a, set_opa);
    lv_anim_start(&a);
}

Para la mayoría de usuarios de la plantilla, la línea de tiempo visual es el camino más fácil: crear los keyframes en PicoPixel, conectar un botón con la acción de evento Play Animation y exportar.

Personalización

Usa esto como una plantilla gratuita de animación LVGL con keyframes y adapta las líneas de tiempo a tu propia UI.

• Sustituye el logo de PicoPixel por tu propio icono, tarjeta de estado, card, modal o indicador.
• Cambia los keyframes de posición para deslizar un panel, mover una notificación o dirigir la atención a un control.
• Cambia los keyframes de tamaño para construir un pulso, feedback de botón, una tarjeta expandible o un estado de foco.
• Cambia los keyframes de opacidad para mostrar u ocultar contenido gradualmente.
• Combina posición, tamaño y opacidad en el ejemplo mixto para un movimiento de UI más rico.
• Ajusta los tiempos para que la animación se sienta lo bastante rápida para interacciones embebidas.
• Usa eventos como Clicked o Screen Loaded para reproducir animaciones en el momento correcto.
• Mantén tamaños de imagen modestos y elimina recursos sin usar antes de flashear placas con memoria limitada.

Exportar a tu proyecto

Abre la plantilla en PicoPixel, inspecciona la línea de tiempo de animación, renombra los objetos importantes y previsualiza cada tablero con su botón Play Animation. Luego exporta el proyecto como código C LVGL.

Para proyectos ESP32, el flujo habitual es:

1. Elige el tablero que coincide con el movimiento que necesitas: Position, Size, Opacity o Mixed.
2. Sustituye el logo y las etiquetas por tus propios objetos de UI.
3. Ajusta los keyframes, el timing y el easing en la línea de tiempo de animación.
4. Usa el editor de eventos para conectar un disparador con la acción Play Animation.
5. Exporta la UI de PicoPixel como LVGL C.
6. Añade los archivos exportados a tu proyecto ESP-IDF, Arduino o PlatformIO.
7. Llama a ui_init() después de que LVGL y tu driver de pantalla estén listos.

Para más contexto, lee la guía del editor de eventos y la guía sobre cómo usar plantillas PicoPixel.

Mejores usos

Esta plantilla encaja bien cuando quieres un punto de partida claro para:

• Ejemplos de animación LVGL con keyframes
• Prototipos de movimiento UI en ESP32
• Movimiento de widgets controlado por línea de tiempo
• Reproducción de animaciones activada por botones
• Pruebas de animación de posición, tamaño y opacidad
• Estados de carga y feedback de progreso
• Confirmaciones y señales de atención
• Pantallas de onboarding y demos interactivas
• Aprender cómo las líneas de tiempo visuales de PicoPixel se convierten en comportamiento LVGL