How can imgbtn have a similar transition effect to btn


I use style on imgbtn and set a style similar to btn, but when I touch the imgbtn, there is no change. I also tried to set the imgbtn style in the official document, and there is no change.I want to set the transition effect of imgbtn to be similar to these effect setting functions of img

   static lv_style_t style;

    /*Set a background color and a radius*/
    lv_style_set_radius(&style, LV_STATE_DEFAULT, 5);
    lv_style_set_bg_opa(&style, LV_STATE_DEFAULT, LV_OPA_COVER);
    lv_style_set_bg_color(&style, LV_STATE_DEFAULT, LV_COLOR_SILVER);

    /*Set different background color in pressed state*/
    lv_style_set_bg_color(&style, LV_STATE_PRESSED, LV_COLOR_GRAY);

    /*Set different transition time in default and pressed state
     *fast press, slower revert to default*/
    lv_style_set_transition_time(&style, LV_STATE_DEFAULT, 500);
    lv_style_set_transition_time(&style, LV_STATE_PRESSED, 200);

    /*Small delay to make transition more visible*/
    lv_style_set_transition_delay(&style, LV_STATE_DEFAULT, 100);

    /*Add `bg_color` to transitioned properties*/
    lv_style_set_transition_prop_1(&style, LV_STATE_DEFAULT, LV_STYLE_BG_COLOR);

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


What LVGL version are you using?


What do you want to achieve?

Implement img-like transition methods on imgbtn

What have you tried so far?

Refer to the official document to set the stytle

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:

            // style
            lv_style_set_image_recolor_opa(&style_imgbtn, LV_STATE_PRESSED, LV_OPA_1);
            lv_style_set_image_recolor(&style_imgbtn, LV_STATE_PRESSED, GUI_APP_SILVER);

            x_pos = 40 + (i * 60);
            y_pos = 36;

            lv_obj_t * imgbtn = lv_imgbtn_create(img_bg, NULL);
            lv_imgbtn_set_src(imgbtn, LV_BTN_STATE_PRESSED, item[i].icon_img);
            lv_imgbtn_set_src(imgbtn, LV_BTN_STATE_RELEASED, item[i].icon_img);
            lv_obj_set_pos(imgbtn, x_pos, y_pos);
            lv_obj_set_size(imgbtn, 30, 30);
            lv_obj_add_style(imgbtn, LV_LABEL_PART_MAIN, &style_imgbtn);

Screenshot and/or video

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

I think that the image button doesn’t support that many styles. It relies mainly on you providing different images for the different states.

The Image button object has only a main part called LV_IMG_BTN_PART_MAIN from where all image style properties are used.

As such recoloring is probably the only property you can change (and therefore transition).