ImGui 作为即时模式（Immediate Mode）GUI 库，其核心魅力在于简单、无状态的渲染循环：每帧从零重建 UI。但这也带来动画挑战——缺少持久状态，无法自然实现平滑过渡、缓动曲线或复杂 tweening。ImAnim 项目巧妙解决此痛点，通过 ID 绑定的持久状态追踪器和插值缓冲区，在不破坏 ImGui 范式的条件下注入现代动画能力。
即时模式下的动画困境与 ImAnim 解法
传统保留模式 GUI（如 Qt、Electron）依赖对象树维护状态，动画易于实现。但 ImGui 每帧丢弃 UI 树，导致位置、大小、颜色等需手动追踪。ImAnim 使用 ImGui::GetID() 生成的哈希作为唯一键，结合通道（channel）字符串（如 "scale"、"alpha"），在全局池中持久化每个动画实例的状态。具体机制：
- 持久状态追踪器：每个 (ID, channel) 对映射到一个 Tween 结构体，记录当前值、目标值、进度 t、持续时间、缓动函数等。ImGui 帧开始时 iam_update_begin_frame() 更新所有活跃 tracker。
- 插值缓冲区：支持 Vec2/Vec4/颜色等多类型 lerp，支持 perceptual 颜色空间（OKLAB/OKLCH）避免灰度失真。
- 策略（Policy）：crossfade（平滑叠加）、cut（立即切）、queue（排队播放），处理目标值冲突。
例如悬停按钮缩放：
float scale = iam_tween_float(ImGui::GetID("btn"), ImHashStr("scale"), hovered ? 1.1f : 1.0f, 0.15f, iam_ease_preset(iam_ease_out_back), iam_policy_crossfade, dt);
ImGui::ImageButton(...); ImGui::SetWindowSize({size.x * scale, size.y * scale});
这里 dt 来自 ImGui::GetIO().DeltaTime，确保帧率无关。
核心 API 与可落地参数
ImAnim 聚焦单一技术点：tween_float/tween_vec2 等一站式 API。推荐参数组合基于 demo 观察与 easing 特性：
-
持续时间（duration）：
- 微交互（如 hover）：0.1-0.2s，避免迟钝。
- 布局过渡（如菜单展开）：0.3-0.5s，匹配人类感知（~250ms 峰值舒适）。
- 长动画（如加载屏）：1-2s，结合 spring easing 增强弹性。
-
缓动函数（easing）：
- 进入（in）：ease_in_quad 加速起始，模拟惯性。
- 退出（out）：ease_out_back 超调回弹，增加活力。公式：t' = 1 - (1-t)^3 + overshoot。
- 自定义：iam_ease_cubic_bezier(p0x,p0y,p1x,p1y)，如 [0.25,0.46,0.45,0.94] 标准 ease-out。
- Spring 物理：iam_ease_spring(响应度 300-600, 阻尼 0.8-1.0)，自适应 dt，适合不确定结束时间。
-
策略与冲突处理：
| 场景 |
Policy |
效果 |
| Hover/Active |
crossfade |
新旧目标平滑融合，避免跳变 |
| 状态机切换 |
cut |
立即重置，节省计算 |
| 序列动画 |
queue |
后目标等待前完成，FIFO |
-
性能阈值：
- 活跃 tween ≤ 1024/场景（全局池 cap），超阈值自动 cull 过期（progress >1.1）。
- dt 阈值：若 <1/120s，跳过更新防 jitter；>1/30s，clamp 防卡顿。
- 批量模式：iam_tween_batch_start() / end()，减少哈希查找（O(1) avg）。
工程化落地清单
集成 ImAnim 零依赖，只需头文件 + cpp：
-
快速启动：
#define IMGUI_DEFINE_MATH_OPERATORS // 若需 Vec lerp
#include "im_anim.h"
iam_update_begin_frame();
iam_clip_update(dt); // 若用 clips
-
监控点：
- Debug 面板：iam_debug_draw_tweens()，可视化活跃数、t 曲线、内存（~48B/tween）。
- 指标：FPS drop <5%（基准 demo 60fps@10k tweens）。
- 回滚：若冲突，fallback 到固定 easing（ease_out_quad）。
-
高级用法：
- Stagger 级联：iam_stagger_float(base_id, index, N, delay=0.05f)，列表逐项延迟。
- 噪声抖动：iam_noise_float(id, time, octaves=3, persistence=0.5)，有机反馈。
- 锚点响应：iam_anchor_tween(id, relative_pos)，窗口 resize 自适应。
-
风险缓解：
- 状态膨胀：用 ImGui::GetID(window_name + "##anim") 作用域隔离。
- 跨帧一致：固定 dt 源，避免 vsync off 时加速。
- 测试：demo/ 基准，覆盖 spring 非线性。
实际项目中，此方案将 ImGui 从静态工具箱升级为动态 UI 框架。颜色波浪、卡片翻转、网格 stagger 等效果，仅需 1-2 行代码。相比手动状态机，代码量减 70%，维护性提升。
资料来源：
- ImAnim GitHub：核心 API 与 demo。
- HN 讨论：社区反馈。"
posts/2025/12/02/immediate-mode-imgui-animations-with-imanim.md