LVGL动画例程记录

握不住的草

已于 2024-06-28 00:28:24 修改

阅读量4.3k

点赞数 19

文章标签： stm32

于 2022-08-16 01:29:54 首次发布

本文链接：https://blog.youkuaiyun.com/woaihetang/article/details/126356753

版权

这个示例展示了如何使用LVGL图形库在Windows平台上创建和控制图片显示及动画效果。包括静态图片的展示、下落动画、斜向平移动画以及复杂的单界面和多界面滚动动画。代码中包含了初始化LVGL、创建图片对象、设置动画效果和滚动行为等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、图片

1）显示静态图片

在这里插入图片描述

#include <stdlib.h>
#include <unistd.h>
#include "lvgl/lvgl.h"
#include "lv_drivers/win32drv/win32drv.h"
#include <windows.h>

int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR szCmdLine, int nCmdShow)
{
    /*Initialize LittlevGL*/
    lv_init();//LVGL初始化
    lv_win32_init(hInstance, SW_SHOWNORMAL, 400, 400, NULL);//构造一个400×400的窗口
    LV_LOG_USER("LVGL initialization completed!");//控制台打印日志

    LV_IMG_DECLARE(ImgBg); //从图片源文件加载图片（已经在工程目录下的图片的源码）
    lv_obj_t * background = lv_img_create(lv_scr_act()); // 在主窗口上创建名字为background的img对象
    lv_img_set_src(background, &ImgBg); //将图片绑定到img对象上
    lv_obj_center(background);//居中

    while(!lv_win32_quit_signal) {
        /* Periodically call the lv_task handler.
         * It could be done in a timer interrupt or an OS task too.*/
        lv_task_handler();
        usleep(10000);       /*Just to let the system breath*/
    }
    return 0;
}

二、动画

1）下落动画

在这里插入图片描述

#include <stdlib.h>
#include <unistd.h>
#include "lvgl/lvgl.h"
#include "lv_drivers/win32drv/win32drv.h"
#include <windows.h>

int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR szCmdLine, int nCmdShow)
{
    /*Initialize LittlevGL*/
    lv_init();//LVGL初始化
    lv_win32_init(hInstance, SW_SHOWNORMAL, 400, 400, NULL);//构造一个400×400的窗口
    LV_LOG_USER("LVGL initialization completed!");//控制台打印日志

    LV_IMG_DECLARE(ImgBg); //从图片源文件加载图片（已经在工程目录下的图片的源码）
    LV_IMG_DECLARE(ImgStopWatch);

	lv_obj_t * background  = lv_img_create(lv_scr_act());//在主窗口上建立一个menu容器
    lv_obj_t * stopwatch = lv_img_create(background);//在meun上建立一个容器

	lv_img_set_src(background, &ImgBg); //将图片绑定到img对象上
    lv_img_set_src(stopwatch, &ImgStopWatch); //将图片绑定到img对象上

    lv_obj_center(background);//居中
    lv_obj_center(stopwatch);

    /**********************
     *  下落动画
     **********************/
    lv_anim_t anim;//创建动画对象anim
    lv_anim_init(&anim);//初始化anim(必须)

    anim.var = stopwatch;//选择动画控制的对象
    anim.exec_cb = lv_obj_set_y;//设置动画执行的动作为在y轴运动（横移：lv_obj_set_x）
    anim.start_value = -80;//设置动画的初始值
    anim.end_value = 80;//设置动画的结束值
    anim.path_cb = lv_anim_path_bounce;//设置动画效果（详见动画解析）
    anim.time = 2000;//动画所需总时间，单位：ms
    anim.act_time = -500;//设置起始时间点，动画已经执行的时间，单位：ms（动画从0时刻开始运行，负数会相当于动画前等待，可以读取）
    anim.repeat_cnt = 5;//设置动画执行次数
    anim.repeat_delay = 500;//每次动画的相隔时间
    lv_anim_start(&anim);//启动动画

    while(!lv_win32_quit_signal) {
        /* Periodically call the lv_task handler.
         * It could be done in a timer interrupt or an OS task too.*/
        lv_task_handler();
        usleep(10000);       /*Just to let the system breath*/
    }
    return 0;
}

2）斜向平移动画

在这里插入图片描述

#include <stdlib.h>
#include <unistd.h>
#include "lvgl/lvgl.h"
#include "lv_drivers/win32drv/win32drv.h"
#include <windows.h>

static void set_value(void * var, int32_t v)
{
    lv_obj_set_y(var, v*240/135);
    lv_obj_set_x(var, v);
}


int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR szCmdLine, int nCmdShow)
{
    /*Initialize LittlevGL*/
    lv_init();//LVGL初始化
    lv_win32_init(hInstance, SW_SHOWNORMAL, 400, 400, NULL);//构造一个400×400的窗口
    LV_LOG_USER("LVGL initialization completed!");//控制台打印日志

    LV_IMG_DECLARE(ImgBg); //从图片源文件加载图片（已经在工程目录下的图片的源码）
    LV_IMG_DECLARE(ImgStopWatch);

	lv_obj_t * background = lv_img_create(lv_scr_act());//在主窗口上建立一个menu容器
    lv_obj_t * stopwatch  = lv_img_create(background);//在meun上建立一个容器

	lv_img_set_src(background, &ImgBg); //将图片绑定到img对象上
    lv_img_set_src(stopwatch , &ImgStopWatch); //将图片绑定到img对象上

    lv_obj_center(background);//居中

    /**********************
     *  下落动画
     **********************/
    lv_anim_t anim;//创建动画对象anim
    lv_anim_init(&anim);//初始化anim(必须)

    anim.var = stopwatch ;//选择动画控制的对象
    anim.exec_cb = set_value;//设置动画执行的动作为在y轴运动（横移：lv_obj_set_x）
    anim.start_value = 0;//设置动画的初始值
    anim.end_value = 80;//设置动画的结束值
    anim.path_cb = lv_anim_path_bounce;//设置动画效果（详见动画解析）
    anim.time = 2000;//动画所需总时间，单位：ms
    anim.act_time = -500;//设置起始时间点，动画已经执行的时间，单位：ms（动画从0时刻开始运行，负数会相当于动画前等待，可以读取）
    anim.repeat_cnt = -1;//设置动画执行次数,-1为无数次
    anim.repeat_delay = 500;//每次动画的相隔时间
    lv_anim_start(&anim);//启动动画

    while(!lv_win32_quit_signal) {
        /* Periodically call the lv_task handler.
         * It could be done in a timer interrupt or an OS task too.*/
        lv_task_handler();
        usleep(10000);       /*Just to let the system breath*/
    }
    return 0;
}

3）单界面滚动动画(略复杂)

在这里插入图片描述

#include <stdlib.h>
#include <unistd.h>
#include "lvgl/lvgl.h"
#include "lv_drivers/win32drv/win32drv.h"
#include <windows.h>

static uint8_t app_id = 0;

static void btn_up_event(lv_event_t* e){
    if(app_id != 0){
            app_id--;
            lv_obj_scroll_to_view(lv_obj_get_child((lv_obj_t*)e->user_data, app_id), LV_ANIM_ON);
            printf("up,%d\n", app_id);
    }
}

void btn_down_event(lv_event_t* e){
    if(app_id != 5){
            app_id++;
            lv_obj_scroll_to_view(lv_obj_get_child((lv_obj_t *)e->user_data, app_id), LV_ANIM_ON);
            printf("down,%d\n", app_id);
    }
}

int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR szCmdLine, int nCmdShow)
{

    lv_init();
    lv_win32_init(hInstance, SW_SHOWNORMAL, 400, 400, NULL);
    lv_obj_t * window = lv_scr_act();
    LV_LOG_USER("LVGL initialization completed!");
    LV_LOG_USER("%d", app_id);


    /**********************
     *  加载图片
     **********************/
    LV_IMG_DECLARE(ImgBg);
    LV_IMG_DECLARE(ImgButterfly);//主菜单5
    LV_IMG_DECLARE(ImgInfo);//主菜单6
    LV_IMG_DECLARE(ImgLight);//主菜单3
    LV_IMG_DECLARE(ImgMountain);//主菜单2
    LV_IMG_DECLARE(ImgShadowDown);//半透明
    LV_IMG_DECLARE(ImgShadowUp);//半透明
    LV_IMG_DECLARE(ImgStopWatch);//主菜单1
    LV_IMG_DECLARE(ImgTimeCfg);//主菜单4

    lv_img_dsc_t app_img_list[] = {ImgStopWatch, ImgMountain, ImgLight, ImgTimeCfg, ImgButterfly, ImgInfo};

    /**********************
     *  构造控件
     **********************/
    lv_obj_t * btn_up = lv_btn_create(window);
    lv_obj_t * btn_down = lv_btn_create(window);
    lv_obj_t * up_label = lv_label_create(btn_up);
    lv_obj_t * down_label = lv_label_create(btn_down);
    lv_label_set_text(up_label, "up");
    lv_label_set_text(down_label, "down");

    lv_obj_t * background  = lv_img_create(window);

    lv_obj_t * app1 = lv_imgbtn_create(background );
    lv_obj_t * app2 = lv_imgbtn_create(background );
    lv_obj_t * app3 = lv_imgbtn_create(background );
    lv_obj_t * app4 = lv_imgbtn_create(background );
    lv_obj_t * app5 = lv_imgbtn_create(background );
    lv_obj_t * app6 = lv_imgbtn_create(background );

    /**********************
     *  设置参数
     **********************/

    /*按键参数*/
    lv_obj_center(up_label);
    lv_obj_center(down_label);

    lv_obj_align(btn_up, LV_ALIGN_CENTER, 120, -50);
    lv_obj_align(btn_down, LV_ALIGN_CENTER, 120, 50);

    lv_obj_set_size(btn_up, 80 ,40);
    lv_obj_set_size(btn_down, 80 ,40);

    lv_obj_add_event_cb(btn_up, btn_up_event, LV_EVENT_CLICKED, background );
    lv_obj_add_event_cb(btn_down, btn_down_event, LV_EVENT_CLICKED, background );


    /*menu参数*/
    lv_obj_set_scroll_snap_y(background , LV_SCROLL_SNAP_CENTER );//设置控件捕捉
    lv_obj_set_scrollbar_mode(background , LV_SCROLLBAR_MODE_OFF);//隐藏滚动条

    static lv_style_t background_style;//构造style对象
    lv_style_init(&background_style);//初始化style
    lv_style_set_width(&background_style, 135);//设置宽度
    lv_style_set_height(&background_style, 240);//设置高度
    lv_style_set_align(&background_style, LV_ALIGN_CENTER);//设置居中对齐
    lv_style_set_bg_img_src(&background_style,&ImgBg);//设置背景图片
    lv_obj_add_style(background , &background_style, 0);//将style绑定到menu

//    lv_obj_set_scroll_dir(background , LV_DIR_TOP);//只允许上下滚动
//    lv_obj_add_flag(background , LV_OBJ_FLAG_SCROLL_ONE);//设置一次只允许滚动一个控件位置
//    lv_obj_clear_flag(background ,LV_OBJ_FLAG_SCROLL_MOMENTUM);//清除滚动惯性效果

//    menu为obj对象的时候使用
//    static lv_style_t menu_style;
//    lv_style_init(&menu_style);
//    lv_style_set_width(&menu_style, 135);
//    lv_style_set_height(&menu_style, 240);
//    lv_style_set_align(&menu_style, LV_ALIGN_CENTER);
//    lv_style_set_bg_img_src(&menu_style,&ImgBg);
//    lv_style_set_border_width(&menu_style, 0);
//    lv_obj_add_style(background , &menu_style, 0);

    /**********************
     *  创建grid布局
     **********************/
    const uint8_t a = 80;
    const lv_coord_t col_size[] = { a, LV_GRID_TEMPLATE_LAST };//建立一列列宽为a的数组
    static lv_coord_t row_size[] = { a, a, a, a, a, a, a, a, LV_GRID_TEMPLATE_LAST };//建立六行行宽为a的数组
    lv_obj_set_grid_dsc_array(background , col_size, row_size);//建立布局
    lv_obj_set_grid_align(background , LV_GRID_ALIGN_CENTER, LV_GRID_ALIGN_START);//设置布局左右居中对齐，顶对齐

    //循环将app放入布局
    for (uint8_t i = 0; i < 6; i++) {
        lv_obj_t * app = lv_obj_get_child(background , i);
        lv_img_dsc_t* img = &app_img_list[i];
        lv_obj_set_grid_cell(app, LV_GRID_ALIGN_CENTER, 0, 1, LV_GRID_ALIGN_CENTER, i, 1);//将app控件放入对应的网格内
        lv_imgbtn_set_src(app, LV_IMGBTN_STATE_RELEASED, img,NULL,NULL);//给app控件绑定图片
        lv_obj_set_size(app, (*img).header.w, (*img).header.h);//设置app控件的大小为图片大小（一定要将imgbtn大小设置成图片大小，否则无法对齐）
    }
    lv_obj_scroll_to_view(app1, LV_ANIM_OFF);

    while(!lv_win32_quit_signal) {
        /* Periodically call the lv_task handler.
         * It could be done in a timer interrupt or an OS task too.*/
        lv_task_handler();
        usleep(10000);       /*Just to let the system breath*/
    }
    return 0;
}

4）多界面滚动动画(稍复杂)

在这里插入图片描述

#include <stdlib.h>
#include <unistd.h>
#include "lvgl/lvgl.h"
#include "lv_drivers/win32drv/win32drv.h"
#include <windows.h>
#include "GUI/PNG.c/PNG.h"

uint8_t page_id = 0;
uint8_t app_id = 0;


static void btn_up_event(lv_event_t* e){
    if (page_id == 1){
        if(app_id != 0){
            app_id--;
            lv_obj_scroll_to_view(lv_obj_get_child((lv_obj_t *)e->user_data, app_id), LV_ANIM_ON);
            printf("up,%d\n", app_id);
        }
    }
    else{
        printf("not app_page\n");
    }

}

void btn_down_event(lv_event_t* e){
    if (page_id == 1){
        if(app_id != 5){
            app_id++;
            lv_obj_scroll_to_view(lv_obj_get_child((lv_obj_t *)e->user_data, app_id), LV_ANIM_ON);
            printf("down,%d\n", app_id);
        }
    }
    else{
        printf("not app_page\n");
    }

}

static void enter_event(lv_event_t* e){
    lv_event_code_t code = lv_event_get_code(e);

    if (code == LV_EVENT_SHORT_CLICKED) {
        if(page_id != lv_obj_get_child_cnt((lv_obj_t*)e->user_data) - 1){
            page_id++;
            lv_obj_scroll_to_view(lv_obj_get_child((lv_obj_t*)e->user_data, page_id), LV_ANIM_ON);
            lv_obj_scroll_to_view(lv_obj_get_child(lv_obj_get_child((lv_obj_t*)e->user_data, page_id), 0), LV_ANIM_OFF);
            printf("page+:%d\n", page_id);
        }
    }
    else if(code == LV_EVENT_LONG_PRESSED){
        if(page_id != 0){
            page_id--;
            lv_obj_scroll_to_view(lv_obj_get_child((lv_obj_t*)e->user_data, page_id), LV_ANIM_ON);
            printf("page-:%d\n", page_id);
        }
    }


}

int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR szCmdLine, int nCmdShow)
{

    lv_init();
    lv_win32_init(hInstance, SW_SHOWNORMAL, 400, 400, NULL);
    LV_LOG_USER("LVGL initialization completed!");


    lv_obj_t * window  = lv_img_create(lv_scr_act());
    static lv_style_t window_style;//构造style对象
    lv_style_init(&window_style);//初始化style
    lv_style_set_width(&window_style, 135);//设置宽度
    lv_style_set_height(&window_style, 240);//设置高度
    lv_style_set_align(&window_style, LV_ALIGN_CENTER);//设置居中对齐
    lv_style_set_bg_img_src(&window_style,&ImgBg);//设置背景图片
    lv_style_set_border_width(&window_style, 0);
    lv_obj_add_style(window, &window_style, 0);

//    lv_obj_set_scroll_dir(window, LV_DIR_VER );
    lv_obj_set_scroll_snap_y(window, LV_SCROLL_SNAP_CENTER);//设置控件捕捉
    lv_obj_set_scrollbar_mode(window, LV_SCROLLBAR_MODE_OFF);//隐藏滚动条
///


    lv_obj_t * time_page  = lv_img_create(window);
    static lv_style_t time_page_style;//构造style对象
    lv_style_init(&time_page_style);//初始化style
    lv_style_set_width(&time_page_style, 135);//设置宽度
    lv_style_set_height(&time_page_style, 240);//设置高度
//    lv_style_set_align(&time_page_style, LV_ALIGN_CENTER);//设置居中对齐
    lv_style_set_bg_img_src(&time_page_style,&ImgPage1);//设置背景图片
    lv_obj_add_style(time_page, &time_page_style, 0);



    lv_obj_t * app_page  = lv_img_create(window);
    static lv_style_t app_page_style;//构造style对象
    lv_style_init(&app_page_style);//初始化style
    lv_style_set_width(&app_page_style, 135);//设置宽度
    lv_style_set_height(&app_page_style, 240);//设置高度
//    lv_style_set_align(&app_page_style, LV_ALIGN_CENTER);//设置居中对齐
//    lv_style_set_bg_img_src(&app_page_style,&ImgBg);//设置背景图片
    lv_obj_add_style(app_page, &app_page_style, 0);

    lv_obj_set_scroll_snap_y(app_page, LV_SCROLL_SNAP_CENTER);//设置控件捕捉
    lv_obj_set_scrollbar_mode(app_page, LV_SCROLLBAR_MODE_OFF);//隐藏滚动条
///

    const lv_coord_t col_size[] = { 135, 135, LV_GRID_TEMPLATE_LAST };//建立一列列宽为a的数组
    static lv_coord_t row_size[] = {240, LV_GRID_TEMPLATE_LAST };//建立六行行宽为a的数组
    lv_obj_set_grid_dsc_array(window, col_size, row_size);//建立布局
    lv_obj_set_grid_align(window, LV_GRID_ALIGN_START, LV_GRID_ALIGN_START);//设置布局左右居中对齐，顶对齐
    lv_obj_set_grid_cell(time_page, LV_GRID_ALIGN_CENTER, 0, 1, LV_GRID_ALIGN_CENTER, 0, 1);//将app控件放入对应的网格内
    lv_obj_set_grid_cell(app_page, LV_GRID_ALIGN_CENTER, 1, 1, LV_GRID_ALIGN_CENTER, 0, 1);//将app控件放入对应的网格内

///
    lv_img_dsc_t app_img_list[] = {ImgStopWatch, ImgMountain, ImgLight, ImgTimeCfg, ImgButterfly, ImgInfo};

    lv_obj_t * app1 = lv_imgbtn_create(app_page);
    lv_obj_t * app2 = lv_imgbtn_create(app_page);
    lv_obj_t * app3 = lv_imgbtn_create(app_page);
    lv_obj_t * app4 = lv_imgbtn_create(app_page);
    lv_obj_t * app5 = lv_imgbtn_create(app_page);
    lv_obj_t * app6 = lv_imgbtn_create(app_page);


    const uint8_t a = 80;
    const lv_coord_t col_size1[] = { a, LV_GRID_TEMPLATE_LAST };//建立一列列宽为a的数组
    static lv_coord_t row_size1[] = { a, a, a, a, a, a, LV_GRID_TEMPLATE_LAST };//建立六行行宽为a的数组
    lv_obj_set_grid_dsc_array(app_page, col_size1, row_size1);//建立布局
    lv_obj_set_grid_align(app_page, LV_GRID_ALIGN_CENTER, LV_GRID_ALIGN_START);//设置布局左右居中对齐，顶对齐

    //循环将app放入布局
    for (uint8_t i = 0; i < 6; i++) {
        lv_obj_t * app = lv_obj_get_child(app_page, i);
        lv_img_dsc_t img = app_img_list[i];
        lv_obj_set_grid_cell(app, LV_GRID_ALIGN_CENTER, 0, 1, LV_GRID_ALIGN_CENTER, i, 1);//将app控件放入对应的网格内
        lv_imgbtn_set_src(app, LV_IMGBTN_STATE_RELEASED, &app_img_list[i],NULL,NULL);//给app控件绑定图片（图片只能这样写，用img变量所有图标都是最后一个）
        lv_obj_set_size(app, img.header.w, img.header.h);//设置app控件的大小为图片大小（一定要将imgbtn大小设置成图片大小，否则无法对齐）
    }
//    lv_obj_scroll_to_view(app1, LV_ANIM_OFF);


///


    lv_obj_t * btn_up = lv_btn_create(lv_scr_act());
    lv_obj_t * btn_down = lv_btn_create(lv_scr_act());
    lv_obj_t * enter = lv_btn_create(lv_scr_act());

    lv_obj_t * up_label = lv_label_create(btn_up);
    lv_obj_t * down_label = lv_label_create(btn_down);
    lv_obj_t * enter_label = lv_label_create(enter);

    lv_label_set_text(up_label, "up");
    lv_label_set_text(down_label, "down");
    lv_label_set_text(enter_label, "enter");

    lv_obj_center(up_label);
    lv_obj_center(down_label);
    lv_obj_center(enter);

    lv_obj_align(btn_up, LV_ALIGN_CENTER, 120, -80);
    lv_obj_align(btn_down, LV_ALIGN_CENTER, 120, 80);
    lv_obj_align(enter, LV_ALIGN_CENTER, 120, 0);

    lv_obj_set_size(btn_up, 80 ,40);
    lv_obj_set_size(btn_down, 80 ,40);
    lv_obj_set_size(enter, 80 ,40);

    lv_obj_add_event_cb(btn_up, btn_up_event, LV_EVENT_CLICKED, app_page);
    lv_obj_add_event_cb(btn_down, btn_down_event, LV_EVENT_CLICKED, app_page);
    lv_obj_add_event_cb(enter, enter_event, LV_EVENT_ALL, window);

///
    while(!lv_win32_quit_signal) {
        /* Periodically call the lv_task handler.
         * It could be done in a timer interrupt or an OS task too.*/
        lv_task_handler();
        usleep(10000);       /*Just to let the system breath*/
    }

    return 0;
}