React Academy · レッスン

ジェスチャーアニメーション：Hover、Tap、Drag

whileHover、whileTap、drag propsを使い、ユーザーのジェスチャーに応じてコンポーネントをアニメーションさせます。

「ジェスチャーアニメーション：Hover、Tap、Drag」はCoddyKit上の無料React Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

ジェスチャー Props の概要

Framer Motion のジェスチャー props を使うと、JavaScript のイベントハンドラーなしでユーザー入力に応じてコンポーネントをアニメーションできます。主なものはwhileHover、whileTap、whileDrag、whileFocusです。

whileHover

カーソルが要素の上にある間のアニメーション状態を定義します。カーソルが離れると自動的に元に戻ります。

<motion.button
  whileHover={{ scale: 1.05, boxShadow: '0 10px 30px rgba(0,0,0,0.15)' }}
  transition={{ type: 'spring', stiffness: 400, damping: 17 }}
>
  Hover me
</motion.button>

whileTap

要素が押されている間のアニメーション状態を定義します。ボタンを押したときのフィードバックに最適です。

<motion.button
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
>
  Click
</motion.button>

whileFocus

要素がキーボードフォーカスを受け取ったときにアニメーションします。アクセシブルなフォーカスインジケーターに適しています。

<motion.input
  whileFocus={{ borderColor: '#4f46e5', boxShadow: '0 0 0 3px rgba(79,70,229,0.3)' }}
  transition={{ duration: 0.2 }}
/>

ドラッグの有効化

drag prop を追加すると、要素をドラッグできるようになります。true、'x'、または'y'を指定して軸を制限できます。

<motion.div
  drag
  dragConstraints={{ left: -100, right: 100, top: -100, bottom: 100 }}
  whileDrag={{ scale: 1.1, cursor: 'grabbing' }}
  style={{ cursor: 'grab' }}
>
  Drag me
</motion.div>

Ref による dragConstraints

ピクセル値の代わりに ref を使ってコンテナ要素内にドラッグ範囲を制限できます。ドラッグ可能な要素がコンテナの外に出ることはありません。

const constraintsRef = useRef(null);

<div ref={constraintsRef} style={{ overflow: 'hidden', width: 300, height: 300 }}>
  <motion.div
    drag
    dragConstraints={constraintsRef}
    style={{ width: 80, height: 80, background: '#4f46e5' }}
  />
</div>

dragElastic

dragElasticは、制約を越えて要素をどの程度ドラッグできるかを制御します（0 = 弾性なし、1 = 最大の弾性）。

<motion.div
  drag
  dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
  dragElastic={0.2} // slight rubber-band effect
/>

dragSnapToOrigin

dragSnapToOriginを設定すると、要素を離したときに元の位置へスプリングのように戻ります。

<motion.div
  drag
  dragSnapToOrigin
  dragElastic={0.5}
  style={{ width: 60, height: 60, background: '#e11d48', borderRadius: '50%' }}
/>

Pan イベント

onPanStart、onPan、onPanEndを使うと、完全なドラッグモードを有効にせずに、パンジェスチャー中のカーソル位置を追跡できます。

<motion.div
  onPan={(event, info) => {
    console.log('Point:', info.point.x, info.point.y);
    console.log('Delta:', info.delta.x, info.delta.y);
  }}
/>

Drag イベント

ドラッグのライフサイクルイベントであるonDragStart、onDrag、onDragEndを監視できます。infoオブジェクトには速度とオフセットが含まれます。

<motion.div
  drag="x"
  onDragEnd={(event, info) => {
    if (info.velocity.x > 500) onSwipeRight();
    if (info.velocity.x < -500) onSwipeLeft();
  }}
/>

カードスワイプパターン

ドラッグの速度を使って離したときのスワイプ方向を検出し、Tinder のようなスワイプを実装します。

function SwipeCard({ onSwipe }) {
  return (
    <motion.div
      drag="x"
      dragConstraints={{ left: 0, right: 0 }}
      dragElastic={0.7}
      onDragEnd={(_, info) => {
        if (Math.abs(info.velocity.x) > 400) {
          onSwipe(info.velocity.x > 0 ? 'right' : 'left');
        }
      }}
    />
  );
}

確認問題

ドラッグ中の要素を離したときに元の位置へスナップバックさせる Framer Motion の prop はどれですか？

まとめ

インタラクティブな状態のアニメーションにはwhileHover、whileTap、whileFocusを使います。ドラッグ可能な要素にはdragを追加し、dragConstraintsで範囲を制限して、onDragEndの速度でスワイプを検出します。

よくある質問

「ジェスチャーアニメーション：Hover、Tap、Drag」レッスンは無料ですか？

はい。「ジェスチャーアニメーション：Hover、Tap、Drag」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。

「ジェスチャーアニメーション：Hover、Tap、Drag」で何を学びますか？

whileHover、whileTap、drag propsを使い、ユーザーのジェスチャーに応じてコンポーネントをアニメーションさせます。ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「ジェスチャーアニメーション：Hover、Tap、Drag」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Academyレッスンでコードを書いて実行できますか？

はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← React Academyに戻る