LVGL8学习之transition

这一篇来学一下transition

默认情况下，当一个对象改变状态时新的状态和属性会被立即设置。但是，使用transition转换，可以在状态更改时播放动画。例如：按下Button，其背景色可以播放超过300ms的动画颜色。转换的参数存储在样式中。可以设置：

（1）转换的时间

（2）开始转换前的延时时间

（3）动画的路径

（4）动画的属性

可以为每个状态定义转换属性。例如：在默认状态下设置500ms的转换时间将意味着当对象转到默认状态时，将应用500ms的转换时间。在按下状态下设置100ms的转换时间将意味着在进入按下状态时需要100ms的转换时间。

代码如下：

void lv_transition_test()
{
    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);

    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);

    lv_obj_t * obj = lv_obj_create(lv_scr_act());
    if (obj != NULL)
    {
        lv_obj_add_style(obj, &style_def, 0);
        lv_obj_add_style(obj, &style_pr, LV_STATE_PRESSED);
        lv_obj_center(obj);
    }
}

运行效果：