封装animate动画

最新推荐文章于 2023-04-15 10:07:58 发布

前端小99

最新推荐文章于 2023-04-15 10:07:58 发布

阅读量274

点赞数

CC 4.0 BY-SA版权

分类专栏：封装方法

本文链接：https://blog.csdn.net/qq_41328247/article/details/108437962

封装方法专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍如何使用CSS和JavaScript实现元素的动画效果，包括位置变化、定时器设置及步长值计算，适合初学者掌握基本动画原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		#box {
			position: absolute;
			width: 100px;
			height: 100px;
			background-color: red;
			left: 10px;
			top: 10px;
		}
		button {
			position: fixed;
			width: 100px;
			height: 30px;
			left: 100px;
			bottom: 100px;
		}
	</style>
</head>
<body>
	<div id="box"></div>
	<button id="btn">点我移动</button>
	<script type="text/javascript">
	// 获取元素
	var box = document.getElementById("box");
	var btn = document.getElementById("btn");

		
	// $(dom).animate({}, time, callBack)


	/**
	 * animate 实现动画函数
	 * @json 目标值
	 * @time 完成动画的时间
	 * @callBack 回调函数 当元素运动完毕之后执行的函数
	 *
	 **/
	function animate(dom, json, time, callBack) {

		/**
		 * 分析:
		 * 	 -我们的编程思路使用定时器和循环完成动画
		 *	 -既然是使用循环动画，那么每一次动画都是一个步长值
		 *   -首要问题要得到步长值
		 *		步长值 = 总距离 / 总次数
		 *    	总距离 = 目标值 - 初始值
		 * 		总次数 = 总时间 / 定时器的间隔时间 
		 */


		// 定义计数器
		var count = 0;
		// 定时器间隔时间
		var interval = 20;
		// 定义总次数
		var allCount = time / interval;
		// 定义对象， 用于保存元素的初始值
		var nowJson = {};
		for (var i in json) {
			nowJson[i] = parseInt(getComputedStyle(dom)[i]);
		}
		// 当循环完毕之后， 元素的初始值也就有了

		// console.log(nowJson);


		// 定义对象 用于保存元素的步长值
		var stepJson = {};
		for (var i in json) {
			// 总距离 = 目标值 - 初始值
			// 步长值 = 总距离 / 总次数
			stepJson[i] = (json[i] - nowJson[i]) / allCount;
		}
		console.log(stepJson);


		// 尝试开启一个定时器
		var timer = setInterval(function() {
			// 计算器++
			count++;
			// 使用for循环不断的改变dom的状态
			for (var i in json) {
				// 当前值 = 初始值 + 步长值 * 次数
				dom.style[i] = nowJson[i] + stepJson[i] * count + "px";
			}

			//  判断是否到达边界
			if (count >= allCount) {
				// 拉终
				for (var i in json) {
					dom.style[i] = json[i] + "px";
				}
				// 停表
				clearInterval(timer);

				// 执行回调函数
				callBack && callBack();
			}
		}, interval)

	}



	// 调用
	animate(box, {"left": 1000, "top": 500}, 999, function() {
		console.log("123");
	});