vue 箭头顺着路线动态走动

你可以使用 Vue.js 的动画特性来实现箭头顺着路线动态走动的效果。下面是一个简单的示例代码：

<template>
  <div class="container">
    <div class="arrow" :style="arrowStyles"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arrowStyles: {
        left: 0,
        top: 0
      }
    };
  },
  mounted() {
    this.animateArrow();
  },
  methods: {
    animateArrow() {
      const container = document.querySelector('.container');
      const arrow = document.querySelector('.arrow');
      const path = [
        { x: 100, y: 100 },
        { x: 200, y: 200 },
        { x: 300, y: 150 },
        // 添加更多路径点...
      ];

      let currentPathIndex = 0;

      const animate = () => {
        if (currentPathIndex >= path.length) {
          currentPathIndex = 0;
        }

        const { x, y } = path[currentPathIndex];

        // 使用 CSS 动画移动箭头
        arrow.style.transform = `translate(${x}px, ${y}px)`;

        currentPathIndex++;

        // 在下一个动画帧执行下一次动画
        requestAnimationFrame(animate);
      };

      animate();
    }
  }
};
</script>

<style>
.container {
  position: relative;
  width: 500px;
  height: 500px;
}

.arrow {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: red;
}
</style>

在上述代码中，我们使用 Vue 组件的 `mounted` 钩子函数来启动箭头的动画。`animateArrow()` 方法使用 `requestAnimationFrame` 函数来更新箭头的位置，使其沿着预先定义的路径移动。你可以根据需要修改 `path` 数组中的路径点。在样式中，我们使用了绝对定位将箭头放置在容器中，并给它一个红色的背景色。当你在浏览器中运行这个代码时，你会看到箭头按照定义的路径动态地移动。