lvgl环形渐变加载器

### 创建环形渐变加载器

在 LVGL 框架中创建一个环形渐变加载器可以通过组合 `lv_arc` 和自定义样式来实现。下面是一个详细的教程以及代码示例。

#### 准备工作

确保已经按照官方文档完成了开发环境的配置[^1]，并熟悉了基本的 LVGL 控件使用方法[^4]。

#### 自定义样式设置

首先需要定义一个新的风格用于绘制带有颜色渐变效果的弧线：

static lv_style_t style_grad;
void setup_gradient_loader(void){
    lv_style_init(&style_grad);
    
    /* 设置背景属性 */
    lv_style_set_bg_opa(&style_grad, LV_OPA_COVER);                    // 完全覆盖背景
    lv_style_set_bg_color(&style_grad, lv_color_make(0xff, 0xff, 0xff));// 白色底色
    
    /* 渐变方向是从左下角到右上角 */
    lv_style_set_bg_grad_dir(&style_grad, LV_GRAD_DIR_HOR);

    /* 起始颜色为蓝色 */
    lv_style_set_bg_main_stop(&style_grad, 0);
    lv_style_set_bg_color(&style_grad, lv_color_hex(0x2196F3));

    /* 结束颜色为红色 */
    lv_style_set_bg_grad_stop(&style_grad, 255);
    lv_style_set_bg_grad_color(&style_grad, lv_color_hex(0xF44336));
}

此部分设置了从蓝至红水平方向上的色彩过渡效果[^2]。

#### 绘制圆形进度条

接着利用上述样式的参数去实例化一个圆弧对象作为加载指示器的核心组件：

/* 创建一个空白画布放置arc*/
lv_obj_t *loader_canvas = lv_obj_create(lv_scr_act(), NULL);
lv_obj_align(loader_canvas, NULL, LV_ALIGN_CENTER, 0, 0);

/* 添加arc到canvas内 */
lv_obj_t *grad_loader = lv_arc_create(loader_canvas, NULL);
lv_obj_add_style(grad_loader, LV_ARC_PART_BG, &style_grad);
lv_obj_add_style(grad_loader, LV_ARC_PART_INDIC, &style_grad);

// 配置arc的具体尺寸和位置
lv_area_t coords;
lv_obj_get_coords(loader_canvas,&coords);
int width = (coords.x2-coords.x1)/2;

lv_arc_set_size(grad_loader,width*2,width*2);
lv_arc_set_rotation(grad_loader,-90);     // 将起点调整到顶部
lv_arc_set_value(grad_loader, 0);         // 初始值设为零度
lv_obj_center(grad_loader);               // 居中显示

通过这段代码，在屏幕上居中的地方会显示出一个具有指定大小、旋转角度及初始状态为空转态(`0`)的环形加载动画[^3]。

#### 动态更新进度

为了让这个加载器能够动态变化，还需要编写定时回调函数不断改变其数值直到达到最大值为止:

static uint8_t progress = 0;
static void update_progress(lv_task_param_t param){
    static int dir = 1;       // 方向标记变量，默认顺时针增加
    if(progress >= 100 || progress <= 0) {
        dir *= -1;            // 当到达边界时反转方向
    }
    progress +=dir;
    lv_arc_set_value(param,(progress>100)?100:(progress<0)?0:progress);
}

// 注册任务调度器每秒调用一次update_progress()
lv_task_create(update_progress, 1000 / 60 , LV_TASK_PRIO_MID, grad_loader);

以上就是完整的创建过程，实现了基于LVGL框架下的环形渐变加载器功能。