17. 动画控件

用途：动画控件是一种用于在界面中显示动态效果的控件。它可以通过逐帧图像或逐步变化的图形元素来创建动画效果，使用户界面更加生动和吸引人。

17.1. 属性

基础属性 : 参考控件概念- 基础属性

坐标属性 : 参考控件概念- 坐标属性

加载属性 : 参考控件概念- 加载属性

特有属性 :

• 动画编号(num)：资源编号，范围：0-65535，,65535表示无（读写）

• 播放状态(play)：播放状态，0-停止，1-播放，2-暂停（读写）

• 循环播放(loop)：0-否，1-是（读写）

• 播放速度(speed)：播放速度百分比，范围：10-1000（读写）

---

17.2. 事件

弹起事件： 控件按下且弹起后执行

按下事件： 控件按下后执行

动画播放完成事件： 动画播放完毕后执行

---

17.3. 如何导入动画

注意

• HMI工程如果使用旋转功能，必须使用动画工具对动画资源进行旋转，否则会导致动画资源不能正常播放

• 打开HMI软件，从右下角的资源栏中选择 动画 -> 添加

• 导入成功，会在动画资源下显示 资源ID 、 压缩质量 、 帧率

注意

我们提供了一个动画工具，方便用户自由编辑、创建动画资源，请参考该章节 动画工具

17.4. 功能演示

点击下载演示工程

小技巧

把工程配置的启动页面(pid)改为当前页面ID可以立即显示此页面。

17.4.1. 播放动画

• 功能：播放一个动画，实现停止，播放，隐藏，改变播放速度功能

• 原理：通过改变动画控件的属性值实现

  • 实现停止、播放、隐藏功能

    1、在bl0控件的 弹起事件 中编写以下脚本

    gif0.play =2; //设gif0控件为暂停状态
    bl0.txt.str = "播放";  //修改bl0的文本值为播放
    

    2、在bl0控件的 按下事件 中编写以下脚本

    gif0.play =1;        //设gif0为播放状态
    bl1.val = 0;         //设bl1为弹起状态,但不触发弹起事件
    bl0.txt.str = "暂停";//修改bl0的文本值为暂停
    if(bl2.val == 1)     //如果是按下状态，则gif0为隐藏状态
    {
    click(bl2,0);      //激活bl2弹起事件，设为显示状态
    }
    

    3、在bl1控件的 按下事件 中编写以下脚本

    gif0.play =0;  //设gif0控件为停止状态
    bl0.val = 0;   //设bl0为弹起状态
    bl0.txt.str = "播放";  //修改bl0的文本值为播放
    

    4、在bl2控件的 弹起事件 中编写以下脚本

    vis(gif0,1);//gif0设为显示状态
    

    5、在bl2控件的 按下事件 中编写以下脚本

    vis(gif0,0);//gif0设为隐藏状态
    

  • 实现播放速度调节功能

    1、在b4控件的 弹起事件 中编写以下脚本

    gif0.speed =30;//设gif0播放速度为30
    

    2、在b2控件的 弹起事件 中编写以下脚本

    gif0.speed =100;//设gif0播放速度为100
    

    3、在b3控件的 弹起事件 中编写以下脚本

    gif0.speed =200;//设gif0播放速度为200