弹性相片卷：交互规则、默认参数与动效说明

触发方式

悬停或横向拖动联动放大；点击切片展开，再次点击收起；方向键、Home / End 切换，Escape 收起。打开后左右滑动切换相片，纵向滚动保留给页面。

起点与终点

逻辑画布 640 × 400，8 张原创抽象插画。切片宽 44px，高为画布的 0.5；间距 10px，圆角 12px。悬停放大 2.4 倍，联动范围 200px；展开高度比例 0.72，宽高比 1。空间不足时压缩侧边切片。

时序

弹簧响应基准 800 ms，弹性 0.35。自动播放 sweep；扫动 1.4 格/秒，轮播间隔 4 秒；持续循环。

进入与退出

切片围绕中心伸展。相片展开时邻项虚化 2.5px、淡化 45%；悬停邻项恢复清晰。详情自动播放，目录仅在悬停时运行；指针或键盘聚焦时暂停自动播放。

重复操作与打断

新目标从当前尺寸和速度接续，不重置弹簧。工具栏暂停并保留几何、扫动位置及轮播计时，继续后接续；关闭自动播放后仍可手动悬停和展开。观察倍速、当前相片、焦点和弹簧速度不写入配置。

减少动态效果

关闭自动播放与悬停放大，点击和键盘直接切换到展开或收起的静态终态。

版本

当前版本：调节放大或展开参数时，自动演示对应交互。

默认配置

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

{
  "schemaVersion": 2,
  "recipeId": "elastic-reel",
  "durationMs": 800,
  "delayMs": 0,
  "easing": [
    0,
    0,
    1,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": true,
  "interruption": "retarget",
  "tracks": [],
  "reel": {
    "barWidth": 44,
    "barHeight": 0.5,
    "gap": 10,
    "radius": 12,
    "magnify": 2.4,
    "influence": 200,
    "openSize": 0.72,
    "openAspect": 1,
    "elasticity": 0.35,
    "align": "center",
    "autoplay": "sweep",
    "speed": 1.4,
    "interval": 4
  }
}

源码与复用

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

用于自己的项目

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

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