How to create a Gradually disappearing animation with a picture int a container and then delete the container and picture after the animation


What MCU/Processor/Board and compiler are you using?

What do you want to achieve?

What have you tried so far?

Code to reproduce

Add a code snippet which can run in the simulator. It should contain only the relevant code that compiles without errors when separated from your main code base.

The code block(s) should be formatted like:

/*I use the visual studio to run the program with the pc display as the monitor*/
#include <stdlib.h>
#include <Windows.h>
#include <SDL.h>

lv_coord_t hres ;
lv_coord_t vres ;
static lv_obj_t *scr;
static lv_obj_t *page;
static lv_anim_t animation;
static lv_obj_t *cnt;

void AnimationFade(lv_obj_t *img)
	const lv_style_t* start_style = lv_img_get_style(img,LV_IMG_STYLE_MAIN);
	static lv_style_t end_style;
	end_style.image.opa = LV_OPA_0;//LV_OPA_100 represent not opa;

	lv_style_anim_set_styles(&animation, start_style, start_style,&end_style);
	lv_style_anim_set_time(&animation, 2000,1000);

lv_obj_t* img = NULL;
void FdLogo(void)
	img = lv_img_create(cnt, NULL);
	lv_img_set_src(img, &weather);

	lv_obj_align(img, NULL, LV_ALIGN_CENTER, 0, 0);
    lv_img_set_auto_size(img, true);
	lv_obj_set_opa_scale_enable(img, false);


void CreateScreen(void)
	scr = lv_obj_create(NULL, NULL);

void DeleteCont(void)

void  CreateCont(lv_obj_t* scr)
	cnt = lv_cont_create(scr, NULL);
	lv_obj_set_auto_realign(cnt, true);
	lv_obj_align_origo(cnt, NULL, LV_ALIGN_CENTER, 0, 0);
	lv_obj_set_size(cnt, hres - 50, vres - 50);
	lv_cont_set_fit(cnt, LV_FIT_TIGHT);
	lv_cont_set_layout(cnt, LV_LAYOUT_COL_M);

void SetpageStyle(lv_obj_t *page)
	static lv_style_t style_sb; = false;
	lv_style_copy(&style_sb, &lv_style_btn_rel);
	style_sb.body.main_color = LV_COLOR_WHITE;
	style_sb.body.grad_color = LV_COLOR_WHITE;
	style_sb.body.border.color = LV_COLOR_WHITE;
	style_sb.body.border.width = 1;
	style_sb.body.border.opa = LV_OPA_COVER;
	style_sb.body.padding.right = 3;
	style_sb.body.padding.bottom = 3;
	style_sb.body.padding.inner = 8;
	lv_page_set_style(page, LV_PAGE_STYLE_SB, &style_sb);

	return 0;

void PageCreate(lv_obj_t *page)
	page = lv_page_create(lv_disp_get_scr_act(NULL), NULL);
	lv_obj_set_size(page, hres, vres);
	lv_page_set_scrl_layout(page, LV_LAYOUT_COL_M);
	lv_page_set_style(page, LV_PAGE_STYLE_BG, &lv_style_transp_tight);
	lv_page_set_style(page, LV_PAGE_STYLE_SCRL, &lv_style_transp);
	lv_obj_t * th_label = lv_label_create(page, NULL);
	lv_label_set_text(th_label, "Theme");
	lv_obj_set_style(th_label, &lv_style_pretty_color);

static void animCB()

void FD122(void)
	/*Get the resolution of the display*/
	hres = lv_disp_get_hor_res(NULL);
	vres = lv_disp_get_ver_res(NULL);
	/*Initial the display theme*/
	lv_theme_t * th= lv_theme_mono_init(210, NULL); //This lv_theme_mono_init(210, NULL)
	//th->>body.main_color = LV_COLOR_BLACK;//If delete this set the animation can't create
	//th->>body.grad_color = LV_COLOR_BLACK;

	/*Init a screen with black backgroud*/

	/*Creat a container for the image*/
	/*Boot animation load*/

	/*Createtitlview after the animation*/
	animation.ready_cb = animCB;

	/*execute the animation*/


Screenshot and/or video

If possible, add screenshots and/or videos about the current state.

the effect like this

I acn’t delete the last container

It’d be easier to animate the opa_scale. It sets the opacity of all children too.
Don’t forget to lv_obj_set_opa_scale_enable(obj, true) on the parent where the animation starts.

Thank you very much for telling my methd to realize the function, it worked ,but I don’t know it’s principle