Mingcedar

所属产品: Mingcedar Studio DESIGNER

动画功能详解 | Mingcedar Studio

工业页面中的动画用于强化状态识别、运动方向和异常提示。动画是否需要配置，应根据它能否帮助用户更快理解设备状态、位置变化或风险信息来判断。

首次发布 最近更新

<section id="preface" class="docs-block docs-block-intro"> <span class="section-kicker">动画</span> <h2>使用前说明</h2> <p>工业页面中的动画用于强化状态识别、运动方向和异常提示。动画是否需要配置，应根据它能否帮助用户更快理解设备状态、位置变化或风险信息来判断。</p> <div class="docs-task-grid"> <article id="preface-item-1" class="docs-task-card"> <span>动画</span> <strong>先记一个原则</strong> <p>用颜色和文本说明设备状态，再按需要增加位移、旋转、缩放或闪烁。动画应帮助用户识别变化，避免干扰关键状态的阅读。</p> </article><article id="preface-item-2" class="docs-task-card"> <span>动画</span> <strong>动画的高价值场景</strong> <p>运动方向、液位变化、指针变化、设备旋转和报警提醒最适合使用动画。这类信息只靠静态图形时识别效率较低，动态表达可以帮助用户更快理解当前状态。</p> </article><article id="preface-item-3" class="docs-task-card"> <span>动画</span> <strong>动画降低可用性的场景</strong> <p>当动画过多、对象持续变化，或仅为了视觉效果而增加动画时，页面重点会被削弱，用户更难识别关键状态。</p> </article> </div> </section> <section id="animation-syntax" class="docs-block"> <span class="section-kicker">语法</span> <h2>动画字段支持哪些写法</h2> <p>动画字段分成数值表达式、布尔表达式、颜色值和模板变量。先分清字段类型，再填写表达式，后面的参数才容易稳定。</p> <div class="docs-detail-list"> <article id="animation-syntax-item-1" class="docs-detail-row"> <strong>数值表达式</strong> <p>Move、Rotate、Scale 的输入值、位移、角度和缩放比例都可以写数值表达式。表达式必须能立即算出数字，不能直接放入异步请求。</p> <ul> <li>固定数值：120</li><li>Tag 数值：ReadTagDouble(&quot;&lt;PLC&gt;.&lt;TAG&gt;&quot;, 0)</li><li>对象尺寸：shape.width、shape.height</li><li>计算表达式：shape.width * 2、shape.height * 0.5</li> </ul> <pre class="docs-code-block"><code>ReadTagDouble(&quot;&lt;PLC&gt;.&lt;TAG&gt;&quot;, 0)

shape.width

shape.height * 0.5</code></pre> </article><article id="animation-syntax-item-2" class="docs-detail-row"> <strong>Setup Script 与结果字段的分工</strong> <p>颜色和文本行为通过 Setup Script 准备数据，再由输出表达式返回结果。Fill color / Border color 对应旧名 Fill / Stroke。几何编辑器没有 Setup Script，直接使用读取方法或 Page Script 函数。</p> <ul> <li>Setup Script：准备变量和函数</li><li>Condition：返回布尔值</li><li>Display Text / Fill color / Border color：返回字符串</li><li>Source value / Angle / Offset / Scale：返回数字</li><li>Visibility：返回布尔值</li> </ul> <pre class="docs-code-block"><code>// Setup Script

var running = ReadTagBoolean(&quot;&lt;PLC&gt;.&lt;RUN_TAG&gt;&quot;, false);

var color = running ? &quot;#22C55E&quot; : &quot;#64748B&quot;;

// Script Color / Fill color

color</code></pre> </article><article id="animation-syntax-item-3" class="docs-detail-row"> <strong>布尔表达式</strong> <p>State Color、Blink Color 的 Condition 和 Script Color 的 Visibility 需要布尔结果。可直接读取布尔 Tag，或通过比较及组合条件得到 true / false。</p> <ul> <li>二值 Tag：ReadTagBoolean(&quot;&lt;PLC&gt;.&lt;TAG&gt;&quot;, false)</li><li>状态码比较：state === 1</li><li>组合条件：running === true &amp;&amp; alarm === false</li> </ul> <pre class="docs-code-block"><code>var running = ReadTagBoolean(&quot;&lt;PLC&gt;.&lt;RUN_TAG&gt;&quot;, false);

var alarm = ReadTagBoolean(&quot;&lt;PLC&gt;.&lt;ALARM_TAG&gt;&quot;, false);

running === true &amp;&amp; alarm === false</code></pre> </article><article id="animation-syntax-item-4" class="docs-detail-row"> <strong>颜色值</strong> <p>颜色值可使用十六进制格式。普通颜色行为通过颜色选择器维护；Script Color 的 Fill color 和 Border color 填写返回颜色字符串的表达式。</p> <ul> <li>固定颜色：&quot;#22C55E&quot;</li><li>脚本颜色：state === 1 ? &quot;#22C55E&quot; : &quot;#EF4444&quot;</li><li>模板颜色：&quot;&lt;FILL_COLOR&gt;&quot;</li> </ul> <pre class="docs-code-block"><code>var state = ReadTagInteger(&quot;&lt;PLC&gt;.&lt;STATE_TAG&gt;&quot;, 0);

state === 1 ? &quot;#22C55E&quot; : &quot;#EF4444&quot;</code></pre> </article><article id="animation-syntax-item-5" class="docs-detail-row"> <strong>字段结果类型清单</strong> <p>Condition、Visibility 返回布尔值；几何字段返回数字；Display Text 和颜色字段返回字符串。模板参数先替换为字符串，数值须显式转换。</p> <ul> <li>布尔值：Condition、Visibility</li><li>数字：几何输入、位移、角度和缩放值</li><li>字符串：Display Text、Fill color、Border color</li><li>模板参数：写在字符串中，按需要转换类型</li> </ul> <pre class="docs-code-block"><code>// Condition

ReadTagBoolean(&quot;&lt;PLC&gt;.&lt;RUN_TAG&gt;&quot;, false)

// At limit maximum

shape.width * 2

// Script Color / Fill color

ReadTagBoolean(&quot;&lt;PLC&gt;.&lt;ALARM_TAG&gt;&quot;, false) ? &quot;#dc2626&quot; : &quot;#16a34a&quot;</code></pre> </article><article id="animation-syntax-item-6" class="docs-detail-row"> <strong>模板变量</strong> <p>模板变量格式为 &lt;NAME&gt;，变量名以字母或下划线开头。模板变量放入脚本表达式时，应写在字符串里。</p> <ul> <li>Tag 字符串：&quot;&lt;PLC&gt;.&lt;RUN_TAG&gt;&quot;</li><li>颜色字符串：&quot;&lt;FILL_COLOR&gt;&quot;</li><li>模板变量参与 JavaScript 表达式时应放入字符串</li> </ul> <pre class="docs-code-block"><code>ReadTagBoolean(&quot;&lt;PLC&gt;.&lt;RUN_TAG&gt;&quot;, false)</code></pre> </article><article id="animation-syntax-item-7" class="docs-detail-row"> <strong>跨页复用放在哪里</strong> <p>PPT 插件不提供全局脚本文档。当前页所需的换算函数、格式化函数、颜色规则和常量放在 Page Script；确实需要跨页高级复用时，使用宿主 runtime、自写 SDK 或模板能力。</p> <ul> <li>同页换算：formatPressure(value)</li><li>同页颜色：getStateColor(state)</li><li>同页常量：const QUALITY_BAD_COLOR = &quot;#EF4444&quot;</li><li>跨页高级能力交给宿主或 SDK</li> </ul> </article><article id="animation-syntax-item-8" class="docs-detail-row"> <strong>Page Script 顶层变量和函数</strong> <p>当前页动画字段可引用 Page Script 顶层 var、let、const 和 function，用于共享量程、Tag 名和换算函数。</p> <ul> <li>顶层变量：const levelMax = 100</li><li>顶层 Tag 名称：var levelTag = &quot;&lt;PLC&gt;.&lt;LEVEL_TAG&gt;&quot;</li><li>顶层函数：function readLevel() { ... }</li><li>动画字段：readLevel() 或 levelMax</li> </ul> <pre class="docs-code-block"><code>const levelMax = 100;

var levelTag = &quot;&lt;PLC&gt;.&lt;LEVEL_TAG&gt;&quot;;

function readLevel() {

return ReadTagDouble(levelTag, 0);

}

// Scale / Source value

readLevel()

// Scale / Source maximum

levelMax</code></pre> </article><article id="animation-syntax-item-9" class="docs-detail-row"> <strong>页面准备回调与初始动画</strong> <p>window.hqVisuDesignerPageReady 会在页面运行时准备完成后执行，适合做组件初始化、文本设置和显示控制。用于初始动画计算的值，应放在当前页 Page Script 顶层。</p> <ul> <li>初始动画值优先引用顶层变量或函数</li><li>ready 回调适合调用 hqVisuDesigner.setComponentText 等运行时方法</li><li>页面脚本文档只初始化一次</li> </ul> <pre class="docs-code-block"><code>var pumpVisible = true;

window.hqVisuDesignerPageReady = function() {

hqVisuDesigner.writeVariable(&quot;pumpVisible&quot;, pumpVisible);

hqVisuDesigner.refreshView();

};</code></pre> </article><article id="animation-syntax-item-10" class="docs-detail-row"> <strong>位语法</strong> <p>位读取用 TAG[bit]，如 PLC_LINE01.PUMP01.TAG[0] 或 &lt;PLC&gt;.&lt;TAG&gt;[1]。bit 为 0–31，且须在父 Tag 位宽内。写位使用 Write Tag Bit，Target Tag 填父 Tag，Bit Index 填位号。</p> <ul> <li>读取位语法：`TAG[bit]`</li><li>读取位：ReadTagBoolean(&quot;&lt;PLC&gt;.&lt;TAG&gt;[1]&quot;, false)</li><li>写位目标：&quot;&lt;PLC&gt;.&lt;TAG&gt;&quot;</li><li>Bit Index：0 到 31</li><li>Bit Action：Set、Reset、Toggle</li> </ul> <pre class="docs-code-block"><code>ReadTagBoolean(&quot;&lt;PLC&gt;.&lt;TAG&gt;[1]&quot;, false)</code></pre> </article><article id="animation-syntax-item-11" class="docs-detail-row"> <strong>异步逻辑放置位置</strong> <p>表达式须同步返回结果。fetch、Promise 或定时器放在 Page Script 或 hqVisuDesignerPageReady，将结果存入页面变量供表达式读取。设备写入由真实用户操作发起。</p> <ul> <li>表达式字段：立即返回值</li><li>Page Script / hqVisuDesignerPageReady：处理异步准备</li><li>动画字段：读取变量、Tag 或函数结果</li><li>外部数据建议由 Mingcedar 接口或脚本层整理后再进入页面</li> </ul> </article><article id="animation-syntax-item-12" class="docs-detail-row"> <strong>行为条件与数据质量</strong> <p>按钮和 Script Color 的 Condition 控制是否执行；State Color 的 Condition 选择 TRUE / FALSE 状态。Quality Override 控制质量边框或隐藏。Active、Enabled 仅用于部分旧配置或特定编辑器。</p> <ul> <li>Condition：按行为类型填写执行条件或状态条件</li><li>Quality Override：启用 Follow data quality (border / hide)</li><li>Hide when quality is bad：质量异常时隐藏对象</li><li>业务状态仍由状态 Tag 或规则表达</li> </ul> <pre class="docs-code-block"><code>var enabled = ReadTagBoolean(&quot;&lt;PLC&gt;.&lt;ENABLE_TAG&gt;&quot;, false);

var qualityGood = ReadTagQualityGood(&quot;&lt;PLC&gt;.&lt;VALUE_TAG&gt;&quot;);

// Script Color / Condition

enabled &amp;&amp; qualityGood</code></pre> </article> </div> </section><section id="move-detail" class="docs-block"> <span class="section-kicker">Move</span> <h2>Move：用数值映射对象位移</h2> <p>Move 把一个输入值换算成一个方向上的位移。它适合对象整体移动，不适合对象自身变长或缩短。</p> <div class="docs-detail-list"> <article id="move-detail-item-1" class="docs-detail-row"> <strong>功能是什么</strong> <p>Move 读取一个数值，把这个数值按输入范围换算成百分比，再把百分比映射到 At limit minimum 和 At limit maximum 之间，最终让对象沿水平或垂直方向移动。</p> <ul> <li>0% 对应 At limit minimum</li><li>100% 对应 At limit maximum</li><li>中间值按比例移动</li> </ul> </article><article id="move-detail-item-2" class="docs-detail-row"> <strong>关键字段</strong> <p>Source value 返回数值；Limit minimum / Limit maximum 是实际换算范围；MOVEMENT OUTPUT 中的 At limit minimum / At limit maximum 为位移；Move axis 指定方向。</p> <ul> <li>Source value：数值表达式</li><li>Source minimum / Source maximum：源范围及别名</li><li>Limit minimum / Limit maximum：实际夹取和归一化范围</li><li>At limit minimum / At limit maximum：端点位移</li><li>Move axis：Horizontal 或 Vertical</li> </ul> </article><article id="move-detail-item-3" class="docs-detail-row"> <strong>源范围与输入限制</strong> <p>源范围仅提供 ValueMin / ValueMax 别名；输入限制默认独立为 0、100。要跟随源范围，分别将 Limit minimum / Limit maximum 设为 ValueMin / ValueMax。</p> <ul> <li>实际映射以 Limit minimum / Limit maximum 为准</li><li>未启用隐藏时，超限输入限制在端点</li><li>Hide outside input limits 控制超限时隐藏</li> </ul> </article><article id="move-detail-item-4" class="docs-detail-row"> <strong>支持写法</strong> <p>Offset 不是百分比，而是画布距离。可以写固定数字，也可以使用当前对象尺寸。</p> <ul> <li>向右移动一个对象宽度：shape.width</li><li>向左移动一个对象宽度：-shape.width</li><li>向下移动半个对象高度：shape.height * 0.5</li><li>向上移动两个对象高度：-shape.height * 2</li> </ul> <pre class="docs-code-block"><code>Source value = ReadTagDouble(&quot;&lt;PLC&gt;.&lt;POSITION_TAG&gt;&quot;, 0)

Source minimum = 0

Source maximum = 100

At limit minimum = 0

At limit maximum = shape.width

Move axis = Horizontal</code></pre> </article><article id="move-detail-item-5" class="docs-detail-row"> <strong>配置顺序</strong> <p>先确定来源 Tag 和量程，再确定移动方向，最后填写 Offset。配置完成后，再决定是否开启超限隐藏和质量边框。</p> <ul> <li>第一步：确认输入值和量程</li><li>第二步：选择 Horizontal 或 Vertical</li><li>第三步：填写 At limit minimum / At limit maximum</li><li>第四步：按需要开启 Hide outside input limits</li><li>第五步：按需要开启 Quality Border</li> </ul> </article><article id="move-detail-item-6" class="docs-detail-row"> <strong>适用和边界</strong> <p>滑块、行程、位置指示适合 Move。液位柱、进度条和填充条通常不应使用 Move，因为它们表达的是长度变化，应使用 Scale。</p> </article> </div> </section><section id="rotate-detail" class="docs-block"> <span class="section-kicker">Rotate</span> <h2>Rotate：用角度表达方向和旋转</h2> <p>Rotate 根据角度值旋转对象。真正关键的是 Pivot，也就是对象围绕哪个位置旋转。</p> <div class="docs-detail-list"> <article id="rotate-detail-item-1" class="docs-detail-row"> <strong>功能是什么</strong> <p>Rotate 读取当前角度，把对象围绕指定 Pivot 旋转。它适合风机、指针、阀门和方向件。</p> <ul> <li>Rotation input 决定当前角度</li><li>Maximum angle 限制最大角度</li><li>Pivot 决定旋转中心</li> </ul> </article><article id="rotate-detail-item-2" class="docs-detail-row"> <strong>关键字段</strong> <p>Rotation input 返回角度（度）；Maximum angle 的绝对值定义正负两侧的允许范围；PIVOT POINT 选择旋转支点。当前界面提供五个预设支点，不提供自定义 X / Y 输入框。</p> <ul> <li>Rotation input：同步角度表达式</li><li>Maximum angle：例如 90 表示 -90° 到 +90°</li><li>PIVOT POINT：Center、Top、Bottom、Left、Right</li> </ul> </article><article id="rotate-detail-item-3" class="docs-detail-row"> <strong>角度值和运行状态要分开</strong> <p>Rotate 负责角度或旋转表达，不负责判断设备是否处于运行状态。风机、指针和阀门常见做法是：Rotate 表达方向或角度，State Color 表达运行、停止、报警或手自动状态。</p> <ul> <li>角度来源：Rotation input</li><li>运行状态：State Color 或 Multi-State Color</li><li>数据质量：Quality Border</li> </ul> </article><article id="rotate-detail-item-4" class="docs-detail-row"> <strong>支持写法</strong> <p>角度字段可以直接读取 Tag，也可以根据百分比换算成角度。</p> <ul> <li>直接角度：ReadTagDouble(&quot;&lt;PLC&gt;.&lt;ANGLE_TAG&gt;&quot;, 0)</li><li>百分比换算：ReadTagDouble(&quot;&lt;PLC&gt;.&lt;SPEED_TAG&gt;&quot;, 0) * 3.6</li><li>读取原始角度：shape.rotation</li> </ul> <pre class="docs-code-block"><code>Rotation input = ReadTagDouble(&quot;&lt;PLC&gt;.&lt;ANGLE_TAG&gt;&quot;, 0)

Maximum angle = 360

Pivot = Center</code></pre> </article><article id="rotate-detail-item-5" class="docs-detail-row"> <strong>配置顺序</strong> <p>先确认对象的机械中心，再选择 Pivot。对象中心选错时，即使角度正确，旋转也会显得不稳定。</p> <ul> <li>第一步：确认对象原始方向</li><li>第二步：选择 Pivot</li><li>第三步：填写 Rotation input</li><li>第四步：填写 Maximum angle</li><li>第五步：按需要开启质量边框</li> </ul> </article><article id="rotate-detail-item-6" class="docs-detail-row"> <strong>适用和边界</strong> <p>风机、指针和阀门适合 Rotate。对象只是左右移动时应使用 Move；对象长度变化时应使用 Scale。</p> </article> </div> </section><section id="scale-detail" class="docs-block"> <span class="section-kicker">Scale</span> <h2>Scale：用比例表达增长和缩短</h2> <p>Scale 根据输入值改变对象尺寸。它的关键不是放大多少，而是哪一边固定。</p> <div class="docs-detail-list"> <article id="scale-detail-item-1" class="docs-detail-row"> <strong>功能是什么</strong> <p>Scale 把输入值换算成一个比例，让对象从指定边缘向外增长或缩短。它适合液位、进度条、负载条和填充条。</p> <ul> <li>At limit minimum 对应最低比例</li><li>At limit maximum 对应最高比例</li><li>Moving edge 决定移动边，对边固定</li> </ul> </article><article id="scale-detail-item-2" class="docs-detail-row"> <strong>关键字段</strong> <p>Source value 通过 Limit minimum / Limit maximum 映射到 SCALE OUTPUT 两个端点的缩放因子。Moving edge 指定移动边，对边固定。</p> <ul> <li>At limit minimum / At limit maximum：例如 0 / 1 或 0.5 / 1.5</li><li>Moving edge = Top：顶边移动、底边固定</li><li>Moving edge = Right：右边移动、左边固定</li><li>Moving edge = Left：左边移动、右边固定</li> </ul> </article><article id="scale-detail-item-3" class="docs-detail-row"> <strong>对象绘制方式会影响效果</strong> <p>Scale 适合对一个独立填充对象做比例变化。液位、进度条和负载条通常应拆成背景容器和前景填充对象，再让前景对象按固定边增长。不要直接缩放包含文字、边框和图标的复杂组合，否则文字和边框也会跟随变形。</p> <ul> <li>背景容器保持固定</li><li>前景填充对象参与 Scale</li><li>文字和单位建议单独放置</li><li>复杂设备组不直接整体 Scale</li> </ul> </article><article id="scale-detail-item-4" class="docs-detail-row"> <strong>支持写法</strong> <p>Scale 的输入值使用数值表达式，比例字段使用数值或计算表达式。</p> <ul> <li>液位：At limit minimum = 0，At limit maximum = 1</li><li>轻微变化：At limit minimum = 0.8，At limit maximum = 1.2</li><li>输入值：ReadTagDouble(&quot;&lt;PLC&gt;.&lt;LEVEL_TAG&gt;&quot;, 0)</li> </ul> <pre class="docs-code-block"><code>Source value = ReadTagDouble(&quot;&lt;PLC&gt;.&lt;LEVEL_TAG&gt;&quot;, 0)

Source minimum = 0

Source maximum = 100

At limit minimum = 0

At limit maximum = 1

Moving edge = Top</code></pre> </article><article id="scale-detail-item-5" class="docs-detail-row"> <strong>配置顺序</strong> <p>先确定对象应从哪一边增长，再设置 Moving edge。液位类对象通常固定底部，进度条通常固定左侧。</p> <ul> <li>第一步：确认增长方向</li><li>第二步：设置 Moving edge</li><li>第三步：填写输入量程</li><li>第四步：填写 At limit minimum / At limit maximum</li><li>第五步：按需要叠加 Range Color</li> </ul> </article><article id="scale-detail-item-6" class="docs-detail-row"> <strong>适用和边界</strong> <p>Scale 适合长度或填充比例变化。对象整体移动时使用 Move；对象转动时使用 Rotate。</p> </article> </div> </section><section id="blink-detail" class="docs-block"> <span class="section-kicker">Blink</span> <h2>Blink：用闪烁表达强提醒</h2> <p>Blink Color 是提醒类行为，只应用于少数关键状态。它不适合普通运行状态。</p> <div class="docs-detail-list"> <article id="blink-detail-item-1" class="docs-detail-row"> <strong>功能是什么</strong> <p>Blink Color 在条件成立时，让对象在 ON 和 OFF 两组显示状态之间切换。条件不成立时，可以使用 False 状态。</p> <ul> <li>ON 状态：条件成立时的闪烁亮态</li><li>OFF 状态：条件成立时的闪烁暗态</li><li>False 状态：条件不成立时的普通状态</li> </ul> </article><article id="blink-detail-item-2" class="docs-detail-row"> <strong>关键字段</strong> <p>Setup Script 准备数据，Condition 返回布尔值；Action 中的 TRUE、FALSE 控制是否应用对应状态。各输出通道按 Blink ON、Blink OFF、Condition FALSE 三列配置。</p> <ul> <li>Condition：布尔表达式</li><li>Fill color / Border color：按状态配置颜色</li><li>Visibility：按状态配置显示或隐藏</li><li>FALSE 默认关闭，需要静止外观时启用</li><li>当前编辑器没有 Blink Interval 输入框</li> </ul> </article><article id="blink-detail-item-3" class="docs-detail-row"> <strong>闪烁的使用范围</strong> <p>闪烁用于需要关注的报警或异常状态。当前编辑器不提供速度或间隔设置。应限制同时闪烁的对象数量，并用静止文字或状态色补充说明。</p> <ul> <li>报警或异常状态按项目规范配置</li><li>常规运行和停止可使用 State Color</li><li>Condition FALSE 需同时启用 FALSE</li><li>数据质量通过 Quality Override 单独表达</li> </ul> </article><article id="blink-detail-item-4" class="docs-detail-row"> <strong>支持写法</strong> <p>Condition 可以读取布尔 Tag，也可以组合状态码和质量判断。</p> <pre class="docs-code-block"><code>// Setup Script

var alarm = ReadTagBoolean(&quot;&lt;PLC&gt;.&lt;ALARM_TAG&gt;&quot;, false);

var qualityGood = ReadTagQualityGood(&quot;&lt;PLC&gt;.&lt;ALARM_TAG&gt;&quot;);

// Condition

alarm &amp;&amp; qualityGood</code></pre> </article><article id="blink-detail-item-5" class="docs-detail-row"> <strong>配置顺序</strong> <p>先填写触发条件，再配置 Blink ON 和 Blink OFF。需要条件为假时保持静止外观，应启用 FALSE 并设置 Condition FALSE；最后检查质量覆盖。</p> <ul> <li>填写 Condition</li><li>启用需要的输出通道</li><li>配置 Blink ON / Blink OFF</li><li>按需要启用 FALSE 并配置 Condition FALSE</li><li>核对 Good / Bad 质量显示</li> </ul> </article><article id="blink-detail-item-6" class="docs-detail-row"> <strong>适用和边界</strong> <p>报警灯、故障块、超限提醒适合 Blink。运行、停止、自动、手动等普通状态优先使用 State Color 或 Multi-State Color。</p> </article> </div> </section><section id="range-detail" class="docs-block"> <span class="section-kicker">Range</span> <h2>Range：用区间表达连续值状态</h2> <p>Range Color 把一个数值拆成多个区间，用颜色、边框或显隐表达当前区间。</p> <div class="docs-detail-list"> <article id="range-detail-item-1" class="docs-detail-row"> <strong>功能是什么</strong> <p>Range Color 读取一个数值，把它落入预设 Limits 的区间，再根据区间选择颜色、边框和显隐状态。</p> <ul> <li>适合连续值</li><li>适合低、中、高、危险等区间</li><li>默认 4 个分割点形成 5 个区间</li> </ul> </article><article id="range-detail-item-2" class="docs-detail-row"> <strong>关键字段</strong> <p>Range value 返回数值；Range actions 的 Upper limit 为区间上限，Fill、Border、Visibility 决定各区间显示。支持 1–24 个区间，N 个区间对应 N−1 个递增上限；仅一个区间时无需设置上限。</p> <ul> <li>Range value：数值表达式</li><li>Upper limit：递增有限数值</li><li>Fill / Border：各区间颜色</li><li>Visibility：各区间显隐</li> </ul> </article><article id="range-detail-item-3" class="docs-detail-row"> <strong>Limits 区间划分</strong> <p>四个递增上限 L1、L2、L3、L4 形成五段：值 ≤ L1、L1 &lt; 值 ≤ L2、L2 &lt; 值 ≤ L3、L3 &lt; 值 ≤ L4、值 &gt; L4。上限属于当前区间，最终区间不包含最后上限。</p> <ul> <li>Limits 示例：20, 40, 60, 80</li><li>形成区间：≤20、(20,40]、(40,60]、(60,80]、&gt;80</li><li>先确定单位和工程量程，再确定区间颜色</li> </ul> </article><article id="range-detail-item-4" class="docs-detail-row"> <strong>支持写法</strong> <p>Range value 通常读取模拟量 Tag。以下各段分别填写到标注字段；Upper limit 按递增顺序填写。</p> <pre class="docs-code-block"><code>// Setup script

var temperature = ReadTagDouble(&quot;PLC_LINE01.OVEN01.TEMPERATURE&quot;, 0);

// Range value

temperature

// Upper limit: 20, 40, 60, 80

// Final (+∞): values above 80</code></pre> </article><article id="range-detail-item-5" class="docs-detail-row"> <strong>配置顺序</strong> <p>先确认数值单位和量程，再确定区间边界。边界写完后，再设置每个区间的颜色和显隐。</p> <ul> <li>第一步：确认 Tag 和单位</li><li>第二步：填写 Range value</li><li>第三步：填写 Limits</li><li>第四步：设置每个区间颜色</li><li>第五步：按需要开启质量边框</li> </ul> </article><article id="range-detail-item-6" class="docs-detail-row"> <strong>适用和边界</strong> <p>温度、压力、负载、液位等连续值适合 Range。固定状态码使用 Discrete Color；复杂优先级状态使用 Multi-State Color。</p> </article> </div> </section><section id="animation-selection" class="docs-block"> <span class="section-kicker">选型</span> <h2>先选对动画类型，再谈参数</h2> <p>动画配置首先要确认表达目标。类型选错后，即使参数正确，也可能无法准确表达设备状态。</p> <div class="docs-detail-list"> <article id="animation-selection-item-1" class="docs-detail-row"> <strong>Blink：用于关键提醒</strong> <p>Blink 最适合报警和强提醒。它不用于表达连续过程，而用于提示用户关注少数关键对象。</p> </article><article id="animation-selection-item-2" class="docs-detail-row"> <strong>Move：位置在变，就用位移表达</strong> <p>当对象本质上是在页面里沿某个方向移动时，例如滑块、行程位置、水平推进件，应使用 Move 表达位置变化。</p> </article><article id="animation-selection-item-3" class="docs-detail-row"> <strong>Rotate：方向或角度在变，就用旋转表达</strong> <p>Rotate 适合指针、风机、阀门和方向件。配置重点是旋转中心与对象机械特征一致。</p> </article><article id="animation-selection-item-4" class="docs-detail-row"> <strong>Scale：长度在变，就用缩放表达</strong> <p>Scale 最适合液位、进度条、增长条、长度变化件。它真正关心的是哪一边固定、哪一边变化。</p> </article><article id="animation-selection-item-5" class="docs-detail-row"> <strong>Range：值跨区间变化时，动态和颜色往往一起看</strong> <p>Range 本身可以是颜色区间，也可以和几何范围映射配合。它最适合让用户快速判断数值落在哪个段位，而不是只看一个单一数字。</p> </article> </div> <div class="docs-note-grid"> <figure id="animation-selection-image-1" class="docs-note-card manual-doc-image-card"> <img src="/WEB_img/HQPPT/ColorBlinkBehaviorEditorForm.png" alt="Blink 动画" loading="lazy" decoding="async"> <figcaption> <strong>Blink 动画</strong> <p>Blink 只适合把注意力拉向少数关键对象。</p> </figcaption> </figure><figure id="animation-selection-image-2" class="docs-note-card manual-doc-image-card"> <img src="/WEB_img/HQPPT/GeometryBehaviorEditorFormPosition.png" alt="Move 动画" loading="lazy" decoding="async"> <figcaption> <strong>Move 动画</strong> <p>位置真的在变时，优先用 Move，而不是绕着写脚本。</p> </figcaption> </figure><figure id="animation-selection-image-3" class="docs-note-card manual-doc-image-card"> <img src="/WEB_img/HQPPT/GeometryBehaviorEditorForm.png" alt="Rotate 动画" loading="lazy" decoding="async"> <figcaption> <strong>Rotate 动画</strong> <p>角度变化和方向感最适合用 Rotate 表达。</p> </figcaption> </figure><figure id="animation-selection-image-4" class="docs-note-card manual-doc-image-card"> <img src="/WEB_img/HQPPT/GeometryBehaviorEditorFormSize.png" alt="Scale 动画" loading="lazy" decoding="async"> <figcaption> <strong>Scale 动画</strong> <p>长度变化和增长效果通常更适合 Scale。</p> </figcaption> </figure> </div> </section><section id="move-scale-compare" class="docs-block"> <span class="section-kicker">对比</span> <h2>Move 和 Scale 的选择边界</h2> <p>Move 表达对象位置变化，Scale 表达对象尺寸或填充比例变化。二者应按对象物理含义区分。</p> <div class="docs-detail-list"> <article id="move-scale-compare-item-1" class="docs-detail-row"> <strong>Move 优先的场景</strong> <p>如果对象整体坐标发生变化，例如滑块向右移动、行程块沿轨道移动、位置标记上移，应选择 Move。</p> </article><article id="move-scale-compare-item-2" class="docs-detail-row"> <strong>Scale 优先的场景</strong> <p>如果对象一边固定，另一边增长或收缩，例如液位柱向上增长、进度条向右增长，应选择 Scale。</p> </article><article id="move-scale-compare-item-3" class="docs-detail-row"> <strong>液位类对象的典型选择</strong> <p>液位由背景容器和前景填充对象组成。前景使用 Scale，Moving edge 设为 Top；Move 会移动整个对象，不适合液位填充。</p> </article> </div> <div class="docs-note-grid"> <figure id="move-scale-compare-image-1" class="docs-note-card manual-doc-image-card"> <img src="/WEB_img/HQPPT/GeometryBehaviorEditorFormPosition.png" alt="Move 用法" loading="lazy" decoding="async"> <figcaption> <strong>Move 用法</strong> <p>整体平移类效果看 Move。</p> </figcaption> </figure><figure id="move-scale-compare-image-2" class="docs-note-card manual-doc-image-card"> <img src="/WEB_img/HQPPT/GeometryBehaviorEditorFormSize.png" alt="Scale 用法" loading="lazy" decoding="async"> <figcaption> <strong>Scale 用法</strong> <p>一边固定、一边增长类效果看 Scale。</p> </figcaption> </figure> </div> </section><section id="animation-rules" class="docs-block"> <span class="section-kicker">规则</span> <h2>动画数量控制：越重要的状态，越应配置动画</h2> <p>动画不应平均分配给所有对象。清晰稳定的页面通常只在最需要动态表达的层级配置动画。</p> <div class="docs-detail-list"> <article id="animation-rules-item-1" class="docs-detail-row"> <strong>把动画留给最关键的信息</strong> <p>优先给报警、运动方向、旋转设备、液位变化和进度变化这类静态表达不够直观的信息加动画。普通状态色、普通文字和普通按钮通常不需要额外动画。</p> </article><article id="animation-rules-item-2" class="docs-detail-row"> <strong>动画和颜色应分层表达</strong> <p>如果对象已经通过颜色清晰表达状态，通常不需要再配置同等强度的动画。颜色和动画应分层表达：颜色负责基础状态，动画只强化重点状态。</p> </article><article id="animation-rules-item-3" class="docs-detail-row"> <strong>整页动画应控制数量</strong> <p>如果一整页大量对象同时闪烁、旋转或缩放，用户注意力会被分散，关键状态反而不突出。建议只在报警、方向、旋转设备和关键过程变化上配置动画。</p> </article><article id="animation-rules-item-4" class="docs-detail-row"> <strong>共享计算与附加显示</strong> <p>当前几何编辑器没有 Post Operations 输入区。可复用的换算函数放 Page Script，文本、边框和显隐交给相应行为；设备写入使用真实用户触发的交互入口。</p> <ul> <li>Page Script 提供同页换算函数</li><li>几何输入直接返回数值</li><li>颜色和文本使用相应行为</li><li>设备写入不放入动画表达式</li> </ul> </article> </div> </section><section id="animation-samples" class="docs-block"> <span class="section-kicker">示例</span> <h2>几个最常见的动画表达场景</h2> <p>这一节不讲抽象概念，直接讲页面里最容易遇到的几种动态表达。</p> <div class="docs-detail-list"> <article id="animation-samples-item-1" class="docs-detail-row"> <strong>风机运行：旋转 + 运行状态色</strong> <p>风机通常最适合用 Rotate 表达运行，同时配置基础运行状态色。旋转表达设备正在转动，颜色表达设备是否处于运行态。</p> </article><article id="animation-samples-item-2" class="docs-detail-row"> <strong>报警灯：闪烁 + 报警文本</strong> <p>报警灯最适合 Blink，旁边再配 Script Text 或 Tag Text 显示报警内容。这样用户既知道有问题，也知道具体是什么问题。</p> </article><article id="animation-samples-item-3" class="docs-detail-row"> <strong>液位条：Scale + 区间颜色</strong> <p>液位通常最适合 Scale 从底边往上长，再叠一个 Range Color 或状态区间颜色。这样既有形态变化，也有区间感知。</p> </article><article id="animation-samples-item-4" class="docs-detail-row"> <strong>滑块 / 行程：Move + 位置区间</strong> <p>滑块、行程件和推进块更适合 Move。必要时可以再根据位置区间改变颜色，但不要把本该位移的对象做成整体缩放。</p> </article> </div> <div class="docs-note-grid"> <figure id="animation-samples-image-1" class="docs-note-card manual-doc-image-card"> <img src="/WEB_img/HQPPT/ColorRangeBehaviorEditorForm.png" alt="Range 动态表达" loading="lazy" decoding="async"> <figcaption> <strong>Range 动态表达</strong> <p>区间感和动态感结合起来时，用户更容易快速读懂数值状态。</p> </figcaption> </figure> </div> </section>