GUI Guider使用进阶之让按钮动起来

NXP管管

GUI Guider使用进阶之让按钮动起来

一. 概述

时光飞逝，自之前给大家分享了GUI Guider工具的实用基础篇和实战入门篇后，转眼几个月就过去了。相信不少读者对GUI Guider和LVGL熟悉不少了，希望这套GUI平台工具给大家带去很大帮助。
大家都知道，在GUI开发中，按钮是很常用的。使用者通过点击按钮来进行交互，为了增强交互互动效果，嵌入式系统中传统经典的做法会在点击按钮时，让按钮变个颜色之类。
随着嵌入式软硬件技术的发展，如今很容易做到让这个互动更生动，体验更好。我们知道，LVGL提供了强大的动画功能，通过这个功能，我们可以让按钮在被点击后“抖动”一下，使得互动效果更好。
这篇小文章来分享如何使用GUI Guider工具来实现这个常用又实用的效果——让按钮动起来。这里就不再赘述GUI Guider的基本使用，直奔主题。


二. 让按钮动起来
这里介绍的让按钮动起来，实质就是动画移动过程：在点击按钮后，按钮先垂直（Y轴）向下移动一点距离，再回到原位置，这样看起来就是按钮按下后，会“抖动”一下。


对此，LVGL有很好的支持。在GUIGuider工具帮助下，实现起来更是如虎添翼。


总体分成2个环节：1. 基于LVGL实现“抖动”效果的用户API函数；2. 在GUI Guider事件设置（EventSetting）中调用此API。具体实现如下：

1.    基于LVGL实现“抖动“效果的用户API
这个用户API可以在GUI Guider提供的custom/custom.c中实现。这个.c文件是GUI Guider生成的软件包中，提供给开发者用来开发自己的API的模板，配套的还有custom.h。
这个API实现起来并不复杂，只需调用LVGL实现动画的一系列API即可。
将此API函数原型定义如下：

1. void btnAnimCustom(lv_obj_t *obj, int delta,lv_anim_ready_cb_t animCb)

复制代码

  参数描述：
*obj：需要动画的对象的指针
delta：沿Y轴向下移动的距离
animCb：动画后，自动调用的函数，以完成某项功能
以下为函数实现细节：

1. （1）初始化一个动画变量a
   
2. 
   
3.      lv_anim_init(&a);
   
4. 
   
5. （2）设置来完成动画效果的函数"lv_obj_set_y()"（在动画中设置Y轴坐标位置）
   
6. 
   
7.      lv_anim_set_exec_cb(&a,(lv_anim_exec_xcb_t)lv_obj_set_y);
   
8. 
   
9. （3）设置动画对象
   
10. 
    
11.      lv_anim_set_var(&a, obj);
    
12. 
    
13. （4）设置动画持续时间，ms单位
    
14. 
    
15.      lv_anim_set_time(&a,40);
    
16. 
    
17. （5）获取动画对象当前Y轴坐标位置
    
18. 
    
19.      inty = lv_obj_get_y(obj);
    
20. 
    
21. （6）设置动画中起始和结束Y轴坐标位置值
    
22. 
    
23.      lv_anim_set_values(&a,y, y+delta);
    
24. 
    
25. （7）设置动画回放（返回起始位置）持续时间
    
26. 
    
27.      lv_anim_set_playback_time(&a,40);
    
28. 
    
29. （8）设置动画开始前的延时
    
30. 
    
31.      lv_anim_set_delay(&a,0);
    
32. 
    
33. （9）设置动画完成后要执行的回调函数，可用于实现某个功能
    
34. 
    
35.      if(animCb)
    
36.      {
    
37.         lv_anim_set_ready_cb(&a,animCb);
    
38.      }
    
39. 
    
40. （10）创建此初始化好的动画
    
41. 
    
42.      lv_anim_start(&a);

复制代码

以上实现看起来是不是清晰易用。
敏锐的读者或许发现这个API是通用的，可用来实现对象的上下移动（抖动），对象不仅限于按钮。并且，以此类推，去实现其他动画效果。

2. 在GUI Guider事件设置（Event Setting）中调用此API
接下来，借助GUI Guider事件配置提供的代码功能，调用以上动画API，很容易就可让按钮动起来。


点开某个按钮的事件配置（Event Setting）页面，选择此按钮作为“Source Widget”，事件触发“Trigger”项为“Released”（即释放按钮后触发事件），”Target Widget”这里选为“Null”，接下来将交由后续code处理事件，在“Action”项中选择”C code…”, 然后在“Include”项中添加“#include ”custom.h””, 最后在“Code”区，调用上述实现的API：btnAnimCustom(guider_ui.screen_imgbtn_1,4, NULL)；即可让”imgtn_1”按钮实现抖动一下的效果。

下面是这个实现效果动图：

以上介绍了一个通过GUI Guider实现让按钮动起来的方法，以飨读者。
也希望给各位带来启发，依此类推，实现自己更多的好的显示互动效果。

阅读全文

stm1024

感谢管管分享~~我也准备研究一下这个

NXP管管

stm1024 发表于 2022-1-20 17:20
感谢管管分享~~我也准备研究一下这个

期待！