
- 核心教学目标: 演示如何通过“组内嵌套组 (Group within a Group)”的精妙架构解耦多重变换属性,并在状态机中建立双图层 (Dual Layers) 架构以实现 Hover(悬停)与 Click(点击)动效的无缝并发。
- 背景痛点: 在单一图层上建立动效时,如果 Hover(放大)和 Click(点击回弹)动画同时触发,它们的缩放 (Scale) 属性会在同一数据轨道上发生强行覆盖(Override)或冲突,导致动画卡顿、错位或逻辑死锁。
- 最终业务效益: 跑通了 Rive 完整的高级交互按钮工作流。通过引入视图模型 (View Model) 及内部双状态机图层,不仅让两种不同触发源的动画实现了绝对物理并发与流体级弹簧回弹 (Liquid Bounce),而且将全套逻辑封装于资产内部,交付给前端研发时能实现开箱即用的高阶多态交互。
- “组内嵌套组”解耦定理: 这是 Rive 高阶动效研发的核心避坑指南。由于 Rive 允许对任何 Group 独立应用 Transform 空间,通过将多个组嵌套(如 Hover 组包裹 Click 组),可以将相互冲突的相同属性(Scale)强行拆分到各自独立的父子坐标系中,通过矩阵乘法在运行时叠加,彻底消除了单轨道覆盖冲突。
- 并发状态机图层 (Concurrent State Machine Layers) 逻辑: 状态机中的多个图层(Layers)在运行时是绝对并行且相互独立运行的。
hover图层在持续计算布尔值引起的色彩与缩放过渡的同时,click图层可以瞬间插播高频的触发器回弹,互不干扰。 - 触发器(Trigger)与交替循环节点: 在处理高频点击(如手枪开火、按钮连击)时,如果只连了一条过渡线,动画必须等整条 Timeline 走完才能重置。通过在状态机中拖入两条完全一样的
click时间轴并在其间用一个 Trigger 建立双向交替过渡,可以实现在动画播放中途任意时刻无缝“强刷重启”点击动画,达成零延迟回弹反馈。 - 视图模型 (View Model) 交付契约: 按钮内部的所有交互均由绑定的 View Model 统一代理。这种松耦合设计使得前端在多端运行时(Runtime)接入时,既可以通过指针(Pointer)实现免代码交互,也可以直接通过操控外部状态(修改底层
bool或触发trig)用业务代码强行接管按钮多态,具备极高的架构灵活性。