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 fotogramas clave.
• Animación de tamaño, que ajusta el ancho y alto del widget con cambios W/H mediante fotogramas clave.
• Animación de opacidad, que cambia la transparencia 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 interfaz.
• Vista previa del editor de animaciones, mostrando el modo de animación real con pistas y fotogramas clave.
• Logotipo de PicoPixel animado, 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 posición y tamaño de 96x96.
• Icono cian punteado que representa la opacidad de 96x96.
• Imagen del logo PicoPixel de 250x250.
• Imagen del logotipo PicoPixel de 356x100.
• Icono rosa de animación mixta de 96x96.

El proyecto necesita pocos recursos porque el movimiento se consigue modificando propiedades de los objetos LVGL. No hace falta guardar una imagen para cada fotograma de la animación.

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 es el elemento que se anima y un botón azul activa la reproducción.

Línea de tiempo y fotogramas clave

Las animaciones de esta plantilla se controlan desde una línea de tiempo. A la izquierda del editor verás los ejemplos Position, Size, Opacity y Mixed. Al seleccionar un widget animado, la línea de tiempo muestra las pistas de sus 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.
• Desplazamiento del cabezal de reproducción, para ver la animación en un instante concreto.

Puedes coordinar varios cambios en el mismo widget: define el valor de cada propiedad en cada instante y previsualiza el resultado antes de exportar.

Animaciones de línea de tiempo vs animaciones por fotogramas

Esta plantilla trata de animaciones de widgets con fotogramas clave: mover, redimensionar y cambiar la opacidad de objetos LVGL con el tiempo. Eso es diferente de una imagen animada basada en fotogramas, donde cada fotograma es un mapa de bits 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 fotogramas prerenderizada, como un indicador de carga giratorio, un 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 fotogramas clave suelen ser mejores para movimiento y transiciones de interfaz porque mantienen el objeto editable y pueden evitar almacenar muchos fotogramas de imagen.

Por qué funciona bien con LVGL

LVGL permite modificar las propiedades de los objetos a lo largo del tiempo. El modo de animación de PicoPixel te permite ajustar esos valores visualmente, sin escribir el código C a mano.

• Los fotogramas clave de posición se asignan a coordenadas de objeto, útiles para paneles, iconos, tarjetas y movimiento de notificaciones.
• Los fotogramas clave de tamaño se asignan a ancho y alto, útiles para controles expansibles, efectos de pulso, énfasis de progreso y estados de foco.
• Los fotogramas clave de opacidad se asignan a transparencia, útiles para desvanecimientos, 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 estándar de interfaz para LVGL 8.x, integrable en ESP-IDF, Arduino, PlatformIO, STM32, Zephyr u otro proyecto 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 la opción más sencilla: crea los fotogramas clave en PicoPixel, conecta un botón a la acción Play Animation y exporta.

Personalización

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

• Sustituye el logo de PicoPixel por tu propio icono, tarjeta de estado, panel, ventana modal o indicador.
• Cambia los fotogramas clave de posición para deslizar un panel, mover una notificación o dirigir la atención a un control.
• Cambia los fotogramas clave de tamaño para construir un pulso, respuesta visual de botón, una tarjeta expandible o un estado de foco.
• Cambia los fotogramas clave de opacidad para mostrar u ocultar contenido gradualmente.
• Combina posición, tamaño y opacidad en el ejemplo mixto para un movimiento de interfaz 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 de 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 interfaz.
3. Ajusta los fotogramas clave, el tiempo y la curva de aceleración 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 interfaz de PicoPixel como código C de LVGL.
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 controlador 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 fotogramas clave
• Prototipos de animación de interfaces 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 respuesta visual de progreso
• Confirmaciones y señales de atención
• Pantallas de bienvenida y demos interactivas
• Aprendizaje de cómo las líneas de tiempo visuales de PicoPixel se convierten en comportamiento LVGL