🎞️ Animated Image
The Animated Image widget (animimg) is designed for high-performance frame-by-frame animations on embedded hardware. Unlike video files, it cycles through a sequence of static images at a defined interval, making it ideal for loading spinners, status indicators, or UI transitions.
⚙️ Properties (Props)
These properties map to the AnimImgData interface and control the playback logic within the Artok engine.
| Property | Type | Description |
|---|---|---|
| Image Sequence | string[] | An ordered list of imageId assets that make up the frames. |
| Duration (ms) | number | The total time to complete one full cycle of all frames. |
| Repeat Count | number | How many times the sequence plays (use 0 for infinite loop). |
🎨 Animation Logic
The engine calculates the frame rate based on the number of images in your sequence and the total duration. To ensure smooth playback:
- Uniform Sizing: All frames in the
imageSequenceshould have identical dimensions to prevent jitter. - Asset Packing: Frames are stored as pre-compiled bitmaps. Use the Asset Packer to manage large sequences efficiently.
- Performance: On low-power MCUs, keep the frame count reasonable to minimize Flash memory usage and SPI bus traffic.
⚡ Runtime API (Lua)
You can trigger and control animations dynamically using the internal state methods.
-- Start the animation from the first frame
anim_loader:start()
-- Pause the animation at its current frame
anim_loader:stop()
-- Dynamically adjust playback speed
-- Lower duration = faster animation
anim_loader:set_duration(300)
AI WORKFLOW
Need a custom animation? Use AI Inspiration to describe an effect, and the Studio can suggest frame assets or generate a sequence for you.
🚀 Next Steps
- Static Image — Use this for single-frame icons or backgrounds.
- Asset Packer — How to batch-import your animation frames.
- Logic and Events — Triggering animations via system flags.