路漫漫其修远兮：js的成长经历（五）—— js animate动画基础

最新推荐文章于 2021-02-20 22:54:06 发布

不愿意做鱼的小鲸鱼

最新推荐文章于 2021-02-20 22:54:06 发布

阅读量314

点赞数

分类专栏： javacript 文章标签： javascript web前端 js 动画 animate

本文链接：https://blog.csdn.net/qq_42038623/article/details/98031866

版权

javacript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

什么是animate

js运动是我们学习js必不可少的研究部分，首先我们要知道js的运动其实仅仅是不断改变元素的某个属性值而已，比如不断改变一个绝对定位div的left值，那么你看到的效果就是这个div不断的向右边运动，那么运动的原理就是这样。

我们知道从a这一点到b这一点我们的运动方式有很多，

1.比如匀速运动到这一点

2.比如先快后慢，

3.必须先慢后快等等

animate就是这些运动的一个实现过程，js可以实现animate，运动的过程大多数也被封装在JQuery库中，下面就是用js来实现animate方法

封装animate

什么是封装：js封装就是将一些常用的函数方法写到一个.js文件里面，用函数的范式，以便于下次调用，或者多次调用。（必须先导入js文件）

下面就是animate的封装方法：

//返回el对象css样式中的property属性值
function getStyle(el, property) {
	if (getComputedStyle) {
		return getComputedStyle(el)[property];
	} else {
		return el.currentStyle[property];
	}
}
/* 对el对象css样式中的属性值进行更改，更改的内容在properties里面，properties是一个
属性对象数组，对每一个properties里的每一个对象值进行修改，并且产生由快到慢的动画
效果变化 */
function animate(el, properties) {
	clearInterval(el.timeId);
	//产生动态效果的方法
	el.timeId = setInterval(function() {
		for (var property in properties) {
			var current;
			var target = properties[property];
			//分为两种参数，一种是透明度，范围是0到1的变化
			if (property == "opacity") {
				current = Math.round(getStyle(el, "opacity") * 100);
			}
			//另一种是像素的变化，如width , height 等
			else {
				current = parseInt(getStyle(el, property));
			}
			//属性的变化速度（由快到慢）
			var speed = (target - current) / 30;
			//ceil向上取整  floor向下取整
			speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
			//重新设置el对象 css中的样式
			if (property == "opacity") {
				el.style.opacity = (current + speed) / 100;
			} else {
				el.style[property] = current + speed + "px";
			}
		}
	}, 20);

}

animate方法测试

1.首先在HTML里写个一盒子div
2.再在javascript中用document.querySelector()方法获取盒子样式对象
3.最后调用animate方法来使盒子产生运动

实现代码（ps：必须先将animate封装）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0px;
				padding: 0px;
			}
			#btn1{
				width: 100px;
				height: 100px;
				background-color: #ADFF2F;
				left: 0px;
				top: 0px;
				position: absolute;
				/* 透明度 */
				opacity: 1;
			}
		</style>
	</head>
	<body>
		<div id="btn1"></div>
		<script src="封装animate.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var div = document.querySelector("#btn1");
			// alert(getStyle(div,"height"));
			animate(div,{
				width:200,
				left : 500,
				opacity:20
			});
		</script>
	</body>
</html>

实现效果

在这里插入图片描述
ps：本次的animate方法封装主要是为后面的学习使用

不愿意做鱼的小鲸鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
路漫漫其修远兮：js的成长经历（五）—— js animate动画基础

目录什么是animate封装animateanimate方法测试实现效果什么是animate    js运动是我们学习js必不可少的研究部分，首先我们要知道js的运动其实仅仅是不断改变元素的某个属性值而已，比如不断改变一个绝对定位div的left值，那么你看到的效果就是这个div不断的向右边运动，那么运动的原理就是这样。我们知道从a这一点到b这一点我们的运动方式有很多，...
复制链接

扫一扫