Animations on ESP LCD DevKit not running smoothly (lot of tearing)


Hello! I have an ESP-LCD DevKit and use the example from GitHub. But I have the issue that any animation that is to large or runs to fast ends up in ‘tearing-up’ the graphics.

Is there anything I have missed? I found some topics about tearing, but it didn’t make me anything wiser. I can also be that the hardware is just not ‘good enough’.

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

The ESP-LCD DevKit with its compiler (ran from + build in LCD screen (480*800/16bit)

What LVGL version are you using?

Exactly this version

What do you want to achieve?

I want to run some ‘smooth-ish’ animations. Like a simple square that slides in. I have tried to animate the container its width and position. When I add more content in the container itself, the lagging is more noticable.

Even tried the lv_objmask object. Where the container that has to be shown is hidden and the mask size is animated. The idea behind this is that I thought that only updated pixels are rendered and send to the display. But with this method all pixels are send, even those that were not updated (bug?). Does anyone know more about this?

What have you tried so far?

  • Increase display buffer, but the S2 has not enough space for a full screen buffer
  • Two ‘not full size buffers’
  • Reduced code to make is as minimal as possible
  • Tried different methods for animation, like updating the size, position, mask.

Code to reproduce

lv_style_set_border_width(&style_box_card, LV_STATE_DEFAULT, 0);
lv_style_set_bg_color(&style_box_card, LV_STATE_DEFAULT, HW_COLOR_CURIOUS_BLUE);

lv_obj_t *cont_obj = lv_cont_create(parent, NULL);
lv_obj_set_size(cont_obj, 800, 480);
lv_obj_align(cont_obj, NULL, LV_ALIGN_IN_TOP_LEFT, 0, 0);

lv_obj_add_style(cont_obj, LV_CONT_PART_MAIN, &style_box_card);


lv_anim_set_exec_cb(&anim_1, (lv_anim_exec_xcb_t) lv_obj_set_height);
lv_anim_set_var(&anim_1, cont_obj1);

lv_anim_set_time(&anim_1, 2000);
lv_anim_set_delay(&anim_1, 500);
lv_anim_set_values(&anim_1, 0, 460);


Screenshot and/or video

Slow motion recording of the animation: