用途
该技能用于指导触摸或点击交互中的动画设计，包括按钮按压、拖拽反馈、滑动响应、点击涟漪，以及任何直接操作类动画。其核心思路是把迪士尼动画十二原则应用到用户直接操作的交互反馈上，让手势响应在视觉上更自然、更有物理感。
主要能力
技能将动画原则逐条映射到手势交互：
- 挤压与拉伸：元素在按压时压缩（scale 0.95-0.97），释放时弹回。
- 预备动作：按压本身就是预备动作，响应必须立即发生，不能有延迟。
- 舞台调度：响应从交互点发起，涟漪从点击位置向外扩展。
- 逐帧与姿势对应：定义静止、按压、释放三种姿势，过渡在它们之间流动。
- 跟随与重叠：释放动画会越过静止位置，先到 1.02 再回落到 1.0。
- 缓入缓出：按压为瞬时，释放使用带过冲的 ease-out，曲线为 cubic-bezier(0.34, 1.56, 0.64, 1)。
- 弧线：拖拽元素跟随手指，在曲线路径上有轻微滞后；吸附时沿弧线到达目标。
- 次要动作：按压同时触发涟漪、缩放与阴影变化。
- 时间节奏：按压响应 0-50ms（必须感觉即时），释放恢复 150-300ms（可以更活泼），涟漪扩展 400-600ms（装饰性，可以更慢）。
- 夸张：按压幅度克制（0.97），释放可以活泼（过冲 1.03）。
- 扎实造型：按压状态应感觉被“按进去”——更小的缩放、更弱的阴影、颜色偏移。
- 吸引力：手势应带来物理上的满足感，像按下一个真实的按钮。
使用方式
技能提供了各手势的时长与缓动建议：
| 手势 | 按压时长 | 释放时长 | 缓动 |
|---|---|---|---|
| 点击/轻触 | 50ms | 200ms | ease-out + 过冲 |
| 长按 | 50ms | 300ms | ease-out |
| 拖拽开始 | 100ms | - | ease-out |
| 拖拽释放 | - | 300ms | spring |
| 滑动 | - | 200-400ms | ease-out |
| 捏合 | 实时 | 300ms | spring |
同时给出实现模式，包括按钮按压、带过冲的释放、Material 涟漪的 CSS 写法，以及拖拽反馈的 JavaScript 写法（拖拽时使用 50ms ease-out 的 transform 过渡，吸附回位时使用 300ms cubic-bezier(0.34, 1.56, 0.64, 1) 的 spring 过渡）。
适用场景
适用于需要为触摸或点击交互添加直接操作动画的界面，例如按钮、可拖拽元素、可滑动列表、点击涟漪效果等。
限制
技能强调一条关键规则：手势响应必须在 100ms 以内，才能让动画与操作保持连接感；任何更慢的响应都会破坏直接操作的错觉。同时建议在真实触摸设备上进行测试。