[FEATURE REQUEST] Set Image src prop in animation

[JohnGoewert]

I would like to be able to set the src of an image as part of the animation. I believe there might be an alternate way to do this by setting a property and then using that to show or hide different images, but this would be convenient.

<animation prop="src" target="iconimage" start="$iconactive" end="$iconinactive" duration="500" />

[laszlobalint]

@JohnGoewert
To animate image sources in LVGL, the built-in and recommended approach is to use the Animation Image (lv_animimg) widget [Animation Image].

Using lv_animimg (Built-in Image Animation)The lv_animimg widget internally manages an animation and changes the image source (src) across an array of image descriptors across frames [Animation Image; lv_animimage.c].

Example derived directly from the documentation [Three-frame animated image]:

LV_IMAGE_DECLARE(animimg001);
LV_IMAGE_DECLARE(animimg002);
LV_IMAGE_DECLARE(animimg003);

static const lv_image_dsc_t * anim_imgs[3] = {
    &animimg001,
    &animimg002,
    &animimg003,
};

void lv_example_animimg_play(void)
{
    lv_obj_t * animimg0 = lv_animimg_create(lv_screen_active());
    lv_obj_center(animimg0);
    
    /* Set image sources array */
    lv_animimg_set_src(animimg0, (const void **) anim_imgs, 3);
    
    /* Set animation duration and repeat count */
    lv_animimg_set_duration(animimg0, 1000);
    lv_animimg_set_repeat_count(animimg0, LV_ANIM_REPEAT_INFINITE);
    
    /* Start the animation */
    lv_animimg_start(animimg0);
}

[JohnGoewert]

That widget exists and it is not currently documented for LVGL Pro - https://lvgl.io/docs/pro/built_in_widgets

There is an animation that can change an image because lv_animimg widget does it - https://lvgl.io/docs/open/api/public/widgets/lv_animimage_h#lv_animimg_get_anim

LVGL Pro just can't create one the same way.

The lv_animimg widget only goes through a count of images, not a selector of images. It can't do something like this.

Toggle:

<animation prop="src" target="iconimage" start="$iconactive" end="$iconinactive" duration="500" />

Toggle Back:

<animation prop="src" target="iconimage" start="$iconinactive" end="$iconactive" duration="500" />