圆锥曲线（椭圆）运动轨迹

良__

已于 2023-01-03 08:52:45 修改

阅读量273

点赞数

文章标签： javascript css3 前端 html

于 2022-12-30 15:46:44 首次发布

本文链接：https://blog.csdn.net/weixin_49533977/article/details/128496659

版权

圆锥曲线（椭圆）运动轨迹

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }

    body {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .box {
      border-radius: 50%;
      border: 1px solid rgb(53, 50, 237);
      position: relative;
    }

    .spot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: rgb(55, 199, 2);
      position: absolute;
      transition: all 0.1s linear;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="spot"></div>
  </div>
</body>
<script>
  var boxDom = document.querySelector(".box")
  var spotDom = document.querySelector(".spot")

  let width = 1000,//椭圆宽高
    height = 100,
    spotSize = 50//运动球体大小

  let a = width / 2
  let b = height / 2

  spotDom.style.top = (height - spotSize) / 2 + 'px'  //初始化球体位置
  spotDom.style.left = width - spotSize / 2 + 'px'

  editSize(width, height) //设置椭圆宽高
  editSpotSize(spotSize, spotSize) //设置球体大小

  //运动坐标
  let rowCoordinate = {
    x: width / 2,
    y: coordinateT(width / 2),
  }

  
  let flag = false //球体位置在坐标轴1,2象限为true，3、4象限为false

  let timer = setInterval(() => {
    rowCoordinate.x = flag ? rowCoordinate.x + 1 : rowCoordinate.x - 1
    rowCoordinate.y = coordinateT(rowCoordinate.x)
    if (rowCoordinate.x > 0 && rowCoordinate.x < a) {
      if (flag) {
        console.log(1);
        editSpotPositon(b - rowCoordinate.y, a + rowCoordinate.x)//1象限
      } else {
        console.log(4);
        editSpotPositon(b + rowCoordinate.y, a + rowCoordinate.x)//4象限
      }
    } else if (rowCoordinate.x < 0 && rowCoordinate.x > -a) {
      if (flag) {
        console.log(2);
        editSpotPositon(b - rowCoordinate.y, a - Math.abs(rowCoordinate.x))  //2象限
      } else {
        console.log(3)
        editSpotPositon(b + rowCoordinate.y, a - Math.abs(rowCoordinate.x))  //3象限
      }
    } else if (rowCoordinate.x === (0 - a)) {
      flag = !flag
    } else if (rowCoordinate.x === a) {
      flag = !flag
    }
  }, 10)

  //圆锥曲线椭圆函数
  function coordinateT(a) {
    return Math.sqrt((1 - (a * a) / ((width / 2) * (width / 2))) * ((height / 2) * (height / 2)))
  }

  function editSize(width, height) {
    boxDom.style.width = width + 'px'
    boxDom.style.height = height + 'px'
  }
  function editSpotSize(width, height) {
    spotDom.style.width = width + 'px'
    spotDom.style.height = height + 'px'
  }
  function editSpotPositon(top, left) {
    console.log(top, left);
    spotDom.style.top = top - spotSize / 2 + 'px'
    spotDom.style.left = left - spotSize / 2 + 'px'
  }
</script>

</html>