基于Vue3实现一个简单的方位动画
作者：无责任此方_修行中
这篇文章主要为大家详细介绍了如何基于Vue3实现一个简单的方位动画,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
这是最近遇到的一个有点意思的需求，需要根据后端返回的数据，在一块地图的具体的方位上显示对应位置标识（位置图钉）。不用十分精确，只要能表现出大致的方位即可。
类似下面的效果，有点像游戏里的地图标识。
设计思路
由于不用十分精确，就用最简单的 div + css 来实现位置标识的显示和动画。之后再通过配合背景图片来保证最基础的效果。
方位总共 9 个，东南西北中加上四个角，通过 Grid 布局让其形成 3 * 3 的格子。位置标识只需要根据方位数据出现在对应的 div 中即可。
最后将这些方位用一个 div 包裹起来，只要设置外层 div 的背景即可实现。
代码实现和 Demo 演示
梳理清思路后，代码实现就比较简单了。这里用 Vue3 在 CodeSandbox 由于这里无法渲染，放上链接和部分代码。也可以在我的博客上看到 Demo。
部分关键代码：
<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 来实现更好，但相对的代码复杂度也会上升。
除了方位标识，类似的实现也可以拓展到其他场景，比如车厢内的座位标识，停车场的车位标识等。
到此这篇关于基于Vue3实现一个简单的方位动画的文章就介绍到这了,更多相关Vue3方位动画内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！