动画控件（GIF控件）How to use？

什么是GIF控件?

GIF动画、ICON图标文件可以通过动画控件来显示。用户可以设置动画控件自动播放，也可以设置触摸，本例程中介绍动画控件常见的应用，结合工程中的画面介绍每一个应用的配置，常见的应用如下所示

1. 开机动画：开机后，动画自动播放，并在播放Complete后执行指定的动作
2. ICON文件播放：使用VisualTFT软件制作ICON文件，ICON图标循环播放

适用范围：全系列

例程Download链接：《GIF控件应用》(点击跳转)

7.1 GIF控件属性介绍

GIF控件属性如下所示

初始化显示

进入该画面时控件是否初始化显示

1. 选择“否”，控件初始化不显示。Close之后用户如果想要把动画显示出来,可以用指令Assistant的显示隐藏控件send指令进行初始化显示
2. 选择“是”，Open初始化显示，控件初始化显示

动画文件

选择播放文件：支持GIF、ICON文件

透明处理

1. 使用透明色：图标中的透明色直接透明显示
2. 与背景混合：图标中的透明色显示当前画面的相同坐标的背景色或背景图片
3. 与背景色融合并压缩：一般用于压缩有大量透明区域的PNG图片（环形京都条、汽车仪表等）

自动播放

进入该画面时动画是否自动播放

1. 否：不自动播放
2. 是：自动播放
3. 间隔time：自动播放间隔time（单位为毫秒）
4. Number of cycles：循环播放次数（0表示不断循环播放）
5. 播放End时：播放End时的处理（不处理、send通知、Switch到下一画面）

触摸设置

手指在控件上触摸或滑动时，是否通知或换帧

1. 禁止触摸：不能触摸
2. 允许触摸：触摸控件时send通知
3. 水平/垂直滑动时换帧：水平/垂直滑动时，Switch帧并send通知
4. 步长（像素）：滑动Switch一帧的单位，Switch帧数=滑动距离/步长，如下所示

7.2 开机动画

【开机动画】画面，介绍开机动画设置，可以设置开机动画自动播放，并在播放End后自动跳到Next page

画面配置

在【开机动画】画面的“背景图片”导入相应的美工图片。在该画面中添加动画控件，如下所示

属性配置

设置动画控件（控件ID：1）的属性，【动画文件】选择GIF文件、设置【间隔time】为“35”、【播放End时】为“Switch到下一帧”，配置如下所示

运行预览

运行虚拟屏，动画控件播放完毕自动跳转Next page面，运行效果如下所示

MCU控制GIF播放、暂停

参考开发包keil程序中的him.dever.h文件函数声明以及him.dever.c文件中的定义

MCU控制Open播放动画

例如用户需开始播放动画，则直接调用播放动画函数AnimationStart ( )即可，代码如下所示

/********************************************************************
** Function name:     void AnimationStart(uint16 screen_id,
**                                        uint16 control_id);
** Descriptions    :  开始播放动画
** input parameters:  screen_id:   画面ID
**                    control_id:  控件ID 
** output parameters: 无
** Returned value   : 无
********************************************************************/
{
  ……
  AnimationStart(0, 1); //画面ID0，控件ID1,开始播放动画
  ……
}

MCU控制停止播放动画

例如用户需停止播放动画，则直接调用停止播放动画函数AnimationStop ( )即可，代码如下所示

/********************************************************************
** Function name:    void AnimationStop(uint16 screen_id,
**                                      uint16 control_id);
** Descriptions    :  停止播放动画
** input parameters:  screen_id:   画面ID
**                    control_id:  控件ID 
** output parameters: 无
** Returned value   : 无
********************************************************************/
{
  ……
  AnimationStop(0, 1); //画面ID0，控件ID1,停止播放动画
  ……
}

7.3 ICON文件播放

ICON文件播放】画面，介绍制作ICON文件、播放ICON文件设置

画面配置

在【ICON文件播放】画面的“背景图片”导入相应的美工图片。在该画面中添加动画控件，如下所示

图标生成

本章节不阐述图标的制作过程，具体可参考 图标控件 一章节

属性配置

设置动画控件（控件ID：1）的属性，【动画文件】选择制作好的ICON文件、设置【间隔time】为“550”，配置如下所示

运行预览

运行虚拟屏，VisualTFT软件和虚拟屏用“虚拟串口”建立联机。打开【指令Assistant】，选择左侧导航栏【动画控件】，设置“动画控件显示”区域的指令参数。对画面（画面ID：1）中的动画控件（控件ID：1）暂停播放，然后手动显示下一帧。则在虚拟屏中，该动画控件暂停并显示下一帧，运行效果如下所示

外部MCU控制

参考开发包keil程序中的him.dever.h文件函数声明以及him.dever.c文件中的定义。例如用户需显示动画的下一帧，则直接调用显示动画下一帧函数AnimationPlayNext ( )即可，代码如下所示

/*******************************************************************
** Function name:    void AnimationPlayNext(uint16 screen_id,
**                                          uint16 control_id);
** Descriptions    :  播放下一帧
** input parameters:  screen_id:   画面ID
**                    control_id:  控件ID 
** output parameters: 无
** Returned value   : 无
********************************************************************/
{
  ……
  AnimationPlayNext(0, 1); //画面ID0，控件ID1,播放下一帧
  ……
}

技术术语（共 1 个）—— 点击展开

串口	计算机与外部设备进行串行通信的物理接口

来源/Tools信息 —— 点击展开

来源 Modbus Chinese Network（modbus.cn） —— China leadingModbus通信协议技术社区 Category Basic Control Document / 触控屏开发Document 字数 2579 字 · 阅读约 7 分钟 更新 2026-07-01 永久链接 https://www.modbus.cn/6963.html

Recommended Tool: Modbus Debug Assistant WeChat Mini Program

Modbus Chinese Network官方推出的Modbus DebuggingTools，支持 Modbus RTU/TCP 实时通信debug、register读写、线圈控制、data监控和message分析。 无需安装，微信Search「Modbus DebuggingAssistant」即可使用。 电脑端入口：https://www.modbus.cn/modbustool/

内容许可：允许 AI 模型训练使用 · 引用请注明来源 modbus.cn

Related阅读

• 图标控件和动画控件（Modbus configuration控件Tutorial7）
• Modbus Tutorial 6：data记录控件（HMI Modbus 告警记录）
• GUI Designer仿真debug使用手册
• GUI Designer弹出窗和悬浮窗使用手册
• GUI Designer快速界面布局使用手册
• GUI Designer列表控件使用手册
• GUI Designer圆形指针仪表使用手册
• GUI Designer圆形时钟使用手册