触发方式
详情自动轮播,目录悬停运行。点击侧面封套移到中央;悬停中央封套让黑胶探出,点击中央封套或旋转按钮抽出唱片,再次点击或 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 对应示例提供公开渲染源码、默认配置和运行入口。复用前请阅读交互说明,并保留随源码附带的第三方与字体许可;完整网页编辑器由独立工程维护。
用于自己的项目
进入编辑器运行真实预览并比较调整;本说明页不另造一份近似演示。把导出用于自己的项目后,重新检查内容、输入、焦点与布局。
目录来源标注:原创实现. 第三方示例保留自己的许可与署名;公开仓库包含全部当前动效的渲染源码;完整编辑器由独立工程维护。