时长选择器：交互规则、默认参数与动效说明

触发方式

点击铅笔展开并聚焦小时输入，修改小时和分钟；点击勾号或 Enter 确认。Escape 撤回到上次确认值并收合，Tab 可切换字段。

起点与终点

初始内容 7 h / 25 min；小时范围 0–24，分钟范围 0–60。默认合拢。合拢时为连续胶囊，展开间距 8px；高度 48px，外圆角不超过高度的一半（设置 12px）。

时序

弹开与收合响应基准 450 ms，解析阻尼弹簧的回弹系数 0.12；时长控制响应节奏，并非精确落稳时间。段间留白、内圆角、输入宽度、轻微摇摆和铅笔到勾号变形同步。

进入与退出

输入负数、小数或超出上限时立即取整并截断到范围，产生短暂轻晃；清空可继续输入，确认后空值记为 0。控件可编辑。配色 light。

重复操作与打断

快速点击从当前弹簧位置与速度接续；工具栏暂停、后台与隐藏预览冻结全部时钟，继续后接续。调整间距、回弹或时长自动演示一次。右侧内容参数实时生效并保存；直接在预览中输入的值、确认记录、焦点、展开进度与观察倍速属于临时状态，不写入 JSON。

减少动态效果

所有编辑状态立即到位，关闭回弹、摇摆、越界轻晃和自动演示收合；输入、确认、撤回与范围校验照常工作。

默认配置

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

{
  "schemaVersion": 2,
  "recipeId": "duration-picker",
  "durationMs": 450,
  "delayMs": 0,
  "easing": [
    0,
    0,
    1,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": false,
  "interruption": "retarget",
  "tracks": [],
  "durationPicker": {
    "hours": 7,
    "minutes": 25,
    "maxHours": 24,
    "maxMinutes": 60,
    "hoursLabel": "h",
    "minutesLabel": "min",
    "gap": 8,
    "bounce": 0.12,
    "height": 48,
    "radius": 12,
    "theme": "light",
    "defaultEditing": false,
    "disabled": false
  }
}

源码与复用

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

用于自己的项目

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

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