Back to Details

gesture-responses

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Gesture Response Animations

手势响应动画

Apply Disney's 12 principles to direct user interactions.
将迪士尼12动画原则应用于用户直接交互场景。

Principle Application

原则应用

Squash & Stretch: Elements compress on press (scale 0.95-0.97), spring back on release.
Anticipation: The press IS the anticipation. Response should be immediate - no delay.
Staging: Response originates from interaction point. Ripples expand from tap location.
Straight Ahead vs Pose-to-Pose: Define rest, pressed, and released poses. Transitions flow between them.
Follow Through & Overlapping: Release animation overshoots rest position. Scale to 1.02, settle to 1.0.
Slow In/Slow Out: Press: instant. Release: ease-out with overshoot 
cubic-bezier(0.34, 1.56, 0.64, 1)
.
Arcs: Drag elements follow finger with slight lag on curves. Snapping follows arc to destination.
Secondary Action: Press triggers ripple + scale + shadow change simultaneously.
Timing:
  • Press response: 0-50ms (must feel instant)
  • Release recovery: 150-300ms (can be playful)
  • Ripple expansion: 400-600ms (decorative, can be slower)
Exaggeration: Subtle for press (0.97), playful for release (overshoot 1.03).
Solid Drawing: Pressed state should feel "pushed in" - smaller scale, reduced shadow, shifted color.
Appeal: Gestures should feel physically satisfying. Like pressing a real button.
挤压与拉伸：元素在按压时收缩（缩放比例0.95-0.97），释放时回弹。
预备动作：按压本身就是预备动作。响应必须即时——不能有延迟。
布局呈现：响应从交互点发起。波纹从点击位置向外扩散。
逐帧动画与关键帧动画：定义静止、按压、释放三种状态，状态间平滑过渡。
跟随动作与重叠动作：释放动画会超过静止位置，先缩放到1.02，再回归到1.0。
缓入缓出：按压：即时响应。释放：使用带过冲的缓出曲线 
cubic-bezier(0.34, 1.56, 0.64, 1)
。
弧线运动：拖拽元素跟随手指移动，在曲线轨迹上有轻微延迟。吸附动作沿弧线到达目标位置。
次要动作：按压同时触发波纹、缩放和阴影变化。
时长控制:
  • 按压响应：0-50毫秒（必须让用户感觉即时）
  • 释放恢复：150-300毫秒（可设计得更生动）
  • 波纹扩散：400-600毫秒（装饰性效果，可稍慢）
夸张效果：按压时轻微夸张（缩放0.97），释放时更生动（过冲至1.03）。
立体造型：按压状态要给人“被按下”的感觉——缩小尺寸、弱化阴影、调整颜色。
吸引力：手势交互要带来真实的物理触感，就像按下真实按钮一样。

Timing Recommendations

时长建议

GesturePress DurationRelease DurationEasing
Tap/Click50ms200msease-out + overshoot
Long Press50ms300msease-out
Drag Start100ms-ease-out
Drag Release-300msspring
Swipe-200-400msease-out
Pinchreal-time300msspring
手势类型按压时长释放时长缓动曲线
点击/单击50ms200ms缓出+过冲
长按50ms300ms缓出
拖拽开始100ms-缓出
拖拽释放-300ms弹簧曲线
滑动-200-400ms缓出
捏合实时300ms弹簧曲线

Implementation Patterns

实现模式

css
/* 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;
  }
}
css
/* 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;
  }
}

Drag Feedback Pattern

拖拽反馈模式

javascript
// 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)';
javascript
// 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)';

Critical Rule

关键规则

Gesture responses must be under 100ms to feel connected to the action. Anything slower breaks the direct manipulation illusion. Test on actual touch devices.
手势响应必须在100毫秒内完成，才能让用户觉得交互是连贯的。任何延迟都会打破直接操作的真实感。请在真实触摸设备上进行测试。