gesture-responses

手势响应动画

将迪士尼的 12 条原则应用于直接用户交互。

原则应用

挤压与拉伸：按下时元素压缩（缩放至 0.95-0.97），松开后弹回。

预备动作：按下本身就是预备动作。响应应立即触发——不作延迟。

演出布局：响应从交互点开始。涟漪从点击位置扩散。

连续动作与关键姿势：定义静止、按下和松开姿势。各姿势之间平滑过渡。

跟随与重叠：松开动画会越过静止位置。缩放至 1.02，再稳定到 1.0。

缓入缓出：按下：即时响应。松开：使用带过冲的缓出 cubic-bezier(0.34, 1.56, 0.64, 1)。

弧线运动：拖动元素沿曲线跟随手指，并有轻微滞后。吸附时沿弧线移动至目标位置。

次要动作：按下时同时触发涟漪、缩放和阴影变化。

时长：

• 按下响应：0-50ms（必须感觉即时）
• 松开恢复：150-300ms（可以更活泼）
• 涟漪扩散：400-600ms（属于装饰效果，可以更慢）

夸张：按下时轻微变化（0.97），松开时俏皮地过冲（1.03）。

扎实绘制：按下状态应有“按进去”的感觉——缩放更小、阴影减弱、颜色偏移。

吸引力：手势应给人令人满意的真实触感，就像按下真实按钮。

时长建议

手势	按下时长	松开时长	缓动
点击/单击	50ms	200ms	缓出 + 过冲
长按	50ms	300ms	缓出
开始拖动	100ms	-	缓出
结束拖动	-	300ms	弹簧
滑动	-	200-400ms	缓出
捏合	实时	300ms	弹簧

实现模式

/* Button press */
.button {
  transition: transform 50ms ease-out;
}

.button:active {
  transform: scale(0.97);
}

/* Release with overshoot */
.button:not(:active) {
  transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Material ripple */
.ripple {
  animation: ripple 600ms ease-out forwards;
}

@keyframes ripple {
  from {
    transform: scale(0);
    opacity: 0.5;
  }
  to {
    transform: scale(4);
    opacity: 0;
  }
}

拖动反馈模式

// Smooth drag with slight lag
element.style.transform = `translate(${x}px, ${y}px)`;
element.style.transition = 'transform 50ms ease-out';

// Snap back with spring
element.style.transition = 'transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1)';
element.style.transform = 'translate(0, 0)';

关键规则

手势响应必须在 100ms 内触发，才能让用户感觉它与操作直接关联。响应再慢，就会打破直接操控的错觉。请在实际触屏设备上测试。