LVGL V8之transition

创建style

• 定义style属性

 static const lv_style_prop_t props[] = { LV_STYLE_BG_COLOR, LV_STYLE_BORDER_COLOR,LV_STYLE_BORDER_WIDTH, 0 };

• 初时化style transition，线性动画lv_anim_path_linear播放， 延迟200ms后播放持续时间100ms

    static lv_style_transition_dsc_t trans_def;
    lv_style_transition_dsc_init(&trans_def, props, lv_anim_path_linear, 100, 200,NULL);

• 初时化按键按下的style transition,线性动画lv_anim_path_linear播放， 没有延迟，播放持续时间500ms

    static lv_style_transition_dsc_t trans_pr;
    lv_style_transition_dsc_init(&trans_pr, props, lv_anim_path_linear, 500, 0, NULL);

• 设置transition style

    static lv_style_t style_def;
    lv_style_init(&style_def);
    lv_style_set_transition(&style_def, &trans_def);

• 设置按键按下时的transition style

    static lv_style_t style_pr;
    lv_style_init(&style_pr);
    lv_style_set_bg_color(&style_pr, lv_palette_main(LV_PALETTE_RED));
    lv_style_set_border_width(&style_pr, 6);
    lv_style_set_border_color(&style_pr, lv_palette_darken(LV_PALETTE_RED, 3));
    lv_style_set_transition(&style_pr, &trans_pr);

• 创建obj对象，添加style,居中显示

    lv_obj_t* obj = lv_obj_create(lv_scr_act());
    lv_obj_add_style(obj, &style_def, 0);
    lv_obj_add_style(obj, &style_pr, LV_STATE_PRESSED);
    lv_obj_center(obj);

完整代码，仅供参考

static void lv_example_style_10(void)
{
    static const lv_style_prop_t props[] = { LV_STYLE_BG_COLOR, LV_STYLE_BORDER_COLOR,LV_STYLE_BORDER_WIDTH, 0 };
    /* A default transition
    * Make it fast (100ms) and start with some delay (200 ms)*/
    static lv_style_transition_dsc_t trans_def;
    lv_style_transition_dsc_init(&trans_def, props, lv_anim_path_linear, 100, 200,NULL);
    /* A special transition when going to pressed state
    * Make it slow (500 ms) but start without delay*/
    static lv_style_transition_dsc_t trans_pr;
    lv_style_transition_dsc_init(&trans_pr, props, lv_anim_path_linear, 500, 0, NULL);
    static lv_style_t style_def;
    lv_style_init(&style_def);
    lv_style_set_transition(&style_def, &trans_def);
    static lv_style_t style_pr;
    lv_style_init(&style_pr);
    lv_style_set_bg_color(&style_pr, lv_palette_main(LV_PALETTE_RED));
    lv_style_set_border_width(&style_pr, 6);
    lv_style_set_border_color(&style_pr, lv_palette_darken(LV_PALETTE_RED, 3));
    lv_style_set_transition(&style_pr, &trans_pr);
    /*Create an object with the new style_pr*/
    lv_obj_t* obj = lv_obj_create(lv_scr_act());
    lv_obj_add_style(obj, &style_def, 0);
    lv_obj_add_style(obj, &style_pr, LV_STATE_PRESSED);
    lv_obj_center(obj);
}

调用lv_example_style_10运行效果