原生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>
效果展现: