Vue3 实现一个简单的方位动画

这是最近遇到的一个有点意思的需求,需要根据后端返回的数据,在一块地图的具体的方位上显示对应位置标识(位置图钉)。不用十分精确,只要能表现出大致的方位即可。

类似下面的效果,有点像游戏里的地图标识。

设计思路

由于不用十分精确,就用最简单的 div + css 来实现位置标识的显示和动画。之后再通过配合背景图片来保证最基础的效果。

方位总共 9 个,东南西北中加上四个角,通过 Grid 布局让其形成 3 * 3 的格子。位置标识只需要根据方位数据出现在对应的 div 中即可。

最后将这些方位用一个 div 包裹起来,只要设置外层 div 的背景即可实现。

代码实现和 Demo 演示

梳理清思路后,代码实现就比较简单了。这里用 Vue3 在 CodeSandbox 由于这里无法渲染,放上链接和部分代码。也可以在我的博客上看到 Demo。

Demo 地址:codesandbox.io/p/devbox/si...

部分关键代码:

html 复制代码
<template>
  <!-- 九宫格部分 -->
  <div class="display">
    <div class="direction-container">
      <div v-for="direction in directions" :key="direction.value" class="item">
        <div v-if="selectedDirection === direction.value" class="pin"></div>
      </div>
    </div>
  </div>

  <!-- 下拉框 -->
</template>

<script setup>
import { ref } from "vue";

const directions = [
  { name: "north-west", value: "nw" },
  { name: "north", value: "n" },
  { name: "north-east", value: "ne" },
  { name: "west", value: "w" },
  { name: "center", value: "c" },
  { name: "east", value: "e" },
  { name: "south-west", value: "sw" },
  { name: "south", value: "s" },
  { name: "south-east", value: "se" },
];

const selectedDirection = ref(directions[0].value);
</script>

<style scoped>
/* 抖动动画 */
@keyframes shake {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(10px);
  }
}

.direction-container {
  ...
  /* 3*3 grid 布局 */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  ...
}

.item {
  ...
}

.pin {
  /*坐标动画和位置*/
  ...
  animation: shake 0.5s ease infinite alternate;
}
</style>

拓展

在这个实现下,要获得不错的效果主要依赖背景图片是否合适,图片大小、边缘留白等都会影响最终的效果。如果是针对不规则的地形组合,可能用 SVG 或 Canvas 来实现更好,但相对的代码复杂度也会上升。

除了方位标识,类似的实现也可以拓展到其他场景,比如车厢内的座位标识,停车场的车位标识等。

本文由mdnice多平台发布

相关推荐
小约翰仓鼠4 分钟前
vue3子组件获取并修改父组件的值
前端·javascript·vue.js
Lin Hsüeh-ch'in6 分钟前
Vue 学习路线图(从零到实战)
前端·vue.js·学习
烛阴21 分钟前
bignumber.js深度解析:驾驭任意精度计算的终极武器
前端·javascript·后端
计蒙不吃鱼29 分钟前
一篇文章实现Android图片拼接并保存至相册
android·java·前端
全职计算机毕业设计1 小时前
基于Java Web的校园失物招领平台设计与实现
java·开发语言·前端
你的人类朋友1 小时前
✍️Node.js CMS框架概述:Directus与Strapi详解
javascript·后端·node.js
啊~哈1 小时前
vue3+elementplus表格表头加图标及文字提示
前端·javascript·vue.js
xiaogg36781 小时前
vue+elementui 网站首页顶部菜单上下布局
javascript·vue.js·elementui
weixin_527550402 小时前
初级程序员入门指南
javascript·python·算法
小小小小宇2 小时前
前端小tips
前端