文档

配置动画

更新时间:

为组件配置动画效果。

选中画布上的某个组件后,在组态编辑器的右侧面板中,可以看到“动画”一栏。组件动画包含四种:缩放、移动、旋转和不透明度。通过点击每种动画的“显示”切换按钮来控制对应动画是否生效。注:缩放、移动和旋转动画只支持同时生效一个,优先级:缩放>移动>旋转。

截屏2022-12-13 上午11

名词解释

1) 初始:组件动画效果的初始状态,如宽高比例、xy位置、角度和不透明度。

2) 结束:组件动画效果的结束状态,如宽高比例、xy位置、角度和不透明度。

3) 动画时长:动画效果从初始状态到结束状态所需的时间,单位秒。

4) 循环动画:是否开启动画循环显示的效果。

5) 反向: 是否设置动画反向显示,即效果从“结束”状态到“初始”状态。

6) 播放方式: 动画播放的触发方式,包括“自动播放”、“点击播放“和“数据源播放”。其中“自动播放”为无须任何触发条件,在运行态自动启动动画效果,“点击播放”是通过点击组件中间的播放按钮来启动和停止动画,“数据源播放”为通过配置某个数据源,根据数据源数值来控制播放启停。

1. 缩放动画

通过配置缩放动画,可以实现组件沿着其中心位置的缩小或者放大效果。在缩放动画配置中,控制是否显示动画、设置动画时长、初始比例、结束比例、是否开启循环动画、是否反向执行动画、动画播放方式。除“播放方式”之外的动画属性可以关联数据源。

案例:设置告警信息的缩放动画,实现明显地提示告警的效果。设置在2秒内缩放比例从100%增加到150%,自动播放,并开启循环动画,具体配置项如下图所示。

截屏2022-12-13 上午10

运行态效果如下图所示:

缩放动画

2. 移动动画

通过配置移动动画,可以实现位置的移动。在移动动画配置中,可以控制是否显示动画、设置动画时长、初始位置、结束位置、是否开启循环动画、是否反向执行动画、动画播放方式。除“播放方式”之外的动画属性可以关联数据源。

案例:为机械臂配置移动动画,实现机械臂移动效果。设置在5秒内从(10,10)移动到(100,100),播放方式为点击播放,具体动画配置项如下图所示。

截屏2022-12-13 上午11

运行时效果:点击控制播放移动动画,如下图所示。

移动动画

3. 旋转动画

通过配置旋转动画,可以实现组件绕着其中心位置的旋转效果。在移旋动画配置中,可以控制是否显示动画、设置动画时长、初始角度、结束角度、是否开启循环动画、是否反向执行动画、动画播放方式。除“播放方式”之外的动画属性可以关联数据源。

案例:为雪花状的扇叶类设备配置动画,实现设备旋转的效果。设置在2秒内从0-360度旋转,并循环动画,反向旋转,播放方式为数据源,并为控制播放数据源配置对应的变量(该变量的值在true和false之间切换),具体动画配置项如下图所示。

截屏2022-12-13 下午3

运行时效果:当控制播放的数据源值为true时,显示旋转效果,当控制播放的数据源为false时,停止旋转。类似一个风扇的开关控制。具体动画效果如下图所示。

旋转动画

4. 不透明度动画

通过配置不透明度动画,可以实现组件不透明度变化引起的闪烁效果。在不透明度动画配置中,可以控制是否显示动画、设置动画时长、初始不透明角度、结束不透明角度、是否开启循环动画、是否反向执行动画、动画播放方式。除“播放方式”之外的动画属性可以关联数据源。

案例:为指示灯配置不透明度动画,在2s秒内不透明度从100%到0%,具体动画配置项如下图所示。

截屏2022-12-13 下午3

运行时效果:指示灯实现闪烁效果,具体动画效果如下图所示。

不透明度动画