缓动曲线（easing）决定动画"快慢节奏"的变化。同样 400ms 的 fade，linear 和 ease-out 看起来完全不同。

6 种内置曲线

曲线	速度变化	视觉感
linear	始终匀速	机械、单调
ease-in	慢起快收	离开感、退场
ease-out	快起慢收	进入感、入场（默认）
ease-in-out	慢起快进慢收	长动画的呼吸感
spring	弹簧物理（带过冲）	拟物、活泼
steps(N)	N 段阶跃	复古像素感

默认就是 ease-out

如果不主动设 easing，玄武屏所有入场动画用 ease-out。这符合现实：物体进入时有惯性，落地时减速。

cubic-bezier 自定义

更精细的控制用三次贝塞尔曲线：

ease-out 等价于 cubic-bezier(0, 0, 0.58, 1)

在线工具推荐：easings.net 提供经典曲线参数。

常用自定义曲线

名称	cubic-bezier 参数	视觉感
easeOutQuart	(0.25, 1, 0.5, 1)	快入超慢出
easeOutBack	(0.34, 1.56, 0.64, 1)	入场过冲反弹
easeInBack	(0.36, 0, 0.66, -0.56)	退场反弹
easeOutElastic	(...)	强烈弹性

编辑器属性面板提供曲线可视化编辑器，拖拽控制点即可。

时长 + 曲线组合

组合	视觉效果	适用
200ms linear	突兀、机械	不推荐
200ms ease-out	干脆、清爽	微反馈、tooltip
400ms ease-out	自然、稳重	入场默认
600ms ease-in-out	舒缓、叙事	重点页
1000ms spring	弹性、活泼	戏剧化
800ms ease-out	沉稳	影片风格

行业偏好

行业	推荐
教育	ease-out 400ms（专业、稳）
企业销售	ease-out 350ms + 关键页 spring（节奏明快）
医疗	ease-out 500ms（稳重）
博物馆 / 展厅	ease-in-out 600–800ms（叙事）
军事	ease-out 300ms（干净）
营销 H5	spring + back（戏剧化）

不同元素类型的最佳曲线

元素	曲线建议
文字	ease-out 短时长
图片	ease-out 中时长
图形	ease-in-out 中长
GGB 动画	linear（与内部物理同步）
数字滚动	ease-out（先快后慢）
数字人讲解员	linear（与 TTS 节奏同步）

退场动画

虽然玄武屏主要做入场动画，但页面切换时元素也需要退场：

• 默认退场 = 入场反向 + ease-in
• 单独配置退场动画见高级属性

性能与曲线

复杂的 cubic-bezier 比 linear 多一些 CPU 开销，但通常可忽略。spring 物理曲线开销稍高，单页 > 50 个元素同时 spring 时建议简化。

调试技巧

「视图 → 动画时间轴」面板可以：

• 实时预览不同曲线的效果
• 同一动画用不同曲线对比
• 拖拽数值快速试验

下一节讲链式动画与状态机。