So erstellen Sie den legendären Pegman aus Google Maps neu

Das ist ein kleiner Ausschnitt, den ich schon seit Längerem ausprobieren wollte. Endlich bin ich dazu gekommen, dieses ikonische Feature von Google Maps nachzubilden: die Möglichkeit, diesen kleinen Kerl, bekannt als Pegman, per Drag-and-Drop zu Street View zu wechseln.

TL;DR
Klicken Sie auf das kleine Symbol in der unteren rechten Ecke und ziehen Sie es über die Karte:

HTML

Die Struktur ist unkompliziert. Ich habe:

• Eine #Karte, die als Container dient (mit einem angewendeten Hintergrundbild).
• Ein #Pegman-Container in der unteren rechten Ecke.
• Das #pegman-Element selbst für den ziehbaren Charakter.

<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);
}

Der Rotationswert ändert sich basierend auf der Benutzerinteraktion, auf die wir als Nächstes näher eingehen werden.

Javascript

Hier dreht sich alles um die Benutzerinteraktion. JavaScript-Handles:

• Auf Mausereignisse achten.
• Pegmans Position und Drehung werden dynamisch aktualisiert.
• Hinzufügen flüssiger Animationen für eine bessere 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);

Lassen Sie uns jede Funktion aufschlüsseln:

onMouseDown

Dadurch wird das Ziehen gestartet, indem die anfängliche Mausposition aufgezeichnet und das isDragging-Flag umgeschaltet wird.

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

onMouseMove

Dies verwaltet Pegmans Bewegung und Drehung während des Ziehens. Es gewährleistet:

• Die Drehung bleibt innerhalb eines bestimmten Bereichs (um extreme Winkel wie Superman-Fliegen zu vermeiden).
• Der Rotationswert wird dynamisch mit --r aktualisiert.

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);
};

onMouseUp

Dadurch wird Pegmans Status zurückgesetzt, sobald der Benutzer aufhört zu ziehen:

• Rotation wird auf 0 zurückgesetzt.
• Pegman kehrt sanft in seine ursprüngliche Position zurück.

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);
};

Letzte Gedanken

Dieser Ausschnitt zeigt, wie einfache Animationen und Interaktivität ein ikonisches Benutzererlebnis schaffen können. Wichtige Erkenntnisse:

• Durch die Verwendung benutzerdefinierter CSS-Eigenschaften (wie --r) bleibt das Styling dynamisch und überschaubar.
• Rotationsbegrenzungen sorgen für ein ausgefeiltes, natürliches Gefühl bei Benutzerinteraktionen.
• Auszeiten und Beschleunigungsanimationen verleihen der Bewegung Realismus.

Fühlen Sie sich frei, den CodePen zu teilen, Änderungen vorzunehmen und mir Ihre Meinung mitzuteilen! ???️

Übrigens...

Ich verwende die Original-Sprites von Google, die Sie hier sehen und experimentieren können:

• Landebahnzustand
• Drop-Status
• baumelnder Zustand

Wussten Sie schon? ✨ Der Google Maps-Standort, den ich verwendet habe, ist das echte Weihnachtsmanndorf!
Lustige Tatsache: Der finnische Name des Weihnachtsmanns ist Joulupukki und er stammt ursprünglich aus Finnland ???