多个球沿椭圆轨迹运动鼠标控制启停

实现这个功能，可以按照以下步骤进行：

1. 创建多个球和一个控制按钮。
2. 为每个球设置一个椭圆轨迹运动的动画，使其沿着椭圆轨迹运动。
3. 为控制按钮添加鼠标点击事件监听器，当点击按钮时，判断当前球的状态，如果正在运动则停止，如果已经停止则启动。
4. 在鼠标移动事件监听器中，获取当前鼠标位置，并将每个球的位置设置为鼠标位置，从而实现鼠标控制球的位置。

下面是一个简单的示例代码：

HTML部分：

<button id="btn">启动/停止</button>
<div id="container">
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
</div>

CSS部分：

#container {
  position: relative;
  height: 300px;
  width: 500px;
  border: 1px solid #ccc;
}

.ball {
  position: absolute;
  top: 0;
  left: 0;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background-color: #f00;
}

JavaScript部分：

// 获取元素
var btn = document.getElementById('btn');
var container = document.getElementById('container');
var balls = document.querySelectorAll('.ball');

// 初始化球的位置
var mouseX = 0;
var mouseY = 0;
balls.forEach(function(ball) {
  ball.style.left = mouseX + 'px';
  ball.style.top = mouseY + 'px';
});

// 创建动画
var anims = [];
balls.forEach(function(ball) {
  var anim = anime({
    targets: ball,
    left: function() {
      return Math.cos(anime.get('loopProgress') * 360) * 200 + mouseX;
    },
    top: function() {
      return Math.sin(anime.get('loopProgress') * 360) * 100 + mouseY;
    },
    easing: 'linear',
    duration: 2000,
    loop: true
  });
  anim.pause();
  anims.push(anim);
});

// 启动/停止动画
var isRunning = false;
btn.addEventListener('click', function() {
  isRunning = !isRunning;
  if (isRunning) {
    anims.forEach(function(anim) {
      anim.play();
    });
    btn.innerText = '停止';
  } else {
    anims.forEach(function(anim) {
      anim.pause();
    });
    btn.innerText = '启动';
  }
});

// 鼠标控制球的位置
container.addEventListener('mousemove', function(event) {
  mouseX = event.clientX;
  mouseY = event.clientY;
  balls.forEach(function(ball) {
    ball.style.left = mouseX + 'px';
    ball.style.top = mouseY + 'px';
  });
});

在这个示例中，我们使用了Anime.js库来创建球的动画。每个球都沿着一个椭圆轨迹运动，而且球的位置可以通过鼠标控制。当点击控制按钮时，可以启动或停止球的动画。