vue：图片动画循环

Question

有一个大量图片的数组，现在要完成一个循环动画，就是一块区域随机出现几张图片(不重叠)，出现后运动到另一块区域慢慢消失，这几张图片运动的同时这块区域又随机出现几张图片，出现后再运动到另一区域慢慢消失，以此循环，单一动画好写，这个怎么衔接上哎，没有违和感的那种, 别天天chatgpt，自己都没看过，复制粘贴就回答，有意思嘛

Answer 1

首先，要实现这个动画，需要使用 HTML、CSS 和 JavaScript。需要创建一个包含所有图片的数组，然后使用 JavaScript 生成随机数来选择要显示的图片。然后，选择的图片会在页面上创建一个元素，并使用 CSS 设置其位置、大小和动画效果。

当图片开始运动到另一个区域时，需要使用 CSS 动画和/或 JavaScript 动画来实现平滑的移动效果。当图片到达新位置时，它会慢慢消失，同时新的图片会随机出现。

为了实现这个循环，可以使用 JavaScript 定时器来定期启动新一轮动画。在每次循环中，需要删除先前的图片和元素，并随机选择新的图片来显示。

下面是一些示意代码，以帮助你开始实现这个动画：

HTML：

<div id="container"></div>

CSS：

#container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.image {
  position: absolute;
  animation: move 5s forwards;
}

@keyframes move {
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

JavaScript：

var images = [
  "image1.png",
  "image2.png",
  "image3.png",
  // ...
];

var container = document.getElementById("container");

setInterval(function() {
  // Remove previous images
  var prevImages = container.querySelectorAll(".image");
  for (var i = 0; i < prevImages.length; i++) {
    container.removeChild(prevImages[i]);
  }

  // Choose new images to display
  var numImages = Math.floor(Math.random() * 4) + 1; // Random between 1 and 4
  for (var i = 0; i < numImages; i++) {
    var index = Math.floor(Math.random() * images.length);
    var imageSrc = images[index];
    var imageSize = Math.floor(Math.random() * 200) + 100; // Random between 100 and 300
    var imageX = Math.floor(Math.random() * (container.offsetWidth - imageSize - 20)) + 10; // Random position within container
    var imageY = Math.floor(Math.random() * (container.offsetHeight - imageSize - 20)) + 10;

    var image = document.createElement("img");
    image.src = imageSrc;
    image.className = "image";
    image.style.width = imageSize + "px";
    image.style.height = imageSize + "px";
    image.style.left = imageX + "px";
    image.style.top = imageY + "px";

    container.appendChild(image);
  }
}, 5000);

在上面的代码中，我们设置了一个每5秒重复一次的定时器。在每次循环中，我们首先删除原始图片，然后使用 Math.random() 函数来选择新的图片。我们选择的数量和大小是随机生成的，位置也是在容器内随机确定的。

在添加新图片后，我们设置了一个 CSS 动画，它让每个图片从左到右移动并慢慢淡出。注意，在动画结束时，我们不是从 DOM 中删除图片，而是让它们自然地淡出，因为 CSS 动画只有在元素保持 DOM 中时才能运行。