在UI开发过程中，序列帧基本是绕不开的，AWTK 支持多种方法实现序列帧显示，本文介绍图片动画控件和Video image控件的使用方法。ZDP1440是一款基于开源GUI引擎AWTK的图像显示专用驱动芯片，在其上面显示序列帧有多种方法，下面列出几种方法的优缺点：
| 优点 | 缺点 |
图片动画控件 | 简单易用 | 图片解码影响效率 播放顺序固定 |
GIF图片控件 | 直接播放gif图片，不需要其他处理 | 解码时间长 占用大量RAM，不适用嵌入式端 |
video_image自定义控件 | 带压缩算法，效率较高 | 播放顺序固定 压缩后文件过大会占用大量RAM |
图片控件 + 定时器 | 播放顺序十分自由 | 图片解码影响效率 需要增填代码实现 |
zdp_video自定义控件 | 直接播放视频，简单易用 效率较高 | ZDP14x0系列仅支持ZDP1460 |
本文将介绍图片动画控件及video_image自定义控件。
图片动画控件非常简单，仅需要把序列帧图片加入图片资源中，然后设置控件中的图片前缀和图片名称格式，再调整起始编号和结束编号即可。例如：num0.png、num1.png、······、num9.png，这些图片的命名格式为：“%s%d”，其中%s为num；每张图片播放的时间可调，且可设置是否启用循环播放，有单次播放完成（启用循环播放）和播放完成（禁用循环播放）事件，可注册对应事件的回调函数。![]()
图1
勾选该控件杂项中的“auto_play”选项，在打开页面时就会自动开始播放，或在程序中调用开始播放接口：image_animation_play。
运行效果（黑框为控件边框，图片默认显示在控件中央）：
首先在插件管理界面找到video_image控件并安装，等待安装结束后根据右下角提示，点击刷新按钮刷新界面。![]()
图2
此时在控件列表的自定义栏中将会多出video_image控件。![]()
图3
在已安装栏选中video_image，右侧会打开该控件的使用说明。![]()
图4
此时，在UI工程路径下，会出现一个“3rd”文件夹：![]()
图5
进入“UI工程路径\3rd\awtk-widget-video-image\bin”，如若该路径下没有diff_image_to_video_gen.exe和gif_to_ frame_gen.exe两个可执行文件，在“UI工程路径\3rd\awtk-widget-video-image”下按住shift键点击鼠标右键，选择在此处打开Powershell窗口，在窗口中敲入“scons”重新编译该自定义控件。参照该控件的使用说明，使用gif_to_frame_gen.exe拆分gif图片，再使用diff_image_to_video_gen.exe将图片压缩成一个video_image控件可用的文件。生成的文件需要拷贝至“UI工程路径\design\default\data”。回到AWTK Designer，拖拽一个video_image控件至页面上，填好对应参数，这里使用示例中提供的”gif_35”演示，和图片动画控件一样，此控件也可设置单次播放完成（启用循环播放）和播放完成（禁用循环播放）事件对应的回调函数。运行效果（黑框为控件边框，图片默认显示在控件左上角）：HMI-ZDP1440开发套件资料持续更新中，需要获取最新资料，可关注如下链接：
https://gitee.com/zlgmcuopen/HMI_ZDP1440D 。如需购买评估套件或与我们交流，可点击下面链接购买硬件或加入技术交流群与我们交流。
HMI-ZDP1440D开发套件已在微商城上架，点击链接即可购买。
如需加入技术交流群，请添加客服微信，我们将邀请您进群，与志同道合的朋友交流，并有专业技术人员为您答疑解惑。
