js圆周运动详解

首先得感谢segmentfault的回答让我理解了圆周运动，否则我怎么都不明白，我还查了一大堆的资料

好的，那就开始讲讲圆周运动吧，要做圆周运动，就要用到三角函数和角度转弧度的知识。我们先把最基本代码贴上
html代码

css代码

* {
    margin: 0;
    padding: 0;
}

#red {
    position: relative;
    margin: 200px auto;
    width: 400px;
    height: 400px;
    background: red;
    border-radius: 50%;
}

#blue {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background: blue;
    border-radius: 50%;
}

这上面的代码没问题，对吧，就是布局而已。
那怎么解决呢。咱们先看图，

circle1.png

图中o是圆心，A是大圆上的点，a是角度，点A到圆心O的距离是半径。
由图和经验来讲，我们只需算出每一度的x,y就可以了，我们都知道

sin(a) = y / r,
cos(a) = x / r, 
弧度=圆周率π / 180 * 角度a

而Math.sin,cos中用的是弧度， 所以我们可以得出，

Math.sin(圆周率π / 180 * 角度a ) = x / 半径r；
Math.cos(圆周率π / 180 * 角度a ) = y / 半径r；

最后可以推导出

x = Math.sin(圆周率π / 180 * 角度a) * 半径r；
y = Math.cos(圆周率π / 180 * 角度a) * 半径r；

window.onload = function () {
    let blue = $("blue");

    //起始角度
    let degree = 0;

    setInterval(function () {
        //每个50ms +1个角度
        degree += 1;
        //计算弧度
        let rad = Math.PI / 180 * degree;
        //计算大圆上每一个A的x,y
        let x = Math.sin(rad) * 200;
        let y = Math.cos(rad) * 200;
        //
        blue.style.left =  x + "px";
        blue.style.top =  y + "px";
    }, 50);

}

但是如果我们直接把x，y设置给小圆的x,y是不行的，原因是它默认是围着原点（0，0）旋转，所以你要先指定圆心位置，那这个圆心位置又是多少呢。我布局中的红色圆的width是400，那么圆心就是（200，200）吗？当然不是了，（200，200）确实是红色圆的圆心，但不是蓝色圆围着转的圆的圆心，我们必须减去蓝色圆的半径，即圆心是（150，150）。因为元素定位的时候是按照元素左上角位置定位的，而不是元素的中心定位，所以呢要减去50。如图

circle2.png

图中A的位置是正中心，但是由于元素定位的时候是按照元素左上角位置定位的，所以点B的位置才是真正的圆心，故最后js代码是 ↓↓↓↓↓

window.onload = function () {
    let blue = $("blue");

    //x,y表示大圆心坐标
    let ox = 150;
    let oy = 150;
    //起始角度
    let degree = 0;

    setInterval(function () {
        //每个50ms +1个角度
        degree += 1;
        //计算弧度
        let rad = Math.PI / 180 * degree;
        //计算大圆上每一个A的x,y
        let x = Math.sin(rad) * 200;
        let y = Math.cos(rad) * 200;
        //
        blue.style.left = ox + x + "px";
        blue.style.top = oy + y + "px";
    }, 50);

}