几个最常见的动画表达场景 | Mingcedar Studio

<section id="animation-samples" class="docs-block docs-block-intro docs-block-current"> <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>