fix(lottie): smooth edges on lottie animation (#8189)

docs/src/details/widgets/lottie.rst

@@ -53,7 +53,7 @@ the size of the Widget (i.e. the size of the animation) is set to the dimensions
 The buffer can be set with either :cpp:expr:`lv_lottie_set_buffer(lottie, w, h, buf)`
 or :cpp:expr:`lv_lottie_set_draw_buf(lottie, draw_buf)`.
 
-When a draw buffer is used, it must be already initialized by the user with :cpp:enumerator:`LV_COLOR_FORMAT_ARGB8888` color format.
+When a draw buffer is used, it must be already initialized by the user with :cpp:enumerator:`LV_COLOR_FORMAT_ARGB8888_PREMULTIPLIED` color format.
 
 Set a source
 ------------

examples/widgets/lottie/lv_example_lottie_1.c

@@ -15,12 +15,12 @@ void lv_example_lottie_1(void)
 
 #if LV_DRAW_BUF_ALIGN == 4 && LV_DRAW_BUF_STRIDE_ALIGN == 1
     /*If there are no special requirements, just declare a buffer
-      x4 because the Lottie is rendered in ARGB8888 format*/
+      x4 because the Lottie is rendered in ARGB8888_PREMULTIPLIED format*/
     static uint8_t buf[64 * 64 * 4];
     lv_lottie_set_buffer(lottie, 64, 64, buf);
 #else
     /*For GPUs and special alignment/strid setting use a draw_buf instead*/
-    LV_DRAW_BUF_DEFINE(draw_buf, 64, 64, LV_COLOR_FORMAT_ARGB8888);
+    LV_DRAW_BUF_DEFINE(draw_buf, 64, 64, LV_COLOR_FORMAT_ARGB8888_PREMULTIPLIED);
     lv_lottie_set_draw_buf(lottie, &draw_buf);
 #endif
 

examples/widgets/lottie/lv_example_lottie_2.c

@@ -13,12 +13,12 @@ void lv_example_lottie_2(void)
 
 #if LV_DRAW_BUF_ALIGN == 4 && LV_DRAW_BUF_STRIDE_ALIGN == 1
     /*If there are no special requirements, just declare a buffer
-      x4 because the Lottie is rendered in ARGB8888 format*/
+      x4 because the Lottie is rendered in ARGB8888_PREMULTIPLIED format*/
     static uint8_t buf[64 * 64 * 4];
     lv_lottie_set_buffer(lottie, 64, 64, buf);
 #else
     /*For GPUs and special alignment/strid setting use a draw_buf instead*/
-    LV_DRAW_BUF_DEFINE(draw_buf, 64, 64, LV_COLOR_FORMAT_ARGB8888);
+    LV_DRAW_BUF_DEFINE(draw_buf, 64, 64, LV_COLOR_FORMAT_ARGB8888_PREMULTIPLIED);
     lv_lottie_set_draw_buf(lottie, &draw_buf);
 #endif
 

src/widgets/lottie/lv_lottie.c

@@ -73,12 +73,12 @@ lv_obj_t * lv_lottie_create(lv_obj_t * parent)
 void lv_lottie_set_buffer(lv_obj_t * obj, int32_t w, int32_t h, void * buf)
 {
     lv_lottie_t * lottie = (lv_lottie_t *)obj;
-    int32_t stride = lv_draw_buf_width_to_stride(w, LV_COLOR_FORMAT_ARGB8888);
-    buf = lv_draw_buf_align(buf, LV_COLOR_FORMAT_ARGB8888);
+    int32_t stride = lv_draw_buf_width_to_stride(w, LV_COLOR_FORMAT_ARGB8888_PREMULTIPLIED);
+    buf = lv_draw_buf_align(buf, LV_COLOR_FORMAT_ARGB8888_PREMULTIPLIED);
 
     tvg_swcanvas_set_target(lottie->tvg_canvas, buf, stride / 4, w, h, TVG_COLORSPACE_ARGB8888);
     tvg_canvas_push(lottie->tvg_canvas, lottie->tvg_paint);
-    lv_canvas_set_buffer(obj, buf, w, h, LV_COLOR_FORMAT_ARGB8888);
+    lv_canvas_set_buffer(obj, buf, w, h, LV_COLOR_FORMAT_ARGB8888_PREMULTIPLIED);
     tvg_picture_set_size(lottie->tvg_paint, w, h);
 
     /* Rendered output images are premultiplied */
@@ -93,8 +93,8 @@ void lv_lottie_set_buffer(lv_obj_t * obj, int32_t w, int32_t h, void * buf)
 
 void lv_lottie_set_draw_buf(lv_obj_t * obj, lv_draw_buf_t * draw_buf)
 {
-    if(draw_buf->header.cf != LV_COLOR_FORMAT_ARGB8888) {
-        LV_LOG_WARN("The draw buf needs to have ARGB8888 color format");
+    if(draw_buf->header.cf != LV_COLOR_FORMAT_ARGB8888 && draw_buf->header.cf != LV_COLOR_FORMAT_ARGB8888_PREMULTIPLIED) {
+        LV_LOG_WARN("The draw buf needs to have ARGB8888 or ARGB8888_PREMULTIPLIED color format");
         return;
     }
 

tests/src/test_cases/widgets/test_lottie.c

@@ -29,7 +29,7 @@ void tearDown(void)
 void test_lottie_simple(void)
 {
     lv_obj_t * lottie = lv_lottie_create(lv_screen_active());
-    lv_lottie_set_buffer(lottie, 100, 100, lv_draw_buf_align(buf, LV_COLOR_FORMAT_ARGB8888));
+    lv_lottie_set_buffer(lottie, 100, 100, lv_draw_buf_align(buf, LV_COLOR_FORMAT_ARGB8888_PREMULTIPLIED));
     lv_lottie_set_src_data(lottie, test_lottie_approve, test_lottie_approve_size);
     lv_obj_center(lottie);
 
@@ -54,7 +54,7 @@ void test_lottie_simple(void)
 void test_lottie_load_from_file(void)
 {
     lv_obj_t * lottie = lv_lottie_create(lv_screen_active());
-    lv_lottie_set_buffer(lottie, 100, 100, lv_draw_buf_align(buf, LV_COLOR_FORMAT_ARGB8888));
+    lv_lottie_set_buffer(lottie, 100, 100, lv_draw_buf_align(buf, LV_COLOR_FORMAT_ARGB8888_PREMULTIPLIED));
     lv_lottie_set_src_file(lottie, "src/test_assets/test_lottie_approve.json");
     lv_obj_center(lottie);
     TEST_ASSERT_EQUAL_SCREENSHOT("widgets/lottie_1.png");
@@ -80,7 +80,7 @@ void test_lottie_missing_settings(void)
     uint32_t tmp_buf[LV_TEST_WIDTH_TO_STRIDE(100, 4) * 100 + LV_DRAW_BUF_ALIGN];
 
     lv_obj_t * lottie1 = lv_lottie_create(lv_screen_active());
-    lv_lottie_set_buffer(lottie1, 100, 100, lv_draw_buf_align(tmp_buf, LV_COLOR_FORMAT_ARGB8888));
+    lv_lottie_set_buffer(lottie1, 100, 100, lv_draw_buf_align(tmp_buf, LV_COLOR_FORMAT_ARGB8888_PREMULTIPLIED));
 
     /*Shouldn't crash without source*/
     lv_timer_handler();
@@ -92,7 +92,7 @@ void test_lottie_missing_settings(void)
     /*Shouldn't crash without buffer*/
     lv_timer_handler();
 
-    lv_lottie_set_buffer(lottie2, 100, 100, lv_draw_buf_align(buf, LV_COLOR_FORMAT_ARGB8888));
+    lv_lottie_set_buffer(lottie2, 100, 100, lv_draw_buf_align(buf, LV_COLOR_FORMAT_ARGB8888_PREMULTIPLIED));
 
     lv_obj_center(lottie2);
     lv_test_fast_forward(950);
@@ -102,7 +102,7 @@ void test_lottie_missing_settings(void)
 void test_lottie_rescale(void)
 {
     lv_obj_t * lottie = lv_lottie_create(lv_screen_active());
-    lv_lottie_set_buffer(lottie, 100, 100, lv_draw_buf_align(buf, LV_COLOR_FORMAT_ARGB8888));
+    lv_lottie_set_buffer(lottie, 100, 100, lv_draw_buf_align(buf, LV_COLOR_FORMAT_ARGB8888_PREMULTIPLIED));
     lv_lottie_set_src_data(lottie, test_lottie_approve, test_lottie_approve_size);
     lv_obj_center(lottie);
 
@@ -110,7 +110,7 @@ void test_lottie_rescale(void)
     lv_test_fast_forward(200);
     TEST_ASSERT_EQUAL_SCREENSHOT("widgets/lottie_2.png");
 
-    lv_lottie_set_buffer(lottie, 50, 50, lv_draw_buf_align(buf, LV_COLOR_FORMAT_ARGB8888));
+    lv_lottie_set_buffer(lottie, 50, 50, lv_draw_buf_align(buf, LV_COLOR_FORMAT_ARGB8888_PREMULTIPLIED));
     TEST_ASSERT_EQUAL_SCREENSHOT("widgets/lottie_2_small.png");
 
     /*Should be the last frame*/
@@ -122,7 +122,7 @@ void test_lottie_rescale(void)
 void test_lottie_non_uniform_shape(void)
 {
     lv_obj_t * lottie = lv_lottie_create(lv_screen_active());
-    lv_lottie_set_buffer(lottie, 50, 200, lv_draw_buf_align(buf, LV_COLOR_FORMAT_ARGB8888));
+    lv_lottie_set_buffer(lottie, 50, 200, lv_draw_buf_align(buf, LV_COLOR_FORMAT_ARGB8888_PREMULTIPLIED));
     lv_lottie_set_src_data(lottie, test_lottie_approve, test_lottie_approve_size);
     lv_obj_center(lottie);
 
@@ -137,7 +137,7 @@ void test_lottie_memory_leak(void)
     uint32_t i;
     for(i = 0; i < 32; i++) {
         lv_obj_t * lottie = lv_lottie_create(lv_screen_active());
-        lv_lottie_set_buffer(lottie, 100, 100, lv_draw_buf_align(buf, LV_COLOR_FORMAT_ARGB8888));
+        lv_lottie_set_buffer(lottie, 100, 100, lv_draw_buf_align(buf, LV_COLOR_FORMAT_ARGB8888_PREMULTIPLIED));
         lv_lottie_set_src_data(lottie, test_lottie_approve, test_lottie_approve_size);
         lv_obj_center(lottie);
         lv_test_fast_forward(753 * i); /*Render a random frame*/
@@ -150,7 +150,7 @@ void test_lottie_memory_leak(void)
 void test_lottie_no_jump_when_visible_again(void)
 {
     lv_obj_t * lottie = lv_lottie_create(lv_screen_active());
-    lv_lottie_set_buffer(lottie, 100, 100, lv_draw_buf_align(buf, LV_COLOR_FORMAT_ARGB8888));
+    lv_lottie_set_buffer(lottie, 100, 100, lv_draw_buf_align(buf, LV_COLOR_FORMAT_ARGB8888_PREMULTIPLIED));
     lv_lottie_set_src_data(lottie, test_lottie_approve, test_lottie_approve_size);
     lv_obj_center(lottie);