lvgl v8 按钮动画和长按时间修改

1.按钮按下更改背景颜色和扩大背景的程序如下

lv_obj_t* obj = lv_obj_create(lv_scr_act());
    lv_obj_remove_style_all(obj);
    lv_obj_set_size(obj, LV_HOR_RES * 0.287, LV_VER_RES * 0.287);
    lv_obj_clear_flag(obj, LV_OBJ_FLAG_SCROLLABLE);

    lv_obj_align(obj, LV_ALIGN_CENTER, 0, 0);

    lv_obj_set_style_bg_opa(obj, LV_OPA_COVER, 0);
    lv_obj_set_style_width(obj, LV_HOR_RES * 0.287, 0);
    lv_obj_set_style_height(obj, LV_VER_RES * 0.287, 0);
    lv_obj_set_style_bg_color(obj, lv_color_hex(0x333333), 0);
    lv_obj_set_style_radius(obj, LV_VER_RES * 0.287, 0);
    lv_obj_t* obj1 = lv_obj_create(obj);
    lv_obj_set_size(obj1, LV_VER_RES * 0.237, LV_VER_RES * 0.237);

    lv_obj_align(obj1, LV_ALIGN_CENTER, 0, 0);

    lv_obj_set_style_width(obj1, LV_VER_RES * 0.26, LV_STATE_PRESSED);
    lv_obj_set_style_height(obj1, LV_VER_RES * 0.26, LV_STATE_PRESSED);
    lv_obj_set_style_bg_color(obj1, lv_color_hex(0x333333), 0);
    lv_obj_set_style_bg_color(obj1, lv_color_hex(0x48CFBD), LV_STATE_PRESSED);
    lv_obj_set_style_radius(obj1, LV_VER_RES * 0.26, 0);
    lv_obj_set_style_border_color(obj1, lv_color_hex(0x333333), 0);
    static lv_style_transition_dsc_t tran;
    static const lv_style_prop_t prop[] = { LV_STYLE_WIDTH, LV_STYLE_HEIGHT, LV_STYLE_PROP_INV };
    lv_style_transition_dsc_init(
        &tran,
        prop,
        lv_anim_path_ease_in,
        200,
        0,
        nullptr
    );
    lv_obj_set_style_transition(obj1, &tran, LV_STATE_PRESSED);
    lv_obj_set_style_transition(obj1, &tran, LV_STATE_FOCUSED);
    lv_obj_update_layout(obj1);

运行结果如下图

 2.另外，按钮按下更改背景颜色和扩大背景和更改背景图片的效果如何制作呢？

2.1在说之前首先对相关图片进行取模转换，这里着重说一下，再用工具制作的时候，一定要保留图片的透明度，否则lvgl无法更改图片的背景颜色，如图所示

 2.2代码如下

lv_obj_t* obj = lv_obj_create(lv_scr_act());
    lv_obj_remove_style_all(obj);
    lv_obj_set_size(obj, LV_HOR_RES * 0.287, LV_VER_RES * 0.287);
    lv_obj_clear_flag(obj, LV_OBJ_FLAG_SCROLLABLE);

    lv_obj_align(obj, LV_ALIGN_CENTER, 0, 0);

    lv_obj_set_style_bg_opa(obj, LV_OPA_COVER, 0);
    lv_obj_set_style_width(obj, LV_HOR_RES * 0.287, 0);
    lv_obj_set_style_height(obj, LV_VER_RES * 0.287, 0);
    lv_obj_set_style_bg_color(obj, lv_color_hex(0x333333), 0);
    lv_obj_set_style_radius(obj, LV_VER_RES * 0.287, 0);
    lv_obj_t* obj1 = lv_obj_create(obj);
    lv_obj_set_size(obj1, LV_VER_RES * 0.237, LV_VER_RES * 0.237);

    lv_obj_align(obj1, LV_ALIGN_CENTER, 0, 0);

    lv_obj_set_style_bg_opa(obj1, LV_OPA_COVER, 0);
    lv_obj_set_style_bg_img_src(obj1, &img_src_good_rel, 0);
    lv_obj_set_style_bg_img_src(obj1, &img_src_good_pre, LV_STATE_PRESSED);

    lv_obj_set_style_width(obj1, LV_VER_RES * 0.26, LV_STATE_PRESSED);
    lv_obj_set_style_height(obj1, LV_VER_RES * 0.26, LV_STATE_PRESSED);
    lv_obj_set_style_bg_color(obj1, lv_color_hex(0x333333), 0);
    lv_obj_set_style_bg_color(obj1, lv_color_hex(0x48CFBD), LV_STATE_PRESSED);
    lv_obj_set_style_radius(obj1, LV_VER_RES * 0.26, 0);
    lv_obj_set_style_border_color(obj1, lv_color_hex(0x333333), 0);
    static lv_style_transition_dsc_t tran;
    static const lv_style_prop_t prop[] = { LV_STYLE_WIDTH, LV_STYLE_HEIGHT, LV_STYLE_PROP_INV };
    lv_style_transition_dsc_init(
        &tran,
        prop,
        lv_anim_path_ease_in,
        200,
        0,
        nullptr
    );
    lv_obj_set_style_transition(obj1, &tran, LV_STATE_PRESSED);
    lv_obj_set_style_transition(obj1, &tran, LV_STATE_FOCUSED);
    lv_obj_update_layout(obj1);

运行结果如下

 3.lvgl 长按时间修改

在lvgl/src/hal/lv_hal_indev.h中LV_INDEV_DEF_LONG_PRESS_TIME  宏决定长按时间

#define LV_INDEV_DEF_LONG_PRESS_TIME      2000

这篇好文章是转载于：学新通技术网