gesture-responses

ジェスチャー応答アニメーション

Disneyの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未満にする必要があります。それより遅いと、直接操作の錯覚が損なわれます。実際のタッチデバイスでテストしてください。