动画函数封装

hcoke

已于 2022-04-10 14:05:00 修改

阅读量362

点赞数

分类专栏： JavaScript 学习笔记文章标签： JavaScript 前端

于 2022-04-10 13:27:27 首次发布

本文链接：https://blog.csdn.net/m0_62962469/article/details/124076589

版权

学习笔记同时被 2 个专栏收录

63 篇文章 0 订阅

订阅专栏

JavaScript

40 篇文章 0 订阅

订阅专栏

动画实现核心原理：

通过定时器setInterval()不断移动盒子位置。

实现步骤：

1.获得盒子当前位置

2.让盒子在当前位置加上1个移动距离

3.利用定时器不断重复这个操作

4.加一个结束定时器的条件

5.注意此元素需要添加定位，才能使用Element.style.left

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 200px;
				height: 200px;
				background-color: skyblue;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div>
			
		</div>
		<script type="text/javascript">
			var div = document.querySelector('div');
			var timer = setInterval(function() {
				if(div.offsetLeft >= 400) {
					//停止动画 ，本质是停止定时器
					clearInterval(timer);
				}
				div.style.left = div.offsetLeft + 1 + 'px';
			},20);
		</script>
	</body>
</html>

动画函数的简单封装：

注意函数需要传递两个参数，动画对象和移动到的距离。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 200px;
				height: 200px;
				background-color: skyblue;
				position: absolute;
			}
			
			span {
				position: absolute;
				/* display: block; */
				margin-top: 300px;
				width: 150px;
				height: 150px;
				background-color: purple;
			}
		</style>
	</head>
	<body>
		<div>
			
		</div>
		<span></span>
		<script type="text/javascript">
		//简单动画函数封装obj 目标对象 target 目标位置
		function animate(obj,target) {
			var timer = setInterval(function() {
				if(obj.offsetLeft >= target) {
					//停止动画 ，本质是停止定时器
					clearInterval(timer);
				}
				obj.style.left = obj.offsetLeft + 1 + 'px';
			},20);
		}
			var div = document.querySelector('div');
			var span = document.querySelector('span');
			//调用函数
			animate(div,300);
			animate(span,200);
		</script>
	</body>
</html>

代码优化：上面的代码是每次调用都需要需要开辟空间，所以使用对象的属性方法来做，没有var声明，每次都是单独的定时器，不会引起歧义。

当我们点击了太多次按钮，这个元素的速度会越来越快因为开启了太多的定时器。解决方案就是让我们元素只有一个定时器执行。先清除以前的定时器，只保留当前的一个定时器执行。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 200px;
				height: 200px;
				background-color: skyblue;
				position: absolute;
				left: 0;
			}
			
			span {
				position: absolute;
				display: block;
				left: 0;
				top: 300px;
				width: 150px;
				height: 150px;
				background-color: purple;
			}
			
			
		</style>
	</head>
	<body>
		<button type="button">
			点击之后才走
		</button>
		<div>
			
		</div>
		<span></span>
		<script type="text/javascript">
		//简单动画函数封装obj 目标对象 target 目标位置
		function animate(obj,target) {
			//先清除以前的定时器，只保留当前的一个定时器执行
			clearInterval(obj.timer);
			//给不同的元素指定了不同的定时器
			obj.timer = setInterval(function() {
				if(obj.offsetLeft >= target) {
					//停止动画 ，本质是停止定时器
					clearInterval(obj.timer);
				}
				obj.style.left = obj.offsetLeft + 1 + 'px';
			},20);
		}
			var div = document.querySelector('div');
			var span = document.querySelector('span');
			var btn = document.querySelector('button');
			//调用函数
			animate(div,300);
			//当我们点击了太多次按钮，这个元素的速度会越来越快  因为开启了太多的定时器
			//解决方案就是 让我们元素只有一个定时器执行
			btn.addEventListener('click', function() {
				animate(span, 200);
			})
		</script>
	</body>
</html>

hcoke

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
动画函数封装

动画实现核心原理：通过定时器setInterval()不断移动盒子位置。实现步骤：1.获得盒子当前位置2.让盒子在当前位置加上1个移动距离3.利用定时器不断重复这个操作4.加一个结束定时器的条件5.注意此元素需要添加定位，才能使用Element.style.left<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></titl
复制链接

扫一扫