快捷導(dǎo)航

基于Vue3實(shí)現(xiàn)一個(gè)簡單的方位動(dòng)畫

更新時(shí)間：2024年02月29日 08:20:53 作者：無責(zé)任此方_修行中

這篇文章主要為大家詳細(xì)介紹了如何基于Vue3實(shí)現(xiàn)一個(gè)簡單的方位動(dòng)畫,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

設(shè)計(jì)思路

由于不用十分精確，就用最簡單的 div + css 來實(shí)現(xiàn)位置標(biāo)識(shí)的顯示和動(dòng)畫。之后再通過配合背景圖片來保證最基礎(chǔ)的效果。

方位總共 9 個(gè)，東南西北中加上四個(gè)角，通過 Grid 布局讓其形成 3 * 3 的格子。位置標(biāo)識(shí)只需要根據(jù)方位數(shù)據(jù)出現(xiàn)在對(duì)應(yīng)的 div 中即可。

最后將這些方位用一個(gè) div 包裹起來，只要設(shè)置外層 div 的背景即可實(shí)現(xiàn)。

代碼實(shí)現(xiàn)和 Demo 演示

梳理清思路后，代碼實(shí)現(xiàn)就比較簡單了。這里用 Vue3 在 CodeSandbox 由于這里無法渲染，放上鏈接和部分代碼。也可以在我的博客上看到 Demo。

Demo 地址

部分關(guān)鍵代碼：

<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>
/* 抖動(dòng)動(dòng)畫 */
@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 {
  /*坐標(biāo)動(dòng)畫和位置*/
  ...
  animation: shake 0.5s ease infinite alternate;
}
</style>

拓展

在這個(gè)實(shí)現(xiàn)下，要獲得不錯(cuò)的效果主要依賴背景圖片是否合適，圖片大小、邊緣留白等都會(huì)影響最終的效果。如果是針對(duì)不規(guī)則的地形組合，可能用 SVG 或 Canvas 來實(shí)現(xiàn)更好，但相對(duì)的代碼復(fù)雜度也會(huì)上升。

除了方位標(biāo)識(shí)，類似的實(shí)現(xiàn)也可以拓展到其他場(chǎng)景，比如車廂內(nèi)的座位標(biāo)識(shí)，停車場(chǎng)的車位標(biāo)識(shí)等。

到此這篇關(guān)于基于Vue3實(shí)現(xiàn)一個(gè)簡單的方位動(dòng)畫的文章就介紹到這了,更多相關(guān)Vue3方位動(dòng)畫內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: