让界面动起来EUI-NEO动画系统完整指南从缓动曲线到交互动效【免费下载链接】EUI-NEOEUI-NEO is a cross-platform, high-performance, low-overhead C17 GPUI framework项目地址: https://gitcode.com/gh_mirrors/eui3/EUI-NEOEUI-NEO 是一个跨平台、高性能的 C17 GUI 框架而它的动画系统让桌面应用也能拥有丝滑的界面动效。这篇文章带你从 8 条缓动曲线讲起掌握声明式过渡写法、2.5D 翻牌效果、Hover/Press 交互动效以及让动画不掉帧的脏区重绘机制——不需要手写关键帧几行声明就能让界面活起来。上图就是 EUI-NEO 自带的 Gallery 示例每个按钮的悬停变色、按压反馈、面板展开背后都是同一套动画机制在工作。 先认识动画系统的三大核心EUI-NEO 的动画系统集中在 core/animation.h并由 DSL Runtime 统一驱动官方说明见 docs/动画.md。新手只需记住三个核心类型类型作用一句话理解Ease8 种缓动曲线决定动画的加速/减速节奏Transition一次过渡的完整描述时长 延迟 曲线 参与动画的属性AnimatedValueT/SmoothedValueT属性插值器前者负责目标值过渡后者负责持续靠近的交互状态最关键的思路是声明式页面和组件只声明新目标状态Runtime 负责插值、重绘节奏和脏区标记。你不需要在每帧里手动改属性值。 8 条缓动曲线动画手感的总开关Ease枚举提供了 8 条经典曲线源码见 core/animation.h它们直接决定了动画的手感缓动曲线运动特征推荐场景Linear匀速进度、简单位移InQuad慢起快收元素入场铺垫OutQuad快起慢收通用出场InOutQuad慢–快–慢往复滑动OutCubic明显减速收尾默认曲线页面过渡首选InOutCubic对称缓动双向切换OutExpo极强减速先冲到位再稳稳收住侧边栏、抽屉、底部面板OutBack轻微回弹 overshoot按钮、卡片弹出的俏皮感实用建议官方文档中特别提到抽屉类交互用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时位置与透明度会自动从当前值平滑过渡到新值。如果只想让部分属性参与动画可以传入完整的Transitioncore::Transition t core::Transition::make(0.24f, core::Ease::OutCubic) .animate(core::AnimProperty::Color | core::AnimProperty::Opacity);它背后的工作流非常清晰App 状态改变compose 声明新的目标属性Runtime 发现目标值变化AnimatedValueT从当前值插值到新目标每帧只标记相关脏区。 哪些属性能参与动画Rect、Text、Image三类元素都有各自的可动画属性位掩码AnimProperty可按需组合元素可动画属性Rect位置/大小、颜色、透明度、圆角、边框、阴影、模糊、变换Text位置/大小、文字颜色、透明度、变换Image位置/大小、颜色、透明度、圆角、变换弹窗的淡入淡出、颜色滑杆的即时反馈都是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.hGallery 全局过渡页面级 0.28sOutCubic、元素级 0.42sOutBack两套预设定义在 apps/gallery/app.cppWorkshop 交互组件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 C17 GPUI framework项目地址: https://gitcode.com/gh_mirrors/eui3/EUI-NEO创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考