Comment recréer l'emblématique Pegman à partir de Google Maps

C'est un petit extrait que je voulais essayer depuis un certain temps. J'ai finalement réussi à recréer cette fonctionnalité emblématique de Google Maps : la possibilité de glisser-déposer ce petit bonhomme, connu sous le nom de Pegman, pour passer à Street View.

TL;DR
Cliquez et faites glisser la petite icône dans le coin inférieur droit sur la carte :

HTML

La structure est simple. J'ai :

• Une #carte pour servir de conteneur (avec une image d'arrière-plan appliquée).
• Un conteneur #pegman positionné dans le coin inférieur droit.
• L'élément #pegman lui-même pour le personnage déplaçable.

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

La valeur de rotation change en fonction de l'interaction de l'utilisateur, que nous aborderons ensuite.

Javascript

Tout ici tourne autour de l'interaction avec l'utilisateur. Poignées JavaScript :

• Écoute des événements de souris.
• Mise à jour dynamique de la position et de la rotation de Pegman.
• Ajout d'animations fluides pour une meilleure 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);

Décomposons chaque fonction :

surMouseDown

Cela démarre le glisser en enregistrant la position initiale de la souris et en basculant l'indicateur isDragging.

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

surMouseMove

Cela gère le mouvement et la rotation de Pegman pendant le glissement. Il assure :

• La rotation reste dans une plage (pour éviter les angles extrêmes comme le vol de Superman).
• La valeur de rotation est mise à jour dynamiquement en utilisant --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);
};

surMouseUp

Cela réinitialise l'état de Pegman une fois que l'utilisateur arrête de glisser :

• La rotation est réinitialisée à 0.
• Pegman revient en douceur à sa position initiale.

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

Pensées finales

Cet extrait montre comment des animations simples et l'interactivité peuvent recréer une expérience utilisateur emblématique. Points clés à retenir :

• L'utilisation de propriétés personnalisées CSS (comme --r) permet de conserver un style dynamique et gérable.
• Les limites de rotation garantissent une sensation soignée et naturelle pour les interactions des utilisateurs.
• Les délais d'attente et les animations d'assouplissement ajoutent du réalisme au mouvement.

N'hésitez pas à utiliser le CodePen, à apporter des modifications et à me dire ce que vous en pensez ! ??️

D'ailleurs...

J'utilise les sprites originaux de Google, que vous pouvez voir ici et faire des expériences :

• état de la piste
• état abandonné
• état suspendu

Le saviez-vous ? ✨ L'emplacement Google Maps que j'ai utilisé est le vrai Village du Père Noël !
Fait amusant : Le nom finlandais du Père Noël est Joulupukki, et il est originaire de Finlande ???

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!