vue生成动态坐标点并将坐标点添加动画

好的，可以使用Vue.js和CSS3动画来实现生成动态坐标点并添加动画效果的功能。

首先，你需要在Vue.js中定义一个数组来存储坐标点的位置信息，例如：

data() {
  return {
    points: [
      { x: 100, y: 100 },
      { x: 200, y: 200 },
      { x: 300, y: 300 }
    ]
  }
}

然后，在Vue的模板中使用v-for指令来循环渲染这些坐标点，并使用CSS3动画效果来让它们动起来，例如：

<div class="point" v-for="(point, index) in points" :key="index"
  :style="{ left: point.x + 'px', top: point.y + 'px' }"
  :class="{ 'animated': point.animated }">
</div>

这里的.point样式可以自定义，可以设置它的宽度、高度、背景颜色等属性来让它看起来像一个点。

接下来，你可以使用Vue的生命周期钩子函数mounted来触发一个函数，在这个函数中使用JavaScript来为每个坐标点添加一个CSS3动画效果，例如：

mounted() {
  this.points.forEach((point, index) => {
    setTimeout(() => {
      point.animated = true;
    }, index * 200);
  });
}

这个函数会遍历每个坐标点，然后使用setTimeout函数来为每个点添加一个CSS3动画效果，其中index * 200是一个延迟时间，可以让每个点的动画效果有一定的间隔，让它们看起来更加自然。

最后，你可以在CSS中定义一个类.animated，来设置坐标点的动画效果，例如：

.point.animated {
  animation: move 1s ease-out;
}

@keyframes move {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

这里的动画效果是一个简单的放大和淡入淡出的效果，你可以自定义它来让它看起来更加炫酷。

总之，使用Vue.js和CSS3动画可以很容易地实现生成动态坐标点并添加动画效果的功能，希望我的回答对你有帮助。