大家好，我是宏集科技鲁工，给大家分享不一样的工业物联网信息！

最近做了一个风车旋转的小demo，有朋友问我EXOR HMI里怎么实现控件的动画效果。其实很简单，JMobile Studio提供了强大的脚本引擎，通过JavaScript我们可以轻松控制控件的各种属性，包括旋转、平移、缩放等等。今天就以这个风车demo为例，带大家一步步实现控件的自定义动画效果。

一、Demo效果展示

这个demo实现了一个四色风车的旋转动画，页面上有四个按钮，可以分别控制风车正转、反转、高速旋转和低速旋转。效果就像下面这个动图一样。

二、页面搭建

首先在JMobile Studio的页面编辑器中，拖入一个Image图像控件，点击导入一张风车的PNG图片。图片最好是正方形的，旋转中心就在图片正中心，转起来才不会偏移。

1. 添加四个控制按钮

再拖入四个标准按钮控件，按钮上的文字分别设置为"正转"、"反转"、"高速"、"低速"。按钮的位置可以根据自己的喜好排列在风车下方或右侧。

2. 页面整体布局

调整好控件大小和位置，风车放在页面中间偏上的位置，四个按钮整齐排列在下方，整体界面保持简洁清晰。

三、核心脚本实现

接下来是最关键的部分，我们通过JavaScript脚本来控制风车的旋转。在JMobile Studio中打开脚本编辑器，写入以下代码：

//默认速度和方向 var speed = 20; var direction = 1; var timer = page.setInterval(rotation, 50); function rotation(){ var wgt = page.getWidget("ImageWgt1"); var angel = wgt.getProperty("rot"); angel = angel + direction*speed; wgt.setProperty("rot", angel); } //正向旋转 function BtnStd1_btn_onMouseClick(me, eventInfo) { direction = 1; } //反向旋转 function BtnStd2_btn_onMouseClick(me, eventInfo) { direction = -1; } //高速旋转 function BtnStd3_btn_onMouseClick(me, eventInfo) { speed = 30; } //低速旋转 function BtnStd4_btn_onMouseClick(me, eventInfo) { speed = 10; }

1. 定义两个全局变量，speed表示旋转速度，数值越大转得越快；direction表示旋转方向，1是正转，-1是反转。初始设置速度为20，方向为正转。

2. 使用page.setInterval()函数设置一个定时器，每隔50毫秒执行一次rotation函数。在rotation函数中，先通过page.getWidget()函数获取到风车图片控件的所有属性，然后读取它当前的旋转角度属性"rot"，再根据速度和方向计算新的角度，最后把新角度写回去，这样风车就转起来了。

3. 接下来是四个按钮的点击事件函数：

正转按钮点击时，把direction设为1

反转按钮点击时，把direction设为-1

高速按钮点击时，把speed设为30

低速按钮点击时，把speed设为10

这里需要说明一下，speed变量控制每次旋转增加的角度值，speed越小，每次旋转增加的角度也越小，转起来就越慢；speed越大，每次旋转增加的角度越大，看起来就转得越快。

四、实现原理解析

1. 控件属性控制

JMobile Studio中的每个控件都有很多属性可以通过脚本读写，比如位置属性x和y、大小属性w和h、旋转属性rot等等。我们这个demo用的就是rot属性，它的值是一个角度数值，单位是度。

2. 定时器驱动动画

动画的本质就是每隔一小段时间改变一下控件的属性，人眼看起来就像是在动。setInterval就是干这个的，它可以按照设定的时间间隔周期性地执行某个函数。我们把修改控件属性的逻辑放在这个函数里，就实现了连续的动画效果。

3. 变量控制状态

通过speed和direction这两个全局变量，我们可以在运行时动态改变动画的状态。按钮点击事件只需要修改变量的值，不需要去操作定时器本身，逻辑非常清晰。

五、扩展玩法

1. 启停控制

再加一个开始/停止按钮，用一个布尔变量控制定时器的执行。在rotation函数开头判断一下这个变量，如果是停止状态就直接return，不执行旋转逻辑。

2. 渐变加速/减速

不要让速度一下子跳变，而是每次按钮点击时speed逐步增加或减少，做一个缓动效果，看起来更自然。

3. 组合动画

除了旋转，还可以同时修改其他属性，比如风车一边旋转一边上下浮动，或者根据转速改变透明度，实现更丰富的视觉效果。

4. 数据联动

把旋转速度和某个实际的设备变量关联起来，比如电机转速越快，风车转得也越快，做成一个可视化的转速指示器。

为了方便大家更好的上手，我把demo链接也附上，大家可以下载进行测试。
链接: https://pan.baidu.com/s/1u77KxJ-ONsl-3gq3fq0CVA?pwd=p7ii 提取码: p7ii