拾取移动动画

src/views/block/MapGame.vue

@@ -819,6 +819,84 @@ async function taskLogic(tileMap) {
   }
 }
 
+// 物品拾取动画函数 - 放大晃动两下然后移动到左上角物品容器
+async function animateItemPickup(item, itemX, itemY) {
+  // 创建临时动画元素
+  const tempItem = document.createElement('div');
+  const iconSize = tileSize.value * CONFIG.STYLES.PLAYER_SIZE_RATIO;
+  const marginSize = tileSize.value * CONFIG.STYLES.PLAYER_SIZE_MARGIN;
+  
+  // 计算物品在地图上的实际位置
+  const mapContainer = document.querySelector('.map-container');
+  const mapRect = mapContainer.getBoundingClientRect();
+  const itemLeft = itemX * tileSize.value - tileSize.value + marginSize;
+  const itemTop = itemY * tileSize.value - tileSize.value + marginSize;
+  
+  // 获取携带物品容器的位置（左上角）
+  const carriedContainer = document.querySelector('.carried-items-container');
+  let containerLeft = 30; // 默认值，如果容器不存在
+  let containerTop = 30; // 默认值，如果容器不存在
+  
+  if (carriedContainer) {
+    const containerRect = carriedContainer.getBoundingClientRect();
+    containerLeft = containerRect.left - mapRect.left + 10; // 加上内边距
+    containerTop = containerRect.top - mapRect.top + 10; // 加上内边距
+  }
+  
+  // 设置临时元素样式
+  Object.assign(tempItem.style, {
+    position: 'absolute',
+    left: itemLeft + 'px',
+    top: itemTop + 'px',
+    width: iconSize + 'px',
+    height: iconSize + 'px',
+    backgroundImage: `url(${item.img})`,
+    backgroundSize: 'contain',
+    backgroundPosition: 'center',
+    backgroundRepeat: 'no-repeat',
+    zIndex: '100', // 确保在最上层
+    transition: 'transform 0.3s ease-out',
+    transform: 'scale(1)',
+  });
+  
+  // 将临时元素添加到地图容器
+  const mapBackground = document.querySelector('.map-background');
+  mapBackground.appendChild(tempItem);
+  
+  // 强制重排，确保动画能正常触发
+  await nextTick();
+  
+  // 第一下放大晃动
+  tempItem.style.transform = 'scale(1.3) translateX(-5px)';
+  await new Promise(resolve => setTimeout(resolve, 150));
+  
+  // 第二下放大晃动
+  tempItem.style.transform = 'scale(1.3) translateX(5px)';
+  await new Promise(resolve => setTimeout(resolve, 150));
+  
+  // 准备移动动画
+  tempItem.style.transition = 'all 1.2s ease-out'; // 减慢动画速度
+  
+  // 平行移动到容器位置，同时调整大小
+  const finalSize = tileSize.value * CONFIG.STYLES.PLAYER_SIZE_RATIO * 0.3;
+  Object.assign(tempItem.style, {
+    left: containerLeft + 'px',
+    top: containerTop + 'px',
+    width: finalSize + 'px',
+    height: finalSize + 'px',
+    opacity: '0.8', // 稍微淡化
+    transform: 'scale(1)',
+  });
+  
+  // 等待动画完成
+  await new Promise(resolve => setTimeout(resolve, 1200));
+  
+  // 移除临时元素
+  if (mapBackground.contains(tempItem)) {
+    mapBackground.removeChild(tempItem);
+  }
+}
+
 // 拾取物品函数
 window.pickupItem = async function()  {
   //取人物当前位置
@@ -832,6 +910,9 @@ window.pickupItem = async function()  {
 
     // 处理携带物品逻辑
     if (tileMap && tileMap.img) {
+      // 执行物品拾取动画：放大晃动两下然后移动到左上角物品容器
+      await animateItemPickup(tileMap, x, y);
+      
       // 将物品添加到玩家携带物品中
       gameState.player.carriedItems.push({
         ...tileMap,
@@ -1491,7 +1572,7 @@ onUnmounted(() => {
   //border: 1px solid rgba(52, 152, 219, 0.5);
   //box-sizing: border-box;
   //是否显示可行路线
-  opacity: 0;
+  opacity: 1;
 }
 
 /* 玩家样式 */