触发方式

详情自动轮播,目录悬停运行。点击侧面封套移到中央;悬停中央封套让黑胶探出,点击中央封套或旋转按钮抽出唱片,再次点击或 Escape 收回。

起点与终点

逻辑画布 640 × 420,共 12 张封面;封套高度比例 0.62,宽高比 1;展开间距 0.58,堆叠压缩系数 0.5,扇形旋转增量 6°,侧转 22°,透视后移系数 0.5;每侧显示 3 张,圆角 14px。

时序

吸附与抽出响应基准 650 ms,切换与抽出使用轻微回弹的解析弹簧,收回使用更快的临界阻尼;三段分别校准并保留当前速度接续。当前档位达到九成位移:切换约 448 ms、抽出约 310 ms、收回约 272 ms。黑胶逆时针转速 33 rpm,即每秒 198°;自动轮播间隔 4s。

进入与退出

黑胶悬停时只露出窄边,封套组保持原位;点击抽出约半张黑胶时,封套组平滑向左让位。标签按设定 rpm 旋转,沟槽与反射光保持稳定;旋转唱片期间暂停轮播。左右方向键、Home / End、两侧按钮和可拖动刻度条均可切换。横向拖动带惯性吸附;鼠标在轨道上滚轮切换,触屏纵向滑动留给页面。

重复操作与打断

切换时旧黑胶收回,封套组连续复位,标题与艺人在切换中段完全淡出,换字后再滑入,避免半途跳字。快速操作从当前进度与速度接续,不排队。工具栏暂停冻结吸附、抽出、旋转和轮播计时,继续后接续;悬停、键盘聚焦或拖动暂停自动轮播。首尾循环切换。当前唱片、旋转角度、拖动位置及观察倍速不保存到 JSON。

减少动态效果

关闭自动轮播、旋转和悬停探出。点击和键盘仍可定位封套与抽出唱片,所有变化直接到位。

唱片设置

黑胶 true;自动轮播 true;封面强调色 true;固定强调色 #5227ff;背景 #f1f1f1。非焦点封套采用固定淡化与柔和阴影。

封面内容

使用 12 张原创虚构专辑封面。

默认配置

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

{
  "schemaVersion": 2,
  "recipeId": "album-rail",
  "durationMs": 650,
  "delayMs": 0,
  "easing": [
    0,
    0,
    1,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": true,
  "interruption": "retarget",
  "tracks": [],
  "album": {
    "aspect": 1,
    "size": 0.62,
    "spread": 0.58,
    "stack": 0.5,
    "fan": 6,
    "turn": 22,
    "depth": 0.5,
    "visible": 3,
    "radius": 14,
    "rpm": 33,
    "interval": 4,
    "vinyl": true,
    "autoplay": true,
    "albumAccent": true,
    "accentColor": "#5227ff",
    "backgroundColor": "#f1f1f1"
  }
}

源码与复用

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

用于自己的项目

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

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