前端实现一个绕圆心转动的功能

得知了转换关系，我们就可以定义一个变量 angle 来表示我们这个 div 做圆周运动时绕圆心转过的角度，则弧度（radian） 为 radian =（angle*π）/180

我们先在草稿纸上演练一遍我们的逻辑是否可行。让我们先准备一个矩形来代表我们的页面，然后确定一个点来作为圆心。

圆心的位置坐标其实很简单，不要想复杂了，就是相对于页面的位置而已，我们记住这个 (100,100) 的值，等会它会作为我们实现圆周运动的圆心位置。

接下来确定半径，这里我就随便取一个 50 作为半径值。

假设这是我们的 div 已经绕圆心转了一些弧度以后的情景。

ips: 在这里有一个十分重要的概念，div 滑过的路径其实是由无数个不同坐标位置的点构成的。

接下来就是本文的关键部分，请大家喝口水认真听讲。我们取一个中间时刻，假设 div 此时做圆周运动到了点 B ，那么我们的问题就转化为了如何求点 B 的坐标信息。（不要忘了，坐标信息其实就是相对于页面上的 left 和 top 而已。）

一步一步来，我们先求 X 坐标的值，换算下来其实就是要求 a 的长度。

此时我们准备好拿出已有的数据，来套公式即可。度数我们是有的，因为我们已经用变量 angle 来假设我们绕过的度数，则弧度radian =（angle*π）/180 ，然后根据三角函数的正弦定理可得 sin(rad)=a/radius 。

此时半径已知，sin(rad) 已知，则 a=sin(rad) X 50，然后加上圆心的 x 坐标值 100，即可得出此时 B 点相对于页面的 left 值。

Y 坐标同理，只不过公式换为 cos 即可，换算过程不再重复，但是需要注意的点是，我们计算 Y 坐标 的目的其实在求的是 B 点的 top 值，又因为我们前端的坐标Y轴其实和数学的坐标Y轴的正负极是相反的，所以我们其实要算的值是这一段的距离。如下图：

即 B 点的 top 值为圆心的 Y 坐标值100 - 距离b，至此我们所有需要的数据都已经获得，接下来就是用代码验证我们思路的可行性。

<template>
  <div class="home">

    <div class="big">

      <div ref="box" class="box"></div>

    </div>

  </div>
</template>

<script>

export default {
  name: 'HomeView',
  data() {
    return {
      box: {},
      centerPointer: { x: 100, y: 100 },
      radius: 50,
      angle: 0
    }
  },
  mounted() {
    this.run()
  },
  methods: {
    /** 
     * 1. 确定圆心
     * 2. 确定半径
     * 3. 旋转 */
    run() {
      this.box = this.$refs['box']
      setInterval(() => {
        if (!this.box) return;
        this.angle += 1;
        const radian = (this.angle * Math.PI) / 180;
        const a = Math.sin(radian) * this.radius;
        const b = Math.cos(radian) * this.radius;
        const x = this.centerPointer.x + a;
        const y = this.centerPointer.y - b;
        this.box.style.left = x + "px";
        this.box.style.top = y + "px";
      }, 16);
    }
  }
}
</script>

<style scoped>
.home {
  width: 100%;
  height: 100%;
}

.big {
  width: 500px;
  height: 500px;
  background-color: #00bbff;
  position: relative;
}

.box {
  position: absolute;
  width: 50px;
  height: 50px;
  /* background-color: red; */
  background-image: url('/public/static/img/magnifier.png');
  background-size: 50px 50px;
}
</style>

实现逆时针转动（添加负号在下面这一行代码中）

const a = -Math.sin(radian) * this.radius;