缓动动画效果

最新推荐文章于 2023-10-18 19:22:05 发布

hcoke

最新推荐文章于 2023-10-18 19:22:05 发布

阅读量882

点赞数

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

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

版权

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

63 篇文章 0 订阅

订阅专栏

JavaScript

40 篇文章 0 订阅

订阅专栏

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

思路：

1.让盒子每次移动的距离变小，速度就会慢慢落下来

2.核心算法：（目标值-现在的位置）/ 10 作为每次一定的距离步长

3.停止的条件就是：让当前盒子位置等于目标位置就停止定时器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				position: absolute;
				top: 50px;
				left: 0;
				width: 300px;
				height: 300px;
				background-color: skyblue;
			}
	
		</style>
	</head>
	<body>
		<button type="button">
			按下按钮开始
		</button>
		<div>
			
		</div>
		<script type="text/javascript">
			var div = document.querySelector('div');
			var btn = document.querySelector('button');
			function animate(obj, target) {
				clearInterval(obj.timer);
				obj.timer = setInterval(function() {
					if(obj.offsetLeft == target) {
						clearInterval(obj.timer);
					}
					obj.style.left = obj.offsetLeft + ((target - obj.offsetLeft) / 10) + 'px';
				},15);
				
			}
			
			btn.addEventListener('click',function() {
				animate(div,1000);
			})
			//匀速动画就是 盒子是当前的位置 +固定的值 10
			//缓动动画就是 盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10
		</script>
	</body>
</html>

缓动动画多个目标值之间移动：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				position: absolute;
				top: 50px;
				left: 0;
				width: 300px;
				height: 300px;
				background-color: skyblue;
			}
	
		</style>
	</head>
	<body>
		<button type="button" class="btn800">
			按下按钮开始移动到800
		</button>
		<button type="button" class="btn500">
			按下按钮开始移动到500
		</button>
		<div>
			
		</div>
		<script type="text/javascript">
			var div = document.querySelector('div');
			var btn500 = document.querySelector('.btn500');
			var btn800 = document.querySelector('.btn800');
			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);
				
			}
			
			btn500.addEventListener('click', function() {
				animate(div,500);
			});
			btn800.addEventListener('click', function() {
				animate(div,800);
			});
			//匀速动画就是 盒子是当前的位置 +固定的值 10
			//缓动动画就是 盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10
		</script>
	</body>
</html>