AGIF/APNG+LVGL(V9) Animation Example

Source Code Path: example/multimedia/agif/lvgl_v9

Supported Platforms

eh-lb525

Overview

This example contains two watch faces with GIF animations and one watch face with APNG animation, demonstrating animation implementation based on agif/apng + lvgl(V9), including:

.gif conversion to .c using eZIP.exe:
- Placement location: src/resource/images/common/gif/
- Resource processing: src/resource/images/SConscript will compile .gif files in the above path. The generated .c files can be found in project/build_xxx/src/resource/images/common/gif path.
Tip

Resources can also be processed manually using /tools/png2ezip/eZIP.exe. Run eZIP.exe to view help for command format.

gif display

src/gui_apps/clock/app_clock_agif.c:

Resource declaration:

/* Image decalration */
LV_IMG_DECLARE(agif_icon);

gif widget creation and configuration:

/* Create agif. */
lv_color_t bg_color;
p_clk_agif->gif = lv_gif_dec_create(parent, LV_EXT_IMG_GET(agif_icon), &bg_color, LV_COLOR_DEPTH);
RT_ASSERT(p_clk_agif->gif);
lv_obj_align(p_clk_agif->gif, LV_ALIGN_CENTER, 0, 0);

/* loop is enabled by default. */
lv_gif_dec_loop(p_clk_agif->gif, 1, 16);
/* This callback function is executed at the end of GIF playback. */
lv_gif_dec_end_cb_register(p_clk_agif->gif, agif_loop_end_func);

gif refresh pause and resume:

static rt_int32_t resume_callback(void)
{
    /* Resume gif animation refresh */
    lv_gif_dec_task_resume(p_clk_agif->gif);
    return RT_EOK;
}

static rt_int32_t pause_callback(void)
{
    /* Pause gif animation refresh */
    lv_gif_dec_task_pause(p_clk_agif->gif, 0);
    return RT_EOK;
}

gif destruction

/* Release gif context. */
lv_gif_dec_destroy(p_clk_agif->gif);
p_clk_agif->gif = NULL;

src/gui_apps/clock/app_clock_agif_2.c:
lv_gif_dec_create automatically creates an lv timer for periodic GIF refreshing. This example demonstrates pausing (lv_gif_dec_task_pause) the automatically created lv timer and creating an external lv timer for refreshing. The refresh code is as follows:

static void agif_refresh_timer_cb(struct _lv_timer_t * t)
{
    /* Next frame. */
    int ret = lv_gif_dec_next_frame(p_clk_agif->gif);

    /* if ret == 0, it means that reach the last frame. */
    if (0 == ret)
    {
        /* Playback complete. */
        agif_loop_end_func();
        /* Replay it. */
        lv_gif_dec_restart(p_clk_agif->gif);
    }
}

apng resource??o
- Same as PNG, placed in: src/resource/images/common/ezip/
- APNG image production: can be made online:https://ezgif.com/

apng display??o

src/gui_apps/clock/app_clock_apng.c:

Resource declaration??o

/* Image decalration */
LV_IMG_DECLARE(apng_dice);

apng widget creation and configuration??o

/* Create apng. */
lv_obj_t *dice_img = lv_ezipa_create(parent);
RT_ASSERT(dice_img);
/* Set image source */
lv_ezipa_set_src(dice_img, apng_dice.data);
/* Set surface */
// lv_ezipa_set_surface(dice_img, xxx);
/* Set interval */
lv_ezipa_set_interval(dice_img, 60);

apng refresh pause and resume??o

static rt_int32_t resume_callback(void)
{
    /* Resume apng animation refresh */
    lv_ezipa_resume(p_clk_apng->apng);
    return RT_EOK;
}

static rt_int32_t pause_callback(void)
{
    /* Pause apng animation refresh */
    lv_ezipa_pause(p_clk_apng->apng);
    return RT_EOK;
}

Example Usage

Hardware Requirements

Running this example requires:

A development board supported by this example (Supported Platforms).

menuconfig Configuration

Enable LVGL:
Enable EPIC/EZIP:
Enable USING_EZIPA_DEC (If apng is used.)??o
Configure the LCD driver according to the LCD used.

Compilation and Flashing

Switch to the example project directory and run the scons command to compile:

> scons --board=eh-lb525 -j32

Switch to the example project/build_xx directory and run uart_download.bat, then select the port as prompted to download:

$ ./uart_download.bat

     Uart Download

please input the serial port num:5

For detailed compilation and download steps, please refer to the relevant introduction in Quick Start.

Expected Results

After the example starts:

Defaults to the agif watch face, with agif_icon.gif refreshing and displaying in a loop.
Swipe left and right to switch between aigf \ agif02 \ apng watch faces.
agif.h \ lvsf_ezipa.h also provides some other control APIs that can be modified in the example to see the effects.

Troubleshooting

Compilation error, gif resource not found: As described in Overview, confirm whether the .c file of the gif is generated normally.

Reference Documents

Update History

Version	Date	Release Notes
0.0.1	05/2025	Initial version