12 · 动画¶

FlowUI 动画是双轨，并共享缓动曲线与 Theme.Motion（含减弱动态效果）。

轨道	API	用途
A · 声明式	`Style.Transition`	颜色、透明度、变换等属性白名单插值
B · 命令式	`Tween` / `Spring` / `Timeline`	按 key 的 float / 关键帧 / 布局矩形

两者都需要稳定 Key。

轨道 A：Style Transition¶

ui.Background(ui.TokenSurface).
    Transition(ui.PropBackgroundColor, 120*time.Millisecond).
    When(ui.Hovered, ui.Background(ui.TokenSurfaceRaised))

可指定缓动：

.Transition(ui.PropOpacity, 200*time.Millisecond, ui.TransitionEase(ui.EaseCubicOut))

常见属性 ID 以 ui.Prop* 与 go doc 为准（背景色、透明度、scale 等白名单）。无 key 的控件不会保留 transition 状态。

轨道 B：Tween¶

在 View 中读取当前插值：

// 在实现 Widget.Layout 或 WidgetFunc 内（需要 gtx）：
target := float32(0)
if expanded {
    target = 1
}
progress := ui.Tween("panel-open", target).
    Duration(200 * time.Millisecond).
    Easing(ui.EaseCubicOut).
    Value(ctx, gtx) // 当前插值；Sample 可同时得到是否仍在动画

完整演示：examples/animations。

Spring¶

ui.Tween("x", target).
    Spring(ui.DefaultSpring())
// 或 SpringSnappy / SpringGentle / SpringBouncy

切换为弹簧后，Duration/Easing 在弹簧激活期间被忽略。

Timeline¶

多关键帧 float：

ui.Timeline("intro", /* keyframes */...)

适合入场序列；细节见 ui/animation.go 与规格 07。

布局辅助¶

AnimateRect：矩形边界插值（FLIP 风格）
AnimateLayout：子节点尺寸变化时插值

用于面板展开、列表重排等。

缓动¶

公共曲线包括 EaseLinear、EaseQuadraticIn/Out、EaseCubic*、Ease*Back 等（完整表见 go doc 与 ui/animation.go）。

Style.Transition 与 Tween 共用同一套 Easing 类型。

Motion / 减弱动态¶

主题中的 Motion 控制时长倍率与是否减弱动画。用户系统开启「减少动态效果」时，框架应尊重 Theme.Motion（实现已接入；应用侧优先用 Token 与默认 Transition，避免写死夸张动画）。

原则¶

能 Transition 就 Transition（hover 颜色、焦点 outline）。
跨帧数值驱动 用 Tween（展开进度、滚动指示）。
Key 稳定；列表项用业务 id。
不要在 Cmd 里驱动 UI 动画时钟；动画状态在帧 Context 中。

示例¶

go run ./examples/animations