动画函数封装

原创已于 2022-04-10 14:05:00 修改 · 433 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #前端

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

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

63 篇文章

订阅专栏

JavaScript

40 篇文章

订阅专栏

本文介绍了JavaScript如何实现动画效果，通过设置定时器不断移动元素位置。首先获取元素位置，然后让它每次移动一定距离，利用setInterval重复此过程，并设定结束条件。接着封装了一个动画函数，接受元素和目标位置作为参数。为了优化，使用clearInterval清除旧定时器，确保每个元素只有一个定时器执行。最后展示了如何在按钮点击事件中应用动画，避免因多次点击导致速度过快的问题。

动画实现核心原理：

通过定时器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>