Z 轴位移缓动选择与晕动症阈值

空间界面做 Z 轴动画——把一个 Panel 从远处拉近，或者把详情从近处推远——是常见交互。但这个动画比 2D 的平移/缩放危险得多：Z 轴位移改变物体到眼睛的距离，大脑会预期头部前倾/后仰来配合距离变化。如果头没动但物体在 Z 轴上移动，视觉和前庭系统冲突，就晕。我们第一版用 linear 缓动把商品详情从 3m 拉到 1m，5 个测试同事里 3 个说"有点晕"，1 个直接恶心想吐。这篇把 Z 轴位移动画的缓动选择和晕动症阈值量化，给一组真机测过的数据。

能力面：Z 轴位移动画与晕动症的成因

2D 动画在屏幕平面内移动，不改变物体到眼睛的物理距离，大脑不预期身体配合移动，不晕。Z 轴动画改变物理距离，大脑预期身体前后移动来配合——头该前倾或后仰。但用户实际没动，前庭系统报告"静止"，视觉报告"物体在靠近"，冲突产生晕动症。

这个冲突的强度取决于三个因素：

• 位移速度：物体 Z 轴移动多快。越快视觉变化越剧烈，冲突越强。
• 加速度：速度变化率。匀速移动只有视觉流冲突，加减速还有前庭预期冲突，更晕。
• 缓动曲线：决定速度和加速度的时序分布。linear 全程匀速无加速（只有视觉流冲突），ease-in-out 两端有加速（叠加前庭冲突），spring 全程有振荡（冲突最强）。

反直觉的是 linear 缓动晕动症最轻，因为它匀速无加速度，只有视觉流冲突没有前庭冲突。但 linear 动画视觉上"生硬"，设计师不爱用。ease-in-out 视觉柔和但两端加减速叠加前庭冲突，更晕。这是设计审美和生理舒适的根本矛盾。

三种缓动的晕动症对比

我们让 12 个同事看同一组 Z 轴位移动画（从 3m 拉到 1m，耗时 1s），用不同缓动，填 SSQ 量表（Simulator Sickness Questionnaire，标准晕动症评估，分数越高越晕）：

缓动曲线	SSQ 均分	恶心人数	主观评价
linear	8.2	0/12	“生硬但不晕”
ease-in-out	14.6	2/12	“柔和但有点晕”
spring（轻振荡）	22.3	4/12	“弹一下很晕”
spring（强振荡）	31.8	6/12	“想吐”
ease-out	11.4	1/12	“开始快后面慢，还行”
ease-in	12.7	1/12	“开始慢后面快，略晕”

ease-out 是折中最好的——开始有速度（视觉流冲突弱），后面减速（加速度冲突只在结尾短时出现），SSQ 14.6 降到 11.4。linear 最不晕但视觉生硬，ease-out 稍晕一点但视觉可接受。

spring 最晕是因为振荡。物体拉到位后回弹一下，回弹时 Z 轴方向反转，视觉流方向突变，大脑更困惑。Z 轴动画尽量别用 spring，要弹也只在 X/Y 轴弹，Z 轴保持单调。

约束面：位移速度和加速度的阈值

缓动曲线选定后，位移速度和加速度的上限决定晕动症强度。

速度阈值

我们测了不同位移速度（3m→1m，总位移 2m）下的 SSQ：

耗时	平均速度	SSQ 均分	评价
0.3s	6.7 m/s	28.4	“太快了晕”
0.5s	4.0 m/s	18.7	“快，有点晕”
1.0s	2.0 m/s	11.4	“合适”
1.5s	1.3 m/s	8.6	“稍慢但不晕”
2.0s	1.0 m/s	6.2	“慢，不晕但等得急”

速度 2 m/s（1s 走 2m）是阈值，超过明显晕。1.3 m/s 以下几乎无人晕。但太慢（1 m/s）用户觉得"等半天才过来"，体验也不好。1~1.5s 耗时（速度 1.3~2 m/s）是甜点。

加速度阈值

加速度比速度更影响晕动症。匀速 2 m/s 不太晕，但从 0 加速到 2 m/s 的过程如果有大加速度，那一段会晕。

我们用 ease-out 拆开看：ease-out 的加速度集中在开头 0.2s，峰值加速度约 6 m/s²。人体前庭系统感知线性加速度阈值约 0.1 m/s²，6 m/s² 远超阈值——但这是视觉加速度不是物理加速度，前庭没真正感知到，只是视觉流暗示了加速，大脑误判。这个误判的强度因人而异，前庭敏感的人 6 m/s² 就晕，不敏感的 15 m/s² 才晕。

我们的阈值定在峰值加速度 ≤ 5 m/s²，覆盖前庭敏感人群。ease-out 1s 动画峰值 6 m/s² 略超，调到 1.2s 降到 4.2 m/s²，在阈值内。

场景落地：商品详情拉近动画

用户点击商品卡片，详情 Panel 从 3m 拉到 1m。总位移 2m。

方案	缓动	耗时	峰值速度	峰值加速度	SSQ	选用
A	linear	1.0s	2.0 m/s	0 m/s²	8.2	备选
B	ease-out	1.0s	3.2 m/s	6.0 m/s²	11.4
C	ease-out	1.2s	2.7 m/s	4.2 m/s²	9.1	选用
D	ease-in-out	1.5s	2.7 m/s	5.0 m/s²	12.3
E	spring	1.0s	3.5 m/s	8.0 m/s²	22.3	淘汰

选 C：ease-out 1.2s。峰值速度 2.7 m/s 略超 2 m/s 阈值但可接受，峰值加速度 4.2 m/s² 在 5 m/s² 阈值内，SSQ 9.1 低于 10（我们的可接受线）。视觉上 ease-out 开始快后面慢，“嗖一下过来然后稳稳停住”，比 linear 自然比 spring 不晕。

上面这张表是静态对比，真正落地时按下面这条链逐步收敛。

先卡速度再卡加速度，最后用 SSQ 兜底，任何一步超出阈值都回到调时长或换缓动的环节。

// entry/src/main/ets/animation/ZAxisTransition.ets
import { animateTo, Curves } from '@kit.ArkUI';

@Component
export struct ZAxisTransition {
  @State panelDepth: number = -3.0;  // 初始 3m 远
  private readonly TARGET_DEPTH = -1.0;  // 目标 1m 近
  private readonly DURATION = 1200;     // 1.2s

  pullPanelNear() {
    // ease-out 缓动，1.2s，峰值加速度 4.2 m/s² 在阈值内
    animateTo({
      duration: this.DURATION,
      curve: Curves.easeOut,
      onFinish: () => {
        // 到位后可以加 X/Y 轴的微弹（不晕），增加生动感
        this.addBounceOnXY();
      }
    }, () => {
      this.panelDepth = this.TARGET_DEPTH;
    });
  }

  // X/Y 轴弹跳不引发晕动症，可以放心用 spring
  addBounceOnXY() {
    animateTo({
      duration: 200,
      curve: Curves.springMotion(0.3, 0.8)
    }, () => {
      // X/Y 轴微弹 2mm，视觉生动不晕
      this.panelOffsetX = 0.002;
    });
  }

  build() {
    SpatialNode({ depth: this.panelDepth }) {
      DetailPanel()
    }
  }
}

关键点：Z 轴用 ease-out 不用 spring，X/Y 轴可以用 spring。Z 轴到位后再加 X/Y 微弹，既有生动感又不晕。

踩坑与取舍

坑一：linear 缓动匀速最不晕但用户嫌生硬

linear SSQ 最低（8.2），但 12 个同事里 8 个说"动画太生硬，像 PPT 切换"。完全不晕但视觉差，用户不满意。

ease-out SSQ 稍高（9.1~11.4）但视觉自然，用户满意度高。我们选了 ease-out 接受稍高的 SSQ。这是设计审美和生理舒适的取舍——完全消除晕动症要牺牲视觉质感，我们选了"几乎不晕且视觉可接受"的中间态。

坑二：连续 Z 轴动画累积晕动症

单次 Z 轴动画 SSQ 9.1 可接受，但连续做 5 次（用户快速翻 5 个商品详情），SSQ 累积到 18.7，开始有人晕。晕动症是累积的，单次不晕不代表连续不晕。

我们的处理是连续操作时缩位移幅度。第一次从 3m 拉到 1m（位移 2m），连续操作时只从 2m 拉到 1m（位移 1m），幅度减半 SSQ 增长放缓。另外连续操作间隔 <500ms 时把缓动改成 linear（最不晕），牺牲视觉质感保生理舒适。

被放弃的方案：Z 轴不动画，用淡入淡出

试过 Z 轴不做位移动画，详情 Panel 直接在 1m 处淡入。完全不晕（没有 Z 轴位移就没有视觉流冲突），但用户失去"从远处拉过来"的空间感，反馈说"不知道详情从哪来的，没有空间层次"。Z 轴位移虽然有晕动症风险，但它传递了空间深度信息，完全去掉损失太大。放弃了淡入淡出，回到 ease-out 位移。

总结一下下

• Z 轴位移动画用 ease-out，别用 spring（振荡最晕）
• 位移速度 ≤ 2 m/s，耗时 1~1.5s 为宜
• 峰值加速度 ≤ 5 m/s²，覆盖前庭敏感人群
• 连续 Z 轴动画缩位移幅度，间隔 <500ms 切 linear 缓动
• X/Y 轴动画可以用 spring，不引发晕动症
• 单次 SSQ < 10 可接受，连续操作注意累积效应

目前阈值是按 12 个同事的测试定的，样本量小。下一步打算做更大规模用户测试（50+ 人），把 SSQ 阈值校准得更可靠。另外想试一下视差补偿——Z 轴动画时轻微移动相机位置模拟头部前倾，让视觉和前庭预期对齐，理论上能降晕动症。这个要改相机管线，工程量大，先验证可行性再决定做不做。