HTML5和JS实现太阳、地球、月亮运行动画

一个简单的地球绕太阳旋转，月亮绕地球旋转的动画效果。注意，这是一个简化的模型，地球运行的圆形轨道的中心是太阳的圆心，月球运行的圆形轨道的圆心是地球的圆心。实际的我们知道天体运动要复杂得多。效果如下：

源码如下：

<!DOCTYPE html>
<html>
<head>
  <title>地球绕太阳转动画</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
    #sun {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 150px;
      height: 150px;
      background-color: yellow;
      border-radius: 50%;
    }
    #earth {
      position: absolute;
      width: 50px;
      height: 50px;
      background-color: blue;
      border-radius: 50%;
    }
    #moon {
      position: absolute;
      width: 20px;
      height: 20px;
      background-color: #C0C0C0;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div id="sun"></div>
  <div id="earth"></div>
  <div id="moon"></div>

  <script>
    window.addEventListener("load", function() {
      // 获取太阳、地球和月球元素
      var sun = document.getElementById("sun");
      var earth = document.getElementById("earth");
      var moon = document.getElementById("moon");

      // 计算各个元素半径
      var sunRadius = sun.offsetWidth / 2;
      var earthRadius = earth.offsetWidth / 2;
      var moonRadius = moon.offsetWidth / 2;

      // 计算窗口中心坐标
      var centerX = window.innerWidth / 2;
      var centerY = window.innerHeight / 2;

      // 计算地球和月球的轨道半径
      var earthOrbitRadius = Math.min(centerX, centerY) - earthRadius - sunRadius;
      var moonOrbitRadius = earthRadius + moonRadius + 30; // 添加了+30，使月球和地球之间有一定的间隙

      // 地球和月球的角度
      var earthAngle = 0;
      var moonAngle = 0;

      function animateEarth() {
        // 根据地球的角度和轨道半径计算地球的位置
        var earthX = centerX + Math.cos(earthAngle) * earthOrbitRadius - earthRadius;
        var earthY = centerY + Math.sin(earthAngle) * earthOrbitRadius - earthRadius;

        // 更新地球的位置
        earth.style.left = earthX + "px";
        earth.style.top = earthY + "px";

        // 更新地球的角度
        earthAngle += 0.01;

        // 根据月球的角度和轨道半径计算月球的位置
        var moonX = earthX + earthRadius + Math.cos(moonAngle) * moonOrbitRadius - moonRadius;
        var moonY = earthY + earthRadius + Math.sin(moonAngle) * moonOrbitRadius - moonRadius;

        // 更新月球的位置
        moon.style.left = moonX + "px";
        moon.style.top = moonY + "px";

        // 更新月球的角度
        moonAngle += 0.03;

        // 请求下一帧动画
        requestAnimationFrame(animateEarth);
      }

      // 开始动画
      animateEarth();
    });
  </script>
</body>
</html>

在这个示例中，我们使用CSS来创建太阳和地球的样式，并使用JavaScript来实现地球绕太阳旋转的动画。

HTML5和JS实现太阳、地球、月亮运行动画

HTML5和JS实现太阳、地球、月亮运行动画

猜你喜欢