js动画-通过setInterval实现圆周运动

最新推荐文章于 2023-08-15 11:06:00 发布

mt-6087

最新推荐文章于 2023-08-15 11:06:00 发布

阅读量265

点赞数

文章标签： html5 css3 javascript

本文链接：https://blog.csdn.net/m0_72267895/article/details/131560892

版权

通过JS中的setInterval方法可以实现盒子的移动

只需要定义一个定时器，然后设置时间，改变盒子的坐标即可实现

<body>
		<div class="f">
			<div class="z" id="z" style="top: 0;">
				
			</div>
		</div>
	</body>
	<script>
		let z=document.getElementById('z')
		let x=0,y=0
		let dsq=setInterval(()=>{
			if (x>=400||y>=400){
				clearInterval(dsq)
			}
			x++,
			y++
			z.style.top=y+'px'
			z.style.left=x+'px'
		},10);
	</script>

圆周运动

通过定时器和小球的运动轨迹即可实现圆周运动

body部分创建一个3圈的圆环和两个小圆球，通过定位让小球在圆弧的指定位置，定义一个btn用来控制小球运动

js部分

首先获取蓝色小球的运动半径和圆心位置

//获取b1蓝色小球
    let b1=document.getElementById('b1')
//r表示运动轨迹的半径，x0,y0表示圆心的坐标
    let r=200,x0=250,y0=250;

然后创建小球球心的坐标

//定义x,y表示小球的球心的坐标
    let x=50,y=50

最后创建定时器让小球做圆周运动

 function start1(){
        //开启上半圆的定时器
        let sbr=setInterval(() => {
            x++
            y=-Math.sqrt(Math.pow(r,2)-Math.pow(x-x0,2))+y0
            b1.style.top=y-50 +'px'
            b1.style.left=x-50 +'px'
            if(x==450&&y==250){
                //alert('右切点')
                //取消上半圆的定时器
                clearInterval(sbr)
                //开启下半圆的定时器
                let xbr=setInterval(()=>{
                    x--
                    y=Math.sqrt(Math.pow(r,2)-Math.pow(x-x0,2))+y0
                    b1.style.top=y-50 +'px'
                    b1.style.left=x-50 +'px'
                    //左切点
                    if(x==50&&y==250){
                        //取消下半圆的定时器
                        clearInterval(xbr)
                        //开启上半圆定时器
                        start1()//递归
                    }
                })
            }
        }, 10);
    }

通过 $x^{2}+y^{2}=r^{2}$ 可以推导出x,y的坐标