声明式状态与 variants

命令式动画是一句句下指令:「现在把 scale 从 1 弹到 1.1」。它精确,但交互一复杂, 「谁在什么时机播什么」就散落在各处事件回调里。声明式换一个思路:预先声明一组 命名状态 (variants) —— rest / hover / press / active,每个状态只是一张目标属性表 (x、scale、rotate、背景色……)。运行时只做一件事:切换当前状态;每个属性各自用一根弹簧,从它此刻的值过渡到新状态的目标。把鼠标移上方块、按下、点击切换,看它在不同状态间连续流动。

手动切换状态 (与方块上的指针交互等价):

rest hover press active

指针移入 = hover,按下 = press,点击 = 在 active / rest 间切换

variant

variant	x	scale	rotate	bg

当前状态 rest scale — rotate —°

切换即重定向:状态切换时,引擎并不为每个属性「从头播一条新曲线」,而是读出该属性 此刻的值与速度,以它为起点新建一根指向新目标的弹簧。所以连续点击 hover → press → active, 上一段过渡哪怕没走完,新过渡也会在当前值无缝接管 (velocity handoff),不会回弹或顿挫。这与中断与重定向是同一机制:variants 只是把它从命令式的「打断旧动画」包装成声明式的「切换状态」。

@vega/anim — variants 表 + 逐属性重定向

每个属性的过渡用一根弹簧,因为弹簧能接住任意初速度,这是 variants 顺滑切换的物理前提;切换时的「从当前值与速度接管」机制,完整展开见中断与重定向。