javascript之任意带px数值的属性都能改变的缓动动画函数的封装

最新推荐文章于 2024-11-01 13:37:40 发布

persistsss

最新推荐文章于 2024-11-01 13:37:40 发布

阅读量154

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/persistsss/article/details/108466926

版权

任意带px数值的属性都能改变的缓动动画函数的封装

这里用到了我的博客中的GetStyle函数，用来获取任意样式的值。

<!DOCTYPE html>
<html>
	<head>
		<meta cahrset="utf-8">
		<title>动画</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			
			#box{
				width: 100px;
				height: 100px;
				background-color: lime;
				position: absolute;
			}
		</style>
	</head>
	<body>
		
		<button class="btn1">播放</button>
		
		<div id="box"></div>
		<script>

			let btn1 = document.querySelector('.btn1')
			let box = document.querySelector('#box');
			btn1.onclick = () => {
				animate(box,'top',400)
			}
			// 任意带单位px的数值的属性，都可以改变的动画函数
			function animate(element,attr,target){
				clearInterval(element.timeId)
				element.timeId = setInterval(() => {
					// 通parsetInt将获取的样式的值转成整型
					let current = parseInt(getStyle(element,attr)) || 0
					let step = (target - current) / 10
					step = step > 0 ? Math.ceil(step) : Math.floor(step)
					current += step
					// 通过下标的方式可以动态设置属性
					element.style[attr] = current + 'px'
					if(current === target){
						clearInterval(element.timeId)
					}
					
				},10)
			}

			// 获取任意样式属性的值
			function getStyle(element,attr){
				// 如果这个函数存在，就调用这个函数
				if(window.getComputedStyle){
					// 获取计算后的样式，即在运行中生效的样式
					return window.getComputedStyle(element,null)[attr]
				}else{
					// IE8和以下版本使用这个函数获取计算后的样式
					return element.currentStyle[attr]
				}
			}

		</script>
	</body>
</html>

在这里插入图片描述
这个函数无法实现通时改变多个属性，至于为什么无法实现，看以下代码解释。

<!DOCTYPE html>
<html>
	<head>
		<meta cahrset="utf-8">
		<title>动画</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			
			#box{
				width: 100px;
				height: 100px;
				background-color: lime;
				position: absolute;
			}
		</style>
	</head>
	<body>
		
		<button class="btn1">播放</button>
		
		<div id="box"></div>
		<script>

			let btn1 = document.querySelector('.btn1')
			let box = document.querySelector('#box');
			btn1.onclick = () => {
				animate(box,'top',400)
				// 上面的函数要等10s才执行，被这个函数清除了上面的函数的定时器，所以上面的函数没有定时器而停止执行
				animate(box,'left',400)
				// 这个函数也清除了上面的函数的定时器，上面的函数没有定时器而停止执行，所以最终执行这个函数
				animate(box,'width',400)
			}
			// 任意带单位px的数值的属性，都可以改变的动画函数
			function animate(element,attr,target){
				clearInterval(element.timeId)
				element.timeId = setInterval(() => {
					// 通parsetInt将获取的样式的值转成整型
					let current = parseInt(getStyle(element,attr)) || 0
					let step = (target - current) / 10
					step = step > 0 ? Math.ceil(step) : Math.floor(step)
					current += step
					// 通过下标的方式可以动态设置属性
					element.style[attr] = current + 'px'
					if(current == target){
						clearInterval(element.timeId)
					}
					
				},10)
			}

			// 获取任意样式属性的值
			function getStyle(element,attr){
				// 如果这个函数存在，就调用这个函数
				if(window.getComputedStyle){
					// 获取计算后的样式，即在运行中生效的样式
					return window.getComputedStyle(element,null)[attr]
				}else{
					// IE8和以下版本使用这个函数获取计算后的样式
					return element.currentStyle[attr]
				}
			}

		</script>
	</body>
</html>