Descripción general
El widget de imagen animada es la forma más sencilla de añadir movimiento a tu pantalla: un indicador de carga giratorio, un icono que rebota, un ojo que parpadea. Esta guía explica cómo funciona el widget de imagen animada de LVGL en PicoPixel: cómo añadir uno, por qué todos los fotogramas deben tener el mismo tamaño, cómo controlar la velocidad y el bucle, y cómo iniciarlo y detenerlo mientras tu interfaz está en funcionamiento.
¿Qué es el widget de imagen animada?
Una imagen animada reproduce una secuencia de imágenes estáticas una tras otra, como un flipbook. Cada imagen es un fotograma, y pasarlos rápidamente crea la ilusión de movimiento. Le proporcionas un conjunto de fotogramas, le dices con qué rapidez reproducirlos y si debe hacer bucle, y él hace el resto.
Es perfecto para una única animación repetitiva: un spinner de carga, un corazón pulsante, una mano que saluda. Un widget, una secuencia, reproduciéndose en bucle.
Internamente, este es el widget lv_animimg de LVGL. Cuando exportas tu proyecto, PicoPixel escribe el código LVGL por ti (lv_animimg_create, lv_animimg_set_src, lv_animimg_set_duration, etc.), nunca tienes que tocarlo. Está dirigido a LVGL 8.x.
Imagen animada vs. sprite: ¿cuál debo usar?
Estos dos widgets parecen similares pero resuelven problemas diferentes:
- Imagen animada, una animación que hace bucle. Úsala cuando tu gráfico solo hace una cosa, como un spinner que gira.
- Sprite, varias animaciones en un solo widget, con la capacidad de cambiar entre ellas (Idle, Running, Happy…). Úsalo cuando tu gráfico necesite más de un modo.
De hecho, un sprite está construido a partir de imágenes animadas: cada uno de sus modos es su propia imagen animada internamente. Así que si te encuentras queriendo una segunda animación a la que puedas cambiar, esa es tu señal para usar un sprite en su lugar.
Añadir una imagen animada y subir fotogramas
- Añade el widget Animated Image a tu pantalla.
- En sus propiedades, encuentra la fila Image Set y haz clic en Add Image Set.
- En la pestaña NEW, haz clic en el área de carga («Click to upload frames») y selecciona tus imágenes. Puedes elegir muchas a la vez; los formatos son PNG y JPEG (
.png,.jpeg,.jpg). - Haz clic en Continue para adjuntar los fotogramas al widget. La fila Image Set ahora mostrará cuántos fotogramas tienes (por ejemplo, «8 frames»).
También puedes tomar un conjunto de fotogramas que hayas usado antes desde la pestaña Assets en lugar de volver a subirlos.
Los fotogramas se ordenan alfabéticamente por nombre de archivo, así que nómbralos en secuencia con ceros iniciales: frame_01.png, frame_02.png, frame_03.png, para garantizar que se reproduzcan en el orden correcto. Un nombre como frame_2.png se ordenaría después de frame_10.png, lo que desordenará tu animación.
Una imagen animada necesita al menos 2 fotogramas, y puedes añadir hasta 32. Si necesitas más movimiento, considera usar menos fotogramas bien elegidos — cada fotograma se almacena en el dispositivo.
Por qué todos los fotogramas deben tener el mismo tamaño
Esta es la única regla que debes recordar: todos los fotogramas deben tener exactamente el mismo ancho y alto. Si intentas añadir fotogramas de diferentes tamaños, PicoPixel te detendrá con el mensaje «All frames must have the same dimensions.»
La razón es sencilla. El widget dibuja cada fotograma en el mismo lugar, en la misma caja. Si el fotograma 1 es 64×64 y el fotograma 2 es 80×80, la imagen saltaría y se desplazaría durante la reproducción en lugar de animarse suavemente en su lugar. Mantener todos los fotogramas idénticos en tamaño es lo que hace que el movimiento se vea limpio.
Redimensiona tus fotogramas para que coincidan antes de subirlos. La forma más rápida de obtener una secuencia limpia es exportar cada fotograma desde el mismo lienzo en tu herramienta de imagen, para que tengan garantizadas las mismas dimensiones.
Ajustar la velocidad: duración
La configuración de Duration controla la rapidez con que se reproduce la animación. Se mide en milisegundos (ms) y representa el tiempo para un recorrido completo a través de todos los fotogramas, no el tiempo por fotograma. El valor predeterminado es 1000 ms (un segundo).
PicoPixel divide esa duración de manera uniforme entre tus fotogramas. Así, una duración de 1000 ms repartida entre 8 fotogramas significa que cada fotograma se muestra durante 125 ms. ¿Quieres que vaya más rápido? Reduce la duración. ¿Más lento y relajado? Auméntala.
Bucle: reproducir una vez o correr para siempre
La configuración de Repeat decide qué pasa cuando la animación llega al final. Tienes dos opciones:
- Infinite, la animación hace bucle eternamente. Este es el valor predeterminado, y es lo que quieres para cosas como un spinner que nunca debe detenerse.
- Normal (un conteo), la animación se reproduce un número determinado de veces y luego se detiene. Ponlo en 3 y se ejecutará tres veces, luego se quedará en el último fotograma.
Controlar la reproducción mientras tu interfaz está en funcionamiento
No tienes que dejar que una animación se reproduzca automáticamente: puedes iniciarla y detenerla en respuesta a lo que hace el usuario, usando el editor de eventos. Añade un evento, elige la acción Animated Image Mode, apúntala a tu imagen animada y elige un modo:
- Start, comenzar (o reanudar) la reproducción.
- Stop, pausar la animación.
- Restart, volver al primer fotograma y reproducir de nuevo.
Por ejemplo: mantén un spinner de «conectando...» detenido hasta que se pulse un botón, luego inícialo y deténlo una vez que la tarea finalice.
Mantener la memoria bajo control
Las animaciones son simplemente imágenes, y las imágenes ocupan espacio en un dispositivo pequeño. Algunos hábitos mantienen las cosas eficientes:
- Usa solo los fotogramas que necesitas. El movimiento fluido raramente necesita más que un puñado de fotogramas bien elegidos.
- Mantén las dimensiones de los fotogramas modestas. Una animación de 64×64 es mucho más ligera que una de 240×240.
- Adapta tu profundidad de color a la pantalla (consulta el tutorial de ESP32 para más información sobre cómo construir para hardware real).
Si exportas a firmware, la imagen animada necesita LV_USE_ANIMIMG habilitado en tu lv_conf.h. PicoPixel lo anota por ti en el README.md exportado, para que tu compilación (o tu asistente de IA) sepa exactamente qué activar.
Próximos pasos
- ¿Necesitas más de una animación en un solo widget? Da el paso al widget sprite.
- Conecta tu animación a un botón u otro disparador con el editor de eventos.
- Lleva tu interfaz terminada a un dispositivo con el tutorial LVGL de ESP32.
