本文已参与「新人创作礼」活动，一起开启掘金创作之路。
目录
什么是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方法封装主要是为后面的学习使用
