【小熊带你玩转小安派】添加一个播放按钮

本系列图文连载，第7话

首先祝贺我找到了工作！！！我上岸了！！！
今天拼了一整天积木，晚上逛完街才想起来，没更教程，匆匆水一期

正文开始：

                               
登录/注册后可看大图

上一话教程，我们做了一个简陋的天空人时钟，今天我们来学习代码，给天空人动画添加一个播放按钮
本期教程必须学会，不然后面的教程就看不懂了（虽然我还不知道写啥）

推荐学习本节前，先看这个视频  https://www.bilibili.com/video/BV1LU4y1q7vd

我们使用GUI-Guider生成代码时，会生成两个文件夹

登录/注册后可看大图

generated 文件夹中的代码不能乱改，咱们这一节想实现通过按钮点击开始播放太空人动画，像这样自定义功能，需要修改custom文件夹中的custom.c

根据之前的教程，设计下界面

登录/注册后可看大图

因为我也不会写lvgl代码，下面使用一个取巧的办法获取代码
1. 首先，我们来看看哪个函数实现图片播放
将动图设置成自动播放（比较一下如果不自动播放，生成的代码）
会发现在generated —— setup_scr_screen.c 初始化动图控件的代码中多出来一行  

1. lv_animimg_start(ui->screen_animimg_1);   //从函数名就能看出是开始播放

复制代码

2. 然后，我们来看看如何点击按钮触发函数
将按钮绑定点击事件，绑定到动图的显隐功能上

登录/注册后可看大图

生成一下代码，会在generated —— events_init.c 里生成按钮点击的代码（敲重点！！！这里就是我们想要的）

登录/注册后可看大图

生成的这些代码，仅需要改两行，就能实现播放动画的功能

1. <blockquote>#include "events_init.h"

复制代码

我们找到工程文件夹里的custom文件夹中的custom.c
将上述代码无脑复制进来，删掉 lv_obj_add_flag(guider_ui.screen_animimg_1, LV_OBJ_FLAG_HIDDEN); 这一行
尝试一下将  lv_animimg_start(ui->screen_animimg_1);  复制到这里
将按钮的绑定删掉，将动图的自动播放关掉
运行一下模拟器
不出意外的就出意外了，会报错！
报错说 没有 ui 这个参数传进来，我们学习删掉的这行 lv_obj_add_flag(guider_ui.screen_animimg_1, LV_OBJ_FLAG_HIDDEN);  的写法
将 lv_animimg_start(ui->screen_animimg_1);  修改成 lv_animimg_start(guider_ui.screen_animimg_1);  


将void events_init_screen(lv_ui *ui)函数删掉，把 lv_obj_add_event_cb(ui->screen_btn_1, screen_btn_1_event_handler, LV_EVENT_ALL, NULL); 粘贴到void custom_init(lv_ui *ui)函数里
运行一下模拟器，就不报错了，点击按钮实现播放动图！

登录/注册后可看大图

修改后的custom.c

1. /*********************
   
2. *      INCLUDES
   
3. *********************/
   
4. #include <stdio.h>
   
5. #include "lvgl.h"
   
6. #include "custom.h"
   
7. 
   
8. /*********************
   
9. *      DEFINES
   
10. *********************/
    
11. 
    
12. /**********************
    
13. *      TYPEDEFS
    
14. **********************/
    
15. 
    
16. /**********************
    
17. *  STATIC PROTOTYPES
    
18. **********************/
    
19. 
    
20. /**********************
    
21. *  STATIC VARIABLES
    
22. **********************/
    
23. 
    
24. /**
    
25. * Create a demo application
    
26. */
    
27. #include "events_init.h"
    
28. #include <stdio.h>
    
29. #include "lvgl.h"
    
30. 
    
31. 
    
32. static void screen_btn_1_event_handler (lv_event_t *e)
    
33. {
    
34.         lv_event_code_t code = lv_event_get_code(e);
    
35. 
    
36.         switch (code) {
    
37.         case LV_EVENT_CLICKED:
    
38.         {
    
39.                 lv_animimg_start(guider_ui.screen_animimg_1);
    
40.                 break;
    
41.         }
    
42.         default:
    
43.                 break;
    
44.         }
    
45. }
    
46. 
    
47. void custom_init(lv_ui *ui)
    
48. {
    
49.     /* Add your codes here */
    
50. lv_obj_add_event_cb(ui->screen_btn_1, screen_btn_1_event_handler, LV_EVENT_ALL, NULL);
    
51. }

复制代码

本期教程结束，是不是很简单呀
后面的教程我们将接触更多lvgl代码，各位同学做好心理准备哦

学习

发个批量改图片引用库的小程序 https://ifwz.lanzouw.com/it20i18zwy9a

登录/注册后可看大图

学习

学习了

找一天实践一下！

学习

大佬

学习

打卡学习