欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JS动画的碰撞效果

程序员文章站 2022-07-12 22:59:07
...

首先我们从页面的设置开始

JS动画的碰撞效果


这样我们就对我们要设计的碰撞效果搭好了框架,下一步是CSS样式的修饰.

JS动画的碰撞效果

经过上面的CSS样式修饰之后我们就可以得到如下图所示的效果:

JS动画的碰撞效果

下一步就是为当前的页面添加JS的动画效果了.

下面是横向偏移的JS相关代码:

JS动画的碰撞效果

添加以上代码之后红色小球将在黑色的边框上面左右来回横向移动:

贴图没有传上来

下面放上Y方向的偏移代码

JS动画的碰撞效果

将X,Y方向上的函数写好以后我们就要添加定时器对两个函数进行调用,这样我们就能够得到红色的小圆球在页面上不断碰撞的效果了.

下面试函数的调用的相关代码:

setInterval(function() {
//对x偏移函数的调用
xmove();
//对x偏移函数的调用
//ymove();
}, 100)

本次小动画的完整代码如下,可以尝试一下哦!

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>01碰撞效果</title>
<style type="text/css">
/*淸样式*/
			
* {
margin: 0;
padding: 0;
}
/*外面黑色边框的样式设置*/
			
#wrap {
width: 500px;
height: 300px;
border: 1px solid black;
margin: 100px auto;
position: relative;
}
/*红色圆球的CSS设置*/		
#circle {
width: 30px;
height: 30px;
background: red;
border-radius: 50%;
position: absolute;
}
</style>
</head>

<body>
<!--外部黑色的边框-->
<div id="wrap">
<!--内部红色的圆球-->
			<div id="circle"></div>
		</div>
	</body>
	<script type="text/javascript">
		//获取红色圆球
		var circle = document.getElementById("circle");
		//X的偏移量
		var xpianyi = 0;
		//设置布尔型变量
		var iszhengxiang = false;
		//设置水平方向的移动
		function xmove() {
			if (iszhengxiang == false) {
				//X每次偏移的值
				xpianyi += 10;
				//添加条件判断,如果大于470px将正向偏移状态打破
				if (xpianyi >= 470) {
					iszhengxiang = true;
				}
			} else {
				//反方向的运动每次的增量
				xpianyi -= 10;
				//添加条件判断,如果小于等于0将反向偏移状态打破
				if (xpianyi <= 0) {
					iszhengxiang = false;
				}
			}
			circle.style.left = xpianyi + "px";
		}
		
		//y的偏移量
		var ypianyi = 0;
		//定义布尔型变量
		var iszheng = false;
		//定义Y方向上的偏移函数
		function ymove() {
			if (iszheng == false) {
				ypianyi += 10;
				//条件的判断
				if (ypianyi >= 270) {
					iszheng = true;
				}
			} else {
				ypianyi -= 10;
				if (ypianyi <= 0) {
					iszheng = false;
				}
			}
			//每次将定位值进行改变
			circle.style.top = ypianyi + "px";
		}
		//设置定时器
		setInterval(function() {
			//对x偏移函数的调用
			xmove();
			//对x偏移函数的调用
//			ymove();
		}, 100)
	</script>

</html>

相关标签: JS 碰撞动画