动画控件 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 用途：动画控件是一种用于在界面中显示动态效果的控件。它可以通过逐帧图像或逐步变化的图形元素来创建动画效果，使用户界面更加生动和吸引人。 属性 --------------------------------- .. image:: image/动画/属性.png :align: center :alt: 动画属性 | **基础属性 :** 参考控件概念- :ref:`基础属性` **坐标属性 :** 参考控件概念- :ref:`坐标属性` **加载属性 :** 参考控件概念- :ref:`加载属性` **特有属性 :** .. image:: image/动画/特有属性.png :align: center :alt: 动画特有属性 | - 动画编号(num)：资源编号，范围：0-65535，,65535表示无（读写） - 播放状态(play)：播放状态，0-停止，1-播放，2-暂停（读写） - 循环播放(loop)：0-否，1-是（读写） - 播放速度(speed)：播放速度百分比，范围：10-1000（读写） --------------------------------- 事件 --------------------------------- **弹起事件：** 控件按下且弹起后执行 **按下事件：** 控件按下后执行 **动画播放完成事件：** 动画播放完毕后执行 ----------------------------------------- 如何导入动画 ----------------------------------------- .. attention:: - HMI工程如果使用旋转功能，必须使用动画工具对动画资源进行旋转，否则会导致动画资源不能正常播放 - 打开HMI软件，从右下角的资源栏中选择 ``动画`` -> ``添加`` .. image:: image/动画/导入图片.png :align: center :alt: 动画导入图片 | - 导入成功，会在动画资源下显示 ``资源ID`` 、 ``压缩质量`` 、 ``帧率`` .. image:: image/动画/动画资源.png :align: center :alt: 动画资源 | .. attention:: 我们提供了一个动画工具，方便用户自由编辑、创建动画资源，请参考该章节 :ref:`动画工具` 功能演示 --------------------------------- `点击下载演示工程 `_ | .. tip:: 把工程配置的启动页面(pid)改为当前页面ID可以立即显示此页面。 | 播放动画 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. image:: image/动画/动画demo.png :align: center :alt: 动画demo | - 功能：播放一个动画，实现停止，播放，隐藏，改变播放速度功能 - 原理：通过改变动画控件的属性值实现 - 实现停止、播放、隐藏功能 1、在bl0控件的 ``弹起事件`` 中编写以下脚本 .. code-block:: :linenos: gif0.play =2; //设gif0控件为暂停状态 bl0.txt.str = "播放"; //修改bl0的文本值为播放 2、在bl0控件的 ``按下事件`` 中编写以下脚本 .. code-block:: :linenos: gif0.play =1; //设gif0为播放状态 bl1.val = 0; //设bl1为弹起状态,但不触发弹起事件 bl0.txt.str = "暂停";//修改bl0的文本值为暂停 if(bl2.val == 1) //如果是按下状态，则gif0为隐藏状态 { click(bl2,0); //激活bl2弹起事件，设为显示状态 } 3、在bl1控件的 ``按下事件`` 中编写以下脚本 .. code-block:: :linenos: gif0.play =0; //设gif0控件为停止状态 bl0.val = 0; //设bl0为弹起状态 bl0.txt.str = "播放"; //修改bl0的文本值为播放 4、在bl2控件的 ``弹起事件`` 中编写以下脚本 .. code-block:: :linenos: vis(gif0,1);//gif0设为显示状态 5、在bl2控件的 ``按下事件`` 中编写以下脚本 .. code-block:: :linenos: vis(gif0,0);//gif0设为隐藏状态 - 实现播放速度调节功能 1、在b4控件的 ``弹起事件`` 中编写以下脚本 .. code-block:: :linenos: gif0.speed =30;//设gif0播放速度为30 2、在b2控件的 ``弹起事件`` 中编写以下脚本 .. code-block:: :linenos: gif0.speed =100;//设gif0播放速度为100 3、在b3控件的 ``弹起事件`` 中编写以下脚本 .. code-block:: :linenos: gif0.speed =200;//设gif0播放速度为200