Developer handoff · Interaction spec

倍速切换 / 精细调整控件

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

ANDROID DPiOS PTTIME MS26 TICKS0.5–3.0X

01 · 状态与手势

以下几何参数均按 Android dp / iOS pt 落地，不是物理 px；时长单位为 ms，cubic-bezier 无单位。左侧预览使用 375pt × 812pt 设计基准，Android 页面宽度仍跟随实际容器。

  1. 单击切档
    0.5 → 1.0 → 1.5 → 2.0 → 2.5 → 3.0 循环。
  2. 长按展开
    按住 300ms 展开；松手保持，点击控件外收起。
  3. 拖动微调
    展开后左右拖动，每 6dp / 6pt 对应 0.1X，范围限制为 0.5–3.0X。
  4. 数字换位
    只替换变化字符；相同字符与 X 不动。旧值离场与新值进场同时执行。

02 · 动画参数

胶囊展开 / 收起
350ms cubic-bezier(.46, .16, 0, 1)
刻度区淡入 / 淡出
200ms cubic-bezier(.46, .16, 0, 1)
刻度区位移
12dp / 12pt → 0 · 260ms cubic-bezier(.22, 1, .36, 1)
数字公共参数
200ms cubic-bezier(.46, 0, .52, .96)
新旧字符同一时刻开始；只处理发生变化的字符
旧数字离场
opacity 1 → 0
blur 0 → 2dp / 2pt
沿离场方向位移 2dp / 2pt；结束后移除旧字符实例
新数字进场
opacity 0 → 1
blur 2dp / 2pt → 0
从相反方向偏移 2dp / 2pt，回到原位
数字切换方向
倍率增大：旧值向上，新值从下进入
倍率减小：旧值向下，新值从上进入
静止字符
同位置字符内容相同时不创建动画；X 始终不参与切换
刻度位置 / 高度
140ms cubic-bezier(.22, 1, .36, 1)
拖动中关闭 transition

03 · 刻度与边界

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

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

04 · 核心计算

Android: dragDistanceDp = eventDeltaPx / density
iOS:     dragDistancePt = gesture.translation.width

dragDistance = dragDistanceDp / dragDistancePt
rawValue = clamp(startValue + dragDistance / 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)