触发方式

指针进入实际组件区域时进入，离开时退出；卡片空白处不触发，键盘聚焦与离焦等效。 详情页播放按钮同步演示两侧：普通动效从初态进入终态，再返回初态一次；加载类按循环配置持续播放。暂停保留当前画面，继续时从暂停进度接续。

起点与终点

前层纸张的纵向位移：7 → -7；前层纸张的X 轴翻转：0 → -7；文件夹封面的X 轴翻转：0 → -30；文件夹封面的纵向位移：0 → 8；前层纸张的缩放：0.98 → 0.98；前层纸张的三维深度：-1 → -1；中层纸张的纵向位移：7 → -16；中层纸张的X 轴翻转：0 → -7；中层纸张的缩放：0.98 → 0.96；中层纸张的三维深度：-2 → -2；后层纸张的纵向位移：7 → -26；后层纸张的X 轴翻转：0 → -7；后层纸张的缩放：0.98 → 0.94；后层纸张的三维深度：-3 → -3；文件夹封面的阴影：0px 8px 20px #2222220e → 0px 14px 30px #2222221a；整体的横向位移：0 → 0；整体的纵向位移：0 → 0；整体的缩放：1 → 1。

时序

总时长 640 ms，统一触发延迟 0 ms，三次贝塞尔曲线 cubic-bezier(0.16, 1, 0.3, 1)。各轨道按配置中的 start / span 和 times 分阶段运行。

进入与退出

进入按关键帧正向运行，退出将关键帧、阶段顺序与时间点反转。完成后保留终态，不自动重复。

重复操作与打断

停止旧轨迹，保留当前画面作为新轨迹第一帧，转向最新目标；不排队。循环的新周期从本周期起点开始。

减少动态效果

遵循系统 prefers-reduced-motion，跳过延迟、循环和动画，直接呈现目标帧。观察倍速只修改 Motion 控制器 speed，不写入配置。

默认配置

这些数值来自当前维护的默认配置；编辑器草稿和调整后的导出可以不同。

{
  "schemaVersion": 2,
  "recipeId": "folder",
  "durationMs": 640,
  "delayMs": 0,
  "easing": [
    0.16,
    1,
    0.3,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": false,
  "interruption": "retarget",
  "tracks": [
    {
      "part": "paper",
      "property": "y",
      "values": [
        7,
        -7
      ],
      "times": [
        0,
        1
      ],
      "start": 0,
      "span": 0.75
    },
    {
      "part": "paper",
      "property": "rotateX",
      "values": [
        0,
        -7
      ],
      "times": [
        0,
        1
      ],
      "start": 0,
      "span": 0.75
    },
    {
      "part": "front",
      "property": "rotateX",
      "values": [
        0,
        -30
      ],
      "times": [
        0,
        1
      ],
      "start": 0,
      "span": 0.71875
    },
    {
      "part": "front",
      "property": "y",
      "values": [
        0,
        8
      ],
      "times": [
        0,
        1
      ],
      "start": 0,
      "span": 0.71875
    }
  ]
}

源码与复用

GitHub 对应示例提供公开渲染源码、默认配置和运行入口。复用前请阅读交互说明，并保留随源码附带的第三方与字体许可；完整网页编辑器由独立工程维护。

用于自己的项目

进入编辑器运行真实预览并比较调整；本说明页不另造一份近似演示。把导出用于自己的项目后，重新检查内容、输入、焦点与布局。

目录来源标注：Ariadne. 第三方示例保留自己的许可与署名；公开仓库包含全部当前动效的渲染源码；完整编辑器由独立工程维护。