弹一下,还是停下来?
亲眼区分缓动曲线与弹簧的停止方式。
正在准备互动实验…
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;原理、来源与适用边界 +
频繁操作的菜单和输入应先追求快速、安静;弹簧不是通用升级。
减少动态效果时去掉装饰位移、回弹和自动连续播放,保留功能、状态文字与手动查看步骤。
阅读对应的中文方法笔记 ↗本案例是独立教学实现。前后对比说明具体规则,不是对某个模型的效果承诺。