弹一下,还是停下来?

亲眼区分缓动曲线与弹簧的停止方式。

正在准备互动实验…
02 — COMPARE / 看见方法的作用

同一张卡片,松手之后有什么不同?

先看两种实现,再找出让交互更清楚的那条规则。

未使用 Skills · 基础实现基础版本
正在准备互动实验…

松手即回到原位,任务同样完成。

使用 Skills · 应用交互规则规则应用
正在准备互动实验…

从当前视觉位置连续回位。

01 / 改了什么

增加释放后的连续回位,按住时仍然直接跟手。

02 / 为什么这样改

弹簧的回弹由刚度、质量与阻尼共同决定。

03 / 什么时候不需要

频繁操作的菜单和输入应先追求快速、安静;弹簧不是通用升级。

教学示意,非 AI 生成实测。两侧的任务、内容和输入条件一致;只比较这里说明的规则。Skills 不保证每次生成相同结果。

03 — APPLY / 放进真实项目

弹簧的回弹由刚度、质量与阻尼共同决定。

01缓动按一段时间曲线安排进度;弹簧从位置、速度和目标计算变化。

02临界阻尼是 2 × √(刚度 × 质量)。本实验刚度 100、质量 1,所以临界值是 20。

03改变目标时保留速度,可以看见先刹车再转向的惯性。

适合用在拖动释放有触感的卡片少量轻盈反馈
把这段需求,交给你的 AI

给可拖拽卡片添加克制的释放反馈,从当前位置继续回位。再次抓取时接管当前视觉位置。对比阻尼 8、20、40 的停止过程,减少动态效果时直接更新位置并提供手动步进。

实现代码与机制 +

以下片段解释核心机制,需要与状态、语义和清理逻辑一起使用。页面演示由本地受控组件实现。

// 标准弹簧模型,不代表某个动画库的内部求解器。
const force = -stiffness * (position - target);
const dampingForce = -damping * velocity;
const acceleration = (force + dampingForce) / mass;
velocity += acceleration * dt;
position += velocity * dt;
原理、来源与适用边界 +

频繁操作的菜单和输入应先追求快速、安静;弹簧不是通用升级。

减少动态效果时去掉装饰位移、回弹和自动连续播放,保留功能、状态文字与手动查看步骤。

阅读对应的中文方法笔记 ↗

本案例是独立教学实现。前后对比说明具体规则,不是对某个模型的效果承诺。

停一下,想一想

阻尼从 20 增大到 40,一定更快结束吗?

进度仅保存在当前浏览器
下一课:拖着跟手,松开有回应