JavaScript—动画

最新推荐文章于 2024-06-05 10:20:14 发布

CikianX

最新推荐文章于 2024-06-05 10:20:14 发布

阅读量963

点赞数

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

本文链接：https://blog.csdn.net/CikianOS/article/details/124069779

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JavaScript—动画

一、动画原理

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

步骤：

获得盒子当前位置；
让盒子在当前位置加上1个移动距离；
利用定时器不断重复这个操作；
结束定时器。

注意：元素需要加定位。

例：

HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
	</head>
		<div class="move">
			
		</div>
		<script src="js/js.js"></script>
	</body>
</html>

CSS代码：

.move{
	width: 100px;
	height: 100px;
	background-color: pink;
	position: absolute;
	left: 0;
}

JS代码：

var div = document.querySelector('.move');		//获取需要移动的元素
var timer = setInterval(function() {			//新建一个定时器
	if (div.offsetLeft >= 400) {				//停止定时器的条件：移动距离大于等于400px时停止
		clearInterval(timer);					//停止定时器
	}
	div.style.left = div.offsetLeft + 1 + 'px';	//定时器执行的操作：每1毫秒移动一个像素
}, 1)

二、简单动画函数封装

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

function animate(obj,target) {
	var timer = setInterval(function() {
		if (obj.offsetLeft >= target) {
			clearInterval(timer);
		}
		obj.style.left = obj.offsetLeft + 1 + 'px';
	}, 1)
}
var div = document.querySelector('.move');	//获取元素
animate(div,300);							//调用函数

三、给不同元素记录不同定时器

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';
	}, 1)
}

四、缓动效果原理

缓动动画就是让元素运动速度有所变化，如常见的“慢慢停下来”。

思路：

让盒子每次移动的距离变小，速度就会慢下来；
核心算法：（目标值 - 现在的位置）/ 10 作为每次移动的距离步长；

function animate(obj,target) {
	clearInterval(obj.timer);
	obj.timer = setInterval(function() {
		var step = (target - obj.offsetLeft) / 10;
		step = step > 0 ? Math.ceil(step) : Math.floor(step);
		if (obj.offsetLeft == target) {
			clearInterval(obj.timer);
		}
		obj.style.left = obj.offsetLeft + step + 'px';
	}, 15)
}

五、动画函数添加回调函数

回调函数原理：函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程叫做回调。

回调函数写的位置：定时器结束位置。

CikianX

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript—动画

JavaScript—动画一、动画原理通过定时器setInterval不断移动盒子位置。步骤：获得盒子当前位置；让盒子在当前位置加上1个移动距离；利用定时器不断重复这个操作；结束定时器。注意：元素需要加定位。例：HTML代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head>
复制链接

扫一扫