js-实现小球的曲线运动(正弦，余弦和正切运动 )

最新推荐文章于 2024-05-14 09:42:19 发布

老衲的少女心i

最新推荐文章于 2024-05-14 09:42:19 发布

阅读量1.1k

点赞数 1

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_42592823/article/details/115340113

版权

javascript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

这里的曲线运动，我们可以实现正弦sin，余弦cos和正切tan，三种曲线运动，只需要将我们代码中的：

y=startY - Math.sin(x * 2 * Math.PI / 360)*200;

这串代码中的`Math.sin`,转换成相应的值就可以了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>小球曲线运动（sin）</title>
		<!--给小球设置样式-->
		<style>
			#ball{
				width: 30px;
				height: 30px;
				border-radius: 50%;
				background-color: deepskyblue;
				
				position: fixed;
				left: 0px;
				top:300px;
				
			}
		</style>
	</head>
	<body>
		<div id="ball"></div>
		<script>
			//获得元素
			var oBall= document.getElementById('ball');
			
			//定义变量
			//小球的横向坐标，也是角度的变化
			var x=0;
			var startY =300;
			var y=0;
			//控制每隔10毫秒，执行一个函数
			setInterval(function(){
				
				x++;
				//根据角度x 求出sin的值  来画正弦曲线（sin）
				//这里的加号是先向上进行曲线运动
				//如果是减号的话，则是先向下运动
				//这里的sin（）括号里面的值，是为了得到x角度的值，方便进行计算
				//后面结果最后，乘以了200，是因为这里的sin的最大值是1，这里如果，只是向上或者向下进行
				//上下两像素的位置的正弦曲线运动的话是看不出结果的，所以这里我们将结果扩大来处理，
				//就是方便为了观察运动效果
				
				y=startY - Math.sin(x * 2 * Math.PI / 360)*200;
				
				//这里是设置小球的位置，
				oBall.style.left= x + "px";
				oBall.style.top= y + "px";
			},1000/60)
			//最后这里的参数，是设置的时间，单位是毫秒，
			//也就是控制多久执行这个函数体里面的函数的间隔时间
		</script>
	</body>
</html>

老衲的少女心i

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
js-实现小球的曲线运动(正弦，余弦和正切运动 )

这里的曲线运动，我们可以实现正弦sin，余弦cos和正切tan，三种曲线运动，只需要将我们代码中的：y=startY - Math.sin(x * 2 * Math.PI / 360)*200;这串代码中的Math.sin,转换成相应的值就可以了。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>小球曲线运动（sin）</title> <!-
复制链接

扫一扫