原生js实现动画函数的封装及核心原理
一、动画实现原理
核心原理：通过定时器setInterval()不断移动盒子的位置
二、实现步骤
1、获得盒子当前的位置
2、让盒子在当前位置加上移动的距离（步长）
3、注意元素需要添加定位，才能使用element.style.left
4、利用定时器不断重复这个操作
5、加上一个结束定时器的条件
停止的条件：让当前盒子的位置等于目标位置就停止定时器（实质是删除定时器）
6、回调函数写的位置：定时器结束的位置，当动画执行结束后才去调用该该函数
‘三、代码展示
function animate(obj, target, callback) {
//添加定时器前先清除以前的定时器，只保留当前一个定时器
window.clearInterval(obj.timer);
obj.timer = window.setInterval(function() {
//步长值写在定时器里面
/*把我们的步长值改为整数，不要出现小数问题
1）步长值>0,向上取整
2）步长值<0,向下取整 */
var step = (target - obj.offsetLeft) / 10;//缓动效果核心算法
step = step >= 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
//停止动画 本质停止定时器
window.clearInterval(obj.timer);
//回调函数一定要写到定时器结束里面
if (callback) {
callback();
}
} else {
obj.style.left = obj.offsetLeft + step + 'px';
}
}, 15)
}
将以上代码可以专门写入annimate.js文件，用到animate动画函数，将js文件引入
注意：
1、使用动画函数的前提，该元素必须的定位
2、若index.js依赖animate.js，所以animate.js要写到index.js上面
四、应用
【轮播图的实现】
html文件
<body>
<div class="banner1">
<button class="forward50">前进50</button>
<button class="back50">后退50</button>
<div class="box50">50</div>
</div>
<div class="banner2">
<button class="forward100">前进100</button>
<button class="back100">后退100</button>
<div class="box100">100</div>
</div>
</body>
css文件
<style>
.banner1,
.banner12 {
position: relative;
height: 150px;
}
.box50 {
position: absolute;
width: 50px;
height: 50px;
border: 3px solid #eeeeee;
border-radius: 7px;
background-color: peru;
color: teal;
font-weight: 700;
text-align: center;
line-height: 50px;
}
.box100 {
position: absolute;
width: 100px;
height: 100px;
border: 3px solid #eeeeee;
border-radius: 7px;
background-color: peru;
color: teal;
font-weight: 700;
text-align: center;
line-height: 100px;
}
.finish {
background-color: tomato;
}
</style>
js文件
<script>
// 1、获取元素
var box50 = document.querySelector('.box50');
var box100 = document.querySelector('.box100');
var forward50 = document.querySelector('.forward50');
var back50 = document.querySelector('.back50');
var forward100 = document.querySelector('.forward100');
var back100 = document.querySelector('.back100');
//2、注册事件
//前进50
forward50.addEventListener('click', function() {
animate(box50, 50, function() {
box50.style.backgroundColor = 'tomato';
console.log(box50.offsetLeft);
});
})
//后退50
back50.addEventListener('click', function() {
animate(box50, 0, function() {
box50.style.backgroundColor = 'peru';
console.log(box50.offsetLeft);
})
})
//前进100
forward100.addEventListener('click', function() {
animate(box100, 100, function() {
box100.style.backgroundColor = 'tomato';
console.log(box100.offsetLeft);
})
})
//后退100
back100.addEventListener('click', function() {
animate(box100, 0, function() {
box100.style.backgroundColor = 'peru';
console.log(box100.offsetLeft);
})
})
</script>
效果展现：