旋转球并将其从顶部圆圈移动到底部圆圈

let canvas = document.querySelector('canvas');
let context = canvas.getContext('2d');
canvas.width = window.innerWidth - 60;
canvas.height = window.innerHeight - 40;

class Circle {
  constructor(x, y, radius, color) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.color = color;
  }

  draw() {
    context.beginPath();
    context.strokeStyle = '#0f0';
    context.fillStyle = this.color;
    context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
    context.stroke();
    context.fill();
    context.closePath();
  }
}

let bigTopCircle = new Circle(canvas.width / 2, canvas.height / 4, 130, '#000000');

let smallTopCircle = new Circle(
  bigTopCircle.x,
  bigTopCircle.y,
  bigTopCircle.radius / 1.3,
  '#0B0F1A',
);

let bigBottomCircle = new Circle(canvas.width / 2, canvas.height * 0.63, 130, '#000000');

let smallBottomCircle = new Circle(
  bigBottomCircle.x,
  bigBottomCircle.y,
  bigBottomCircle.radius / 1.3,
  '#0B0F1A',
);

class Ball {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.radius = 10;
    this.angle = 0;
    this.angle2 = 0;
    this.shouldGoToSecondCircle = false;
  }
  draw() {
    context.beginPath();
    context.fillStyle = 'red';
    context.lineCap = 'round';
    context.lineJoin = 'round';
    context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
    context.fill();
    context.closePath();
  }
  update() {
    //* this to rotate the ball on the top big circle

    let bx = this.x - bigTopCircle.x;
    let by = this.y - bigTopCircle.y;
    let ballPosition = Math.atan2(by, bx);

    // here check if the ball is in the bottom part of top circle
    if (ballPosition > Math.PI / 2 || this.shouldGoToSecondCircle) {
      // if yes start rotating the ball on the bottom part
      this.shouldGoToSecondCircle = true;
      let newCenterX = bigBottomCircle.x;
      let newCenterY = bigBottomCircle.y;
      let newRadiusDiff = (bigBottomCircle.radius + smallBottomCircle.radius) / 2;
      this.x = newCenterX + newRadiusDiff * Math.cos(-Math.PI / 2 + this.angle2);
      this.y = newCenterY + newRadiusDiff * Math.sin(-Math.PI / 2 + this.angle2);
      this.angle2 -= 0.01;

      console.log(ballPosition);
    }

    // here if the ball is not on the bottom part rotate in top circle
    if (!this.shouldGoToSecondCircle) {
      let centerX = bigTopCircle.x;
      let centerY = bigTopCircle.y;
      let radiusDiff = (bigTopCircle.radius + smallTopCircle.radius) / 2;
      this.x = centerX + radiusDiff * Math.cos(this.angle);
      this.y = centerY + radiusDiff * Math.sin(this.angle);
      this.angle += 0.01;
    }
  }
}

let ball = new Ball(bigTopCircle.x, bigTopCircle.y);

function animate() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  ball.update();
  bigTopCircle.draw();
  bigBottomCircle.draw();
  smallBottomCircle.draw();
  smallTopCircle.draw();
  ball.draw();
  requestAnimationFrame(animate);
}
animate();

* {
     background-color: #0b0f1a;
}

canvas {
     position: absolute;
     background-color: #0b0f1a;
     border: 1px solid red;
     box-shadow: 1px 1px 5px 5px green;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
}

<canvas></canvas>