apple-design · lab

Fluid Motion Lab

用手指感受那 17 条原则 — 拖它、甩它、中途抓住它

这不是静态图。每个方块都跑着一套真实弹簧物理引擎,下面的数字是实时的位置与速度。核心那句话:动作从当前屏幕值出发、继承你手指的速度、把动量往前抛,而且随时能被抓住反向。

§4 · BEHAVIOR OVER ANIMATION

弹簧,不是固定时长动画

点方块里任意位置,球用弹簧弹过去。切换阻尼,感受"临界阻尼(不回弹)"和"欠阻尼(有弹性)"的差别。

点任意位置 →
x 0 px v 0 px/s response 0.40 s
§2 §5 §6 §9 · DRAG → MOMENTUM

跟手、甩动量、软边界

按住方块拖动(1:1 黏手),然后甩一下松手 — 它会顺着你的速度把落点投射出去,吸附到最近的点;拖过头会橡皮筋回弹,不硬顶。

释放速度 0 px/s 投射落点 吸附到
§10 · SWIPE TO DISMISS

左滑删除 · 用速度判定

向左滑动卡片。松手看的是速度方向而非位置 — 快速一甩就飞走,轻轻挪一点会弹回原位。

删除
午市备货提醒
牛五花 6 斤 · 生菜 4 箱
删除
酒仙桥收银对账
昨日 ¥8,420 待核
删除
炭耗记录
今日喂炭 3 次

滑掉一张试试 →

§3 · 最重要的一条 · INTERRUPTIBILITY

可打断的底部抽屉

打开抽屉,它从底部弹上来。在它还没停稳时就抓住往下拖 — 它会立刻跟手,不会"先弹完再理你"。这是"活"和"死"的分水岭。

就在这一层玻璃上

半透明材质 + 变暗遮罩把注意力聚过来(§12)。往下拖或点空白关掉 — 用动量投射决定开还是关(§6)。

材质 backdrop-filter blur(30)
进出路径 对称:从底进 · 往底出
可抓取 动画中任意时刻