Google マップから象徴的なペグマンを再作成する方法

これは、私が長い間試してみたかった小さなスニペットです。私はついに、Google マップのこの象徴的な機能を再現することにしました。ペグマン として知られるこの小さな男をドラッグ アンド ドロップしてストリート ビューに切り替える機能です。

TL;DR
地図上の右下隅にある小さなアイコンをクリックしてドラッグします:

HTML

構造は単純です。私が持っているもの:

• コンテナとして機能する #map (背景画像が適用されています)。
• #pegman-container が右下隅に配置されています。
• ドラッグ可能なキャラクターの #pegman 要素自体。

<div>



<h2>
  
  
  CSS
</h2>

<p>Positioning everything is simple, as you can see in the source code above, but the most important part is the rotate property. This is dynamically updated using JavaScript:<br>
</p>

<pre class="brush:php;toolbar:false">#pegman {
  /* other styles */
  rotate: var(--r);
}

回転値はユーザーの操作に基づいて変化します。これについては次に詳しく説明します。

JavaScript

ここでのすべてはユーザー インタラクションを中心に展開します。 JavaScript ハンドル:

• マウス イベントをリッスンします。
• ペグマンの位置と回転を動的に更新します。
• UX を向上させるためにスムーズなアニメーションを追加します。

const pegman = document.querySelector('#pegman');
let isDragging = false;
let initialX = 0;
let initialY = 0;
let inactivityTimeout;
let lastX = 0;
const timeout = 25;
const maxDegrees = 50;

// Event listeners
pegman.addEventListener('mousedown', onMouseDown);
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);

各機能を詳しく見てみましょう:

onMouseDown

これは、マウスの初期位置を記録し、isDragging フラグを切り替えることによってドラッグを開始します。

const onMouseDown = (e) => {
  isDragging = true;
  initialX = e.clientX;
  initialY = e.clientY;
};

onMouseMove

ドラッグ中のペグマンの移動と回転を処理します。それは以下を保証します:

• 回転は一定の範囲内に留まります (スーパーマンの飛行のような極端な角度を避けるため)。
• 回転値は --r を使用して動的に更新されます。

const onMouseMove = (e) => {
  if (!isDragging) return;

  const dy = e.clientY - initialY;
  const dx = e.clientX - initialX;

  // Limit rotation range
  let rx = Math.max(-maxDegrees, Math.min(maxDegrees, dx - lastX));
  pegman.setAttribute('style', `--r: ${rx}deg`);

  // Animate Pegman's position
  pegman.animate({ translate: `${dx}px ${dy}px` }, {
    duration: 100,
    fill: 'forwards',
  });

  // Reset rotation after inactivity
  clearTimeout(inactivityTimeout);
  inactivityTimeout = setTimeout(() => {
    lastX = dx;
    pegman.setAttribute('style', `--r: 0deg`);
  }, timeout);
};

マウスアップ時

これにより、ユーザーがドラッグを停止するとペグマンの状態がリセットされます:

• 回転が 0 にリセットされます。
• ペグマンはスムーズに元の位置に戻ります。

const onMouseUp = () => {
  isDragging = false;

  // Reset rotation
  pegman.setAttribute('style', `--r: 0`);

  // Animate Pegman back to its original position
  pegman.animate({ translate: `0px 0px` }, {
    duration: 500,
    fill: 'forwards',
    easing: 'ease',
  });

  // Clear residual state
  inactivityTimeout = setTimeout(() => {
    lastX = 0;
  }, timeout);
};

最終的な考え

このスニペットは、シンプルなアニメーションとインタラクティブ性が象徴的なユーザー エクスペリエンスをどのように再現できるかを強調しています。重要なポイント:

• CSS カスタム プロパティ (--r など) を使用すると、スタイルを動的に管理しやすくなります。
• 回転制限により、ユーザー インタラクションの洗練された自然な感触が保証されます。
• タイムアウトとイージング アニメーションにより、モーションにリアリズムが加わります。

お気軽に CodePen をフォークして変更を加え、ご意見をお聞かせください。 ??️

ところで...

私は Google のオリジナルのスプライトを使用しています。これはここで確認して実験することができます:

• 滑走路の状態
• ドロップ状態
• ぶら下がり状態

知っていましたか? ✨ 私が使用した Google マップの場所は、本物のサンタクロース村です!
面白い事実: サンタさんのフィンランド名は Joulupukki で、フィンランド出身です ???