Developer handoff · Interaction spec

倍速切换 / 精细调整控件

左侧固定为最终交互基准；右侧文档独立滚动。实现时使用同一份倍率状态连续驱动数字、刻度位置、刻度高度和两端遮罩。

FRAME 375×81226 TICKS0.5–3.0XPOINTER DRAG

01 · 状态与手势

  1. 单击切档
    0.5 → 1.0 → 1.5 → 2.0 → 2.5 → 3.0 循环。
  2. 长按展开
    按住 300ms 展开；松手保持，点击控件外收起。
  3. 拖动微调
    展开后左右拖动，每 6px 对应 0.1X，范围限制为 0.5–3.0X。
  4. 数字换位
    只替换变化字符；相同字符与 X 不动。升档向上，降档反向。

02 · 动画参数

胶囊展开 / 收起
350ms cubic-bezier(.46, .16, 0, 1)
刻度区淡入 / 淡出
200ms cubic-bezier(.46, .16, 0, 1)
刻度区位移
12px → 0 · 260ms cubic-bezier(.22, 1, .36, 1)
数字进场 / 离场
200ms cubic-bezier(.46, 0, .52, .96)
位移 2px；模糊 2px → 0
刻度位置 / 高度
140ms cubic-bezier(.22, 1, .36, 1)
拖动中关闭 transition

03 · 刻度与边界

刻度
26 根；线宽 2px，间距 4px，节距 6px
高度序列
24 → 17 → 15 → 12px，按距激活位的距离连续插值
激活条边界
视窗内 x = 10–118px，始终完整可见
端点遮罩
左右独立；距端点 0.3X 内连续减弱，到端点对应侧透明度为 0

0.5X 时取消左侧渐隐、保留右侧；3.0X 时取消右侧渐隐、保留左侧。中间状态两侧都渐隐。

04 · 核心计算

rawValue = clamp(startValue + dragX / 6 × 0.1, 0.5, 3.0)
activeIndex = (rawValue - 0.5) / 0.1
progress = (rawValue - 0.5) / 2.5
activeX = lerp(10, 118, progress)
ticksX = activeX - activeIndex × 6

leftEdgeAlpha  = max(0, 1 - (rawValue - 0.5) / 0.3)
rightEdgeAlpha = max(0, 1 - (3.0 - rawValue) / 0.3)