得知了转换关系，我们就可以定义一个变量 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;
