JS实现小球圆周运动

简单实现思路：

首先需要获取中心的圆心坐标以及小球的运动轨迹坐标

其次通过定时器分别实现上半圆和下半圆的运动过程

最后通过递归反复调用

具体代码如下

 <div class="out0">
        <div id="b1" class="ball1"></div>
        <div class="out1"></div>
        <div class="out2"></div>
    </div>
    <button onclick="start1(),start2()">开始</button>
    <script>
        //r表示运动轨迹的半径x0,y0表示圆心的坐标
        let r=200,x0=250,y0=250
        //获取ball1小球
        let b1=document.getElementById('b1')
        //定义x,y表示小球的运动轨迹坐标
        let x=50,y=50
        function start1(){
            //外球
            //上半圆
            let sbr=setInterval(()=>{
                x++
                y=-Math.sqrt(Math.pow(r,2)-Math.pow(x,2)+2*x0*x-Math.pow(x0,2))+y0
                b1.style.top=y-50+'px'
                b1.style.left=x-50+'px'
                if(x==450&&y==250){
                    //取消上半圆定时器
                    clearInterval(sbr)
                    let xbr=setInterval(()=>{
                        x--
                        y=Math.sqrt(Math.pow(r,2)-Math.pow(x,2)+2*x0*x-Math.pow(x0,2))+y0
                        b1.style.top=y-50+'px'
                        b1.style.left=x-50+'px'
                        if(x==50&&y==250){
                            //取消下半圆定时器
                            clearInterval(xbr)
                            // 开启上半圆定时器
                            start1()
                        }
                    },10)
                }
            },10)
        }
    </script>

效果如图：点击开始按钮小球会沿着轨道持续运动

 

重难点：

1、根据位置计算相应的坐标

2、圆周运动的算法