lvgl touch在stm32移植及动画应用--Apple的学习笔记

一，前言

最近我突然发现原来我用的是电阻触摸屏，所以是带触摸功能的，当初买回来我主要用LCD显示功能，所以就忘记了它有touch功能，就移植了下驱动，然后lvgl官网的example移植到了sdl2框架中。

二，touch移植

input_dev中移植下，lvgl的porting_template做的还是比较好的。反正lvgl就是周期扫描判断是否有touch，有则则获取x和y坐标。效果就不展示了，源码中获取x和y坐标后，会识别x和y在哪个obj对象，然后调用这个obj对象的callback用户回调函数。主要是了解下它的思路。

三，music界面移植

我到应用就是调用API，暂时我不是很感兴趣去研究API，我主要是学习GUI引擎源码的设计思路，并且通过制作简单的API应用来debug学习。要我做一个漂亮的mp3界面，其实我对这些API，主要是动画API还不熟悉。先拿来用下，看看官网callback中是如何写的code，了解下思路而已。里面看到了动画相关的fadein，还有启动界面的切换设置了倒计时用了动画，这些动画的设置感觉很眼熟，以前JavaScript的Tween动画库传入的参数感觉也类似，另外刚刚学习的cocos2dx的转场动画传入的元素也很类似。官网demo的主界面如下：

image.png

    /*Animate in the content after the intro time*/
    lv_anim_t a;
    lv_anim_path_t path;
    lv_anim_path_init(&path);

    lv_anim_path_set_cb(&path, lv_anim_path_bounce);

    start_anim = true;

    lv_task_t * task =  lv_task_create(stop_start_anim, INTRO_TIME + 6000, LV_TASK_PRIO_MID, NULL);
    lv_task_once(task);

    lv_anim_init(&a);
    lv_anim_set_path(&a, &path);

    uint32_t i;
    lv_anim_set_exec_cb(&a, start_anim_cb);
    for(i = 0; i < 20; i++) {
        lv_anim_set_values(&a, LV_HOR_RES, 5);
        lv_anim_set_delay(&a, INTRO_TIME - 200 + rnd_array[i] % 200);
        lv_anim_set_time(&a, 2500 + rnd_array[i] % 500);
        lv_anim_set_var(&a, &start_anim_values[i]);
        lv_anim_start(&a);
    }

    lv_obj_fade_in(wave_top, 1000, INTRO_TIME + 1000);
    lv_obj_fade_in(wave_bottom, 1000, INTRO_TIME + 1000);
    lv_obj_fade_in(title_box, 1000, INTRO_TIME + 1000);
    lv_obj_fade_in(icon_box, 1000, INTRO_TIME + 1000);
    lv_obj_fade_in(ctrl_box, 1000, INTRO_TIME + 1000);
    lv_obj_fade_in(handle_label, 1000, INTRO_TIME + 1000);
    lv_obj_fade_in(handle_rect, 1000, INTRO_TIME + 1000);
    lv_obj_fade_in(album_img_obj, 800, INTRO_TIME + 1000);
    lv_obj_fade_in(spectrum_obj, 0, INTRO_TIME);

    lv_anim_path_set_cb(&path, lv_anim_path_overshoot);
    lv_anim_set_path(&a, &path);

    lv_anim_set_var(&a, album_img_obj);
    lv_anim_set_time(&a, 1000);
    lv_anim_set_delay(&a, INTRO_TIME + 1000);
    lv_anim_set_values(&a, 1, LV_IMG_ZOOM_NONE);
    lv_anim_set_exec_cb(&a, (lv_anim_exec_xcb_t) lv_img_set_zoom);
    lv_anim_set_ready_cb(&a, NULL);
    lv_anim_start(&a);

如下是开机logo界面过一段时间后fade_out消失的动画设置。

    /* Create an intro from a logo + label */
    LV_IMG_DECLARE(img_lv_demo_music_logo);
    lv_obj_t * logo = lv_img_create(lv_scr_act(), NULL);
    lv_img_set_src(logo, &img_lv_demo_music_logo);
    lv_obj_move_foreground(logo);

#if LV_DEMO_MUSIC_SQUARE == 0
    lv_obj_t * title = lv_label_create(lv_scr_act(), NULL);
    lv_label_set_text(title, "LVGL Demo\nMusic player");
    lv_label_set_align(title, LV_LABEL_ALIGN_CENTER);
    lv_obj_set_style_local_text_font(title, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &lv_font_montserrat_30);
    lv_obj_set_style_local_text_line_space(title, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, 8);
    lv_obj_fade_out(title, 300, INTRO_TIME);
    lv_obj_align(logo, spectrum_obj, LV_ALIGN_CENTER, 0, 0);
#if LV_DEMO_MUSIC_LANDSCAPE
    lv_obj_align(title, NULL, LV_ALIGN_IN_LEFT_MID, 50, -10);
#else
    lv_obj_align(title, NULL, LV_ALIGN_IN_TOP_MID, 0, 30);
#endif

#endif
    lv_anim_path_set_cb(&path, lv_anim_path_ease_in);
    lv_anim_set_path(&a, &path);
    lv_anim_set_var(&a, logo);
    lv_anim_set_time(&a, 400);
    lv_anim_set_delay(&a, INTRO_TIME + 800);
    lv_anim_set_values(&a, LV_IMG_ZOOM_NONE, 10);
    lv_anim_set_ready_cb(&a, lv_obj_del_anim_ready_cb);
    lv_anim_start(&a);

四，小结

我对这些API的使用暂时不敢兴趣，但是学习了lvglGUI引擎后，还是要看看它能做出些什么产品效果，所以花了点时间检验了下。