企业官网建设流程全解析

让界面动起来：EUI-NEO动画系统完整指南，从缓动曲线到交互动效

【免费下载链接】EUI-NEOEUI-NEO is a cross-platform, high-performance, low-overhead C++17 GPUI framework项目地址: https://gitcode.com/gh_mirrors/eui3/EUI-NEO

EUI-NEO 是一个跨平台、高性能的 C++17 GUI 框架，而它的动画系统让桌面应用也能拥有丝滑的界面动效。这篇文章带你从 8 条缓动曲线讲起，掌握声明式过渡写法、2.5D 翻牌效果、Hover/Press 交互动效，以及让动画不掉帧的脏区重绘机制——不需要手写关键帧，几行声明就能让界面"活"起来。

上图就是 EUI-NEO 自带的 Gallery 示例：每个按钮的悬停变色、按压反馈、面板展开，背后都是同一套动画机制在工作。

🧩 先认识动画系统的三大核心

EUI-NEO 的动画系统集中在 core/animation.h，并由 DSL Runtime 统一驱动，官方说明见 docs/动画.md。新手只需记住三个核心类型：

最关键的思路是声明式：页面和组件只声明"新目标状态"，Runtime 负责插值、重绘节奏和脏区标记。你不需要在每帧里手动改属性值。

📈 8 条缓动曲线：动画手感的总开关

Ease枚举提供了 8 条经典曲线（源码见 core/animation.h），它们直接决定了动画的"手感"：

💡实用建议：官方文档中特别提到，抽屉类交互用OutExpo配合约0.92s的时长手感最佳——速度变化明显但不回弹；而想要活泼一点的效果（如 Gallery 中卡片运动），选OutBack即可。

✍️ 只需 3 行代码：声明式过渡写法

给元素加动画只需要在构建链上加一个.transition()：

ui.rect("actor") .x(active ? 420.0f : 40.0f) .opacity(active ? 0.42f : 1.0f) .transition(0.42f, core::Ease::OutBack) // 0.42s + 回弹曲线 .build();

状态从false变到true时，位置与透明度会自动从当前值平滑过渡到新值。

如果只想让部分属性参与动画，可以传入完整的Transition：

core::Transition t = core::Transition::make(0.24f, core::Ease::OutCubic) .animate(core::AnimProperty::Color | core::AnimProperty::Opacity);

它背后的工作流非常清晰：

1. App 状态改变；
2. compose 声明新的目标属性；
3. Runtime 发现目标值变化；
4. AnimatedValue<T>从当前值插值到新目标；
5. 每帧只标记相关脏区。

🎨 哪些属性能参与动画？

Rect、Text、Image三类元素都有各自的可动画属性（位掩码AnimProperty可按需组合）：

弹窗的淡入淡出、颜色滑杆的即时反馈，都是Color、Opacity、Frame属性在过渡曲线下的自然结果。

🃏 2.5D 变换：翻牌与透视动效

EUI-NEO 的 Transform 不止 2D，还内置了 2.5D API，做翻牌效果几乎零成本：

ui.stack("card") .rotateY(flipped ? 3.14159f : 0.0f) // 左右翻牌 .translateZ(flipped ? 40.0f : 0.0f) // 沿 Z 轴抬起 .perspective(520.0f) // 透视距离，越小越强烈 .transformOrigin(0.5f, 0.5f) .transition(0.42f, core::Ease::OutBack) .animate(core::AnimProperty::Transform) .build();

常用 API 一览：

• .rotateX()/.rotateY()：绕局部轴翻转，分别适合上下、左右翻牌；
• .rotateZ()/.rotate()：屏幕平面内旋转；
• .translate3d()/.translateZ()：Z 方向位移；
• .perspective()：透视距离，0表示关闭。

Gallery 的 Animation 页面专门提供了Flip X、Flip Y、Depth三个按钮演示这套效果，实现见 apps/gallery/pages/gallery_animation.h，打开就能看到卡片翻转变换的完整手感。

⚠️ 注意：2.5D 是 UI 平面投影，不是完整 3D 场景——绘制顺序仍由 DSL 树顺序和zIndex决定；若点击热区需要跟随视觉投影，记得开启.transformedHitTest()。

🖱️ Hover 与 Press：丝滑交互动效的实现

按钮的"悬停变亮、按压缩放"不需要你写定时器，SmoothedValue会让状态持续朝目标靠近，天然平滑：

ui.rect("button.bg") .states(normal, hover, pressed) // 开启三态 .onClick(callback) .build();

Runtime 内部维护hoverBlend/pressBlend两个混合系数，按normal → hover → pressed的颜色路径混合。而整卡按压缩放则通过.visualStateFrom("button.bg", 0.965f)让外层容器共享同一个 press 状态。

这类交互状态是 Runtime 内部变化，不会触发重新 compose，所以开销极低。

像 Clock 示例中的搜索建议列表、城市卡片的选中态切换，都建立了这套 hover/press + 过渡机制之上。

⚡ 性能机制：脏区重绘让动画不掉帧

EUI-NEO 是主打低开销的框架，动画性能的关键在于脏区（dirty rect）：

• 每帧只计算变化区域：dirty = union(旧视觉矩形, 新视觉矩形)；
• 对Rect，视觉区域会考虑 frame、shadow、blur、transform；
• 然后 Runtime 用 framebuffer cache + scissor只重绘脏区。

这意味着一个卡片在屏幕上滑动时，静止的背景根本不会被重复绘制——这也是"动画系统"和"每帧全量重绘"的本质区别。代价是脏区计算偏保守（宁大勿小），优先保证正确性。

🎚️ 全局动画速度：一个滑块控制全场

想给整个应用提速或降速？只需一行：

core::setGlobalTransitionDurationScale(0.5f); // 所有过渡时长减半

该缩放值被限制在0.05 ~ 8.0之间，防止误传 0 导致动画系统失控；已经开始的动画不会被追溯改写。

Gallery 的 Settings 页面就用了一个Animation speed滑杆来演示它：UI 显示速度倍率，底层写入的是时长缩放1.0f / speed——2.0x就表示动画时长减半。

⚠️ 当前限制（选型前必读）

保持预期，官方文档 docs/动画.md 明确了当前边界：

• 暂无 timeline / keyframe 关键帧 API；
• 暂无 repeat / yoyo 循环模式；
• 暂无动画完成回调与独立动画句柄；
• shadow / blur 动画支持但成本较高，建议谨慎使用；
• 脏区会保守扩大，优先保证正确性。

对于"状态 A → 状态 B"的过渡式动效（绝大多数 UI 场景），这套系统已经完全够用。

🚀 去哪里看真实动效？

最好的学习方式就是跑起示例，这些入口都内置了大量过渡与交互动画：

• Gallery 的 Animation 页：Move / Rotate / Fade / Scale / Radius / Glow / Flip X / Flip Y / Depth 九个演示，见 apps/gallery/pages/gallery_animation.h；
• Gallery 全局过渡：页面级 0.28sOutCubic、元素级 0.42sOutBack两套预设，定义在 apps/gallery/app.cpp；
• Workshop 交互组件：components/workshop/tilt_card.h（倾斜卡片）、components/workshop/heart_switch.h（点赞心跳）、components/workshop/card_slider.h 等；
• 完整应用参考：apps/calgary_gallery/app.cpp 是一个带页面切换与卡片动效的画廊应用。

从缓动曲线的选择，到声明式过渡、2.5D 翻牌，再到脏区重绘的性能底座——这就是 EUI-NEO 动画系统的全貌。现在打开 Gallery，点几下按钮，感受一下"界面动起来"的完整链路吧 🎬

【免费下载链接】EUI-NEOEUI-NEO is a cross-platform, high-performance, low-overhead C++17 GPUI framework项目地址: https://gitcode.com/gh_mirrors/eui3/EUI-NEO