原生js实现动画函数的封装及核心原理
原生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>
效果展现：
