چگونه یک آدمک نمادین را از نقشه گوگل بازسازی کنیم

Summarize this content to 400 words in Persian Lang
این یک قطعه کوچک است که مدت زیادی است می خواهم امتحان کنم. در نهایت توانستم این ویژگی نمادین را از Google Maps بازسازی کنم: توانایی کشیدن و رها کردن این پسر کوچک، معروف به آدمک، برای جابجایی به نمای خیابان.

TL; DRنماد کوچک موجود در گوشه سمت راست پایین را روی نقشه کلیک کرده و بکشید:

HTML

ساختار ساده است. من دارم:

الف #map برای خدمت به عنوان ظرف (با یک تصویر پس زمینه اعمال شده).
الف #pegman-container در گوشه پایین سمت راست قرار گرفته است.
را #pegman خود عنصر برای کاراکتر قابل کشیدن.

id=”map”>
id=”pegman-container”>
id=”pegman”>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

CSS

تعیین موقعیت همه چیز ساده است، همانطور که در کد منبع بالا می بینید، اما مهمترین بخش این است rotate دارایی این به صورت پویا با استفاده از جاوا اسکریپت به روز می شود:

#pegman {
/* other styles */
rotate: var(–r);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

را rotate تغییرات ارزش بر اساس تعامل کاربر، که در ادامه به آن خواهیم پرداخت.

جاوا اسکریپت

همه چیز در اینجا حول محور تعامل کاربر می چرخد. دسته های جاوا اسکریپت:

گوش دادن به رویدادهای ماوس
به روز رسانی موقعیت و چرخش آدمک به صورت پویا.
افزودن انیمیشن های روان برای 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);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بیایید هر تابع را تجزیه کنیم:

روی ماوس پایین

این کار کشیدن را با ثبت موقعیت اولیه ماوس و جابجایی آن آغاز می کند isDragging پرچم

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

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

روی MouseMove

این حرکت و چرخش آدمک را در حین کشیدن کنترل می کند. تضمین می کند:

چرخش در یک محدوده باقی می ماند (برای جلوگیری از زوایای شدید مانند پرواز سوپرمن).
را rotate به روز رسانی ارزش به صورت پویا با استفاده از –r.

const onMouseMove = (e) => {
if (!isDragging) return;
// only runs if the onMouseMove was fired

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

هنگامی که کاربر کشیدن را متوقف کند، وضعیت آدمک بازنشانی می‌شود:

چرخش به 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 را چنگال کنید، تغییراتی ایجاد کنید و نظر خود را به من بگویید! 🚀🗺️

اتفاقا…

من از sprites اصلی گوگل استفاده می کنم که می توانید اینجا ببینید و آزمایش کنید:

آیا می دانستید؟ ✨ مکان Google Maps که من استفاده کردم روستای بابا نوئل واقعی است! واقعیت جالب: نام فنلاندی بابانوئل Joulupukki است و او اصالتاً فنلاند است 🎅🏻🎄

 id="map">
  
 id="pegman-container">
    
 id="pegman"> 
  

#pegman {
  /* other styles */
  rotate: var(--r);
}

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

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

const onMouseMove = (e) => {
  if (!isDragging) return;
  // only runs if the onMouseMove was fired

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

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