弹簧与物理 · 弹起来的手感
可打断动画Interruptible animation
- 跟手
- 不死板
- 响应快
动画播到一半时用户又操作了,它就从当前位置直接转向新目标,不会先跳回起点。
什么时候用它
会连续被点击或拖拽的元素都要做成可打断;只在弹窗这类一次性动作上可以不管。
参数
no CSS transition · interpolate from current value each frame · 180ms total · target can change anytime
配方
可打断动画 → 180ms可打断动画 → no CSS transition · interpolate from current value each frame · 180ms total · target can change anytime
给 AI 的一句话
把这个开关做成可打断动画:不要用 CSS transition,改为每帧从当前值向目标值插值、全程 180ms,用户中途反向点击时直接从当前位置转向新目标。