Hi，大家好，欢迎来到树莓派之littlevGL课堂，我们在上节课中学习了如何创建简单的对象，本节课带大家来看一下如何使用圆弧对象，以及如何做一个动态的圆弧效果，废话不多说。 一 有图有真相 先看图！ 静态圆弧的效果
动态加载的圆弧效果
上面动态加载的圆弧效果好不好看？就跟有时候软件加载的时候缓冲是不是一样？没错，本节课我们就来做一个这样的效果，以后我们开发项目的时候我们也可以在界面过渡或者数据加载的时候加一个这样的效果，可以使我们开发的产品细节更好，那么我们先来学习如何画一个圆弧。 二 代码分析 static void arc_test(void){
/*Create style for the Arcs*/
static lv_style_t style;
lv_style_copy(&style, &lv_style_plain);
style.line.color = LV_COLOR_BLUE; /*Arc color*/
style.line.width = 8; /*Arc width*/
/*Create an Arc*/
lv_obj_t * arc = lv_arc_create(lv_scr_act(), NULL);
lv_arc_set_style(arc, LV_ARC_STYLE_MAIN, &style); /*Use the new style*/
lv_arc_set_angles(arc, 90, 60);
lv_obj_set_size(arc, 150, 150);
lv_obj_align(arc, NULL, LV_ALIGN_CENTER, 0, 0);
}首先我们这是一个园，或者叫圆弧，肯定是没有宽和高的概念的，取而代之的是直径或者叫半径，那么这里这个函数就是设置的这个对象的直径，但是两个参数哪一个有用呢？实际上经过我的测试，是随机的，所以这里大家两个参数填写一样的就可以了。 然后是lv_arc_set_angles(arc, 90, 60)设置圆弧的起始角度，那么这个角度遵循什么规则呢，这里给大家简单画了一个草图帮助大家理解记忆：
下面是0度然后按照逆时针的方向递增，这就是圆弧的角度增长方向。 就这样，一个简单的圆弧就很简单的画出来了，大家有没有学会呢？ 接下来我们开始学习创建一个动态加载的圆弧，开始之前大家有没有什么思路呢？比如这种动画效果是做出来的？相信大家小时候应该都有在课本的书角上画小人，然后每一页都与前一页有一点点不同的地方，最后我们捏着书角快速的翻书，就可以看到一个简易的动画了，不晓得大家有没有理解，其实我们这里讲的动态加载也是一点一点的补充上去的，然后连贯起来就是形成了一个动态的效果，那么我们来看一下代码： /**
* An `lv_task` to call periodically to set the angles of the arc
* @param t
*/
static void arc_loader(lv_task_t * t)
{
static int16_t a = 0;
a+=5;
if(a >= 359) a = 359;
if(a < 180) lv_arc_set_angles(t->user_data, 180-a ,180);
else lv_arc_set_angles(t->user_data, 540-a ,180);
if(a == 359) {
lv_task_del(t);
return;
}
}
/**
* Create an arc which acts as a loader.
*/
void arc_test2(void)
{
/*Crarc_test2eate style for the Arcs*/
static lv_style_t style;
lv_style_copy(&style, &lv_style_plain);
style.line.color = LV_COLOR_NAVY; /*Arc color*/
style.line.width = 8; /*Arc width*/
/*Create an Arc*/
lv_obj_t * arc = lv_arc_create(lv_scr_act(), NULL);
lv_arc_set_angles(arc, 180, 180);
lv_arc_set_style(arc, LV_ARC_STYLE_MAIN, &style);
lv_obj_align(arc, NULL, LV_ALIGN_CENTER, 0, 0);
/* Create an `lv_task` to update the arc.
* Store the `arc` in the user data*/
lv_task_create(arc_loader, 20, LV_TASK_PRIO_LOWEST, arc);
}这里出现一个任务的概念，其实很简单，就是创建了一个定时任务，以每20ms的时间间隔去运行arc_loader()这个函数，关于任务的概念后面我们还会做深入的讲解，暂时先这样理解就可以了。 大家可以下载下面的代码去尝试一下，好了本节教程就先到这里，我们下一节教程讲解"Bar"，这个对象不晓得怎样去翻译更加准确，先暂时这样叫吧！我们下一节教程再见！ 三 代码下载 |
