這是我很長一段時(shí)間以來一直想嘗試的小片段。我終於開始重新建立 Google 地圖的這項(xiàng)標(biāo)誌性功能：拖放這個(gè)名為 街景小人 的小傢伙，即可切換到街景視圖。

TL;DR
點(diǎn)選並拖曳右下角的小圖示到地圖上：

超文本標(biāo)記語言

結(jié)構(gòu)很簡單。我有：

• 用作容器的#map（應(yīng)用了背景圖像）。
• 位於右下角的#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);
}

旋轉(zhuǎn)值會(huì)根據(jù)使用者互動(dòng)而變化，我們接下來將深入探討。

JavaScript

這裡的一切都圍繞著使用者互動(dòng)。 JavaScript 句柄：

• 監(jiān)聽滑鼠事件。
• 動(dòng)態(tài)更新街景小人的位置與旋轉(zhuǎn)。
• 加入流暢的動(dòng)畫以獲得更好的使用者體驗(yàn)。

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

讓我們分解每個(gè)功能：

滑鼠按下時(shí)

這透過記錄初始滑鼠位置並切換 isDragging 標(biāo)誌來開始拖曳。

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

滑鼠移動(dòng)時(shí)

這會(huì)處理街景小人在拖曳過程中的移動(dòng)和旋轉(zhuǎn)。它確保：

• 旋轉(zhuǎn)保持在一定範(fàn)圍內(nèi)（以避免超人飛行等極端角度）。
• 旋轉(zhuǎn)值使用--r動(dòng)態(tài)更新。

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

滑鼠按下時(shí)

一旦使用者停止拖曳，就會(huì)重置街景小人的狀態(tài)：

• 旋轉(zhuǎn)重設(shè)為 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);
};

最後的想法

此片段強(qiáng)調(diào)了簡單的動(dòng)畫和互動(dòng)性如何重新創(chuàng)建標(biāo)誌性的使用者體驗(yàn)。重點(diǎn)：

• 使用 CSS 自訂屬性（如 --r）使樣式保持動(dòng)態(tài)且易於管理。
• 旋轉(zhuǎn)限制確保了使用者互動(dòng)的完美、自然的感覺。
• 超時(shí)和緩動(dòng)動(dòng)畫為動(dòng)作增添了真實(shí)感。

請隨意分叉 CodePen，進(jìn)行更改並讓我知道您的想法！ ???

順便一提...

我使用的是Google的原始精靈，你可以在這裡看到並進(jìn)行實(shí)驗(yàn)：

• 跑道狀態(tài)
• 掉落狀態(tài)
• 懸空狀態(tài)

你知道嗎？ ? 我用的谷歌地圖位置才是真正的聖誕老人村！
有趣的事實(shí)：聖誕老人的芬蘭名字是 Joulupukki，他來自芬蘭???

以上是如何從 Google 地圖重新創(chuàng)建標(biāo)誌性街景小人的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！