提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

JavaScript 动画_jquery 动画

JavaScriptjQuery动画
2023-06-13 09:14:38 时间

JavaScript—动画

一、动画原理

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

步骤：

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

注意：元素需要加定位。

例：

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)
}

四、缓动效果原理

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

思路：

  1. 让盒子每次移动的距离变小，速度就会慢下来；
  2. 核心算法：（目标值 – 现在的位置）/ 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)
}

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

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

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

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/181692.html原文链接：https://javaforall.cn

相关文章