12 · 动画¶

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

下文示例统一假定已通过 activeTheme := core.ActiveTheme(ctx) 取得当前主题值，颜色直接引用主题的 Colors 字段（主题是值，不是查询——见 architecture）。

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

两者都需要稳定 Key。

轨道 A：Style Transition¶

style.New().Background(style.Solid(activeTheme.Colors.Surface)).
    Transition(style.PropBackgroundColor, 120*time.Millisecond).
    On(style.Hovered, style.New().Background(style.Solid(activeTheme.Colors.SurfaceRaised)))

可指定缓动：

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

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

轨道 B：Tween¶

在 View 中读取当前插值：

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

本章动画片段需与自己的组件 Key 和消息循环组合。

Spring¶

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

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

Timeline¶

多关键帧 float：

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

适合入场序列；细节见公开 animation 包的 GoDoc。

布局辅助¶

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

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

缓动¶

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

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

Motion / 减弱动态¶

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

原则¶

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

示例¶

可运行的按钮状态演示见仓库 examples/buttons；动画原语测试位于 animation/。