JavaScript怎样做缓动动画？办法是什么？
发布时间：2022-01-20 15:52:49 所属栏目：语言 来源：互联网
导读：JavaScript怎样做缓动动画？使用JavaScript原生定时器就可以实现动画的缓动效果，实现的原理其实很简单，也就是通过定时器修改边距达到移动动画效果，那么具体怎样做呢？下面我们来详细的了解看看。 实现速度的变化 缓动必然移动速度会有变化,这里需要用到一
|
JavaScript怎样做缓动动画？使用JavaScript原生定时器就可以实现动画的缓动效果，实现的原理其实很简单，也就是通过定时器修改边距达到移动动画效果，那么具体怎样做呢？下面我们来详细的了解看看。 实现速度的变化 缓动必然移动速度会有变化,这里需要用到一个小公式或者说算法? 移动单位 = (指定移动位置边距 - obj.offsetLeft) / 10; var step = (ydpx - obj.offsetLeft) / 10; 有一个细节需要注意下: 移动的步数应该去掉小数,否者因为除法的原因无法移动到指定位置,会有一些差距 当step小于0对应的是向左移动舍去小数如:1.2 为1 大于0向右移动,进位,如:1.2为2 这应该是个数学问题** 之后代码的实现就简单多了： //ydjl:移动到指定位置 (obj.offsetLeft) function animate(obj,ydpx) { //清除定时器 防止每一次调用都产生一个定时器,叠加导致问题(速度变快) clearInterval(obj.timer); obj.timer=setInterval(function () { var step = (ydpx - obj.offsetLeft) / 10; //移动距离 //取整 step = step>0 ? Math.ceil(step) : Math.floor(step); //判断是否移动到指定位置 if(obj.offsetLeft == ydpx) { //清除定时器,停止移动 clearInterval(obj.timer); } //修改left实现移动 obj.style.left = obj.offsetLeft + step + 'px'; },15)//移动间隔设置 } 下面是演示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .boks{ position: absolute; top: 300px; left:0; width: 100px; height: 100px; background-color: #ff0011; } </style> </head> <body> <button class="yd500">移动500px</button> <button class="yd800">移动800px</button> <div class="boks">hezi</div> </body> <script> function animate(obj,ydpx) { //清除定时器 clearInterval(obj.timer); obj.timer=setInterval(function () { var step = (ydpx - obj.offsetLeft) / 10; step = step>0 ? Math.ceil(step) : Math.floor(step); if(obj.offsetLeft == ydpx) { clearInterval(obj.timer); } obj.style.left = obj.offsetLeft + step + 'px'; },15); } var yd500 = document.querySelector(".yd500"); var yd800 = document.querySelector(".yd800"); //盒子 var boks = document.querySelector(".boks"); yd500.addEventListener('click', function() { // 调用函数 animate(boks, 500); //传递要移动的对象 和 移动位置 }) yd800.addEventListener('click', function() { // 调用函数 animate(boks, 800); //传递要移动的对象 和 移动位置 }) </script> </html> （编辑：青岛站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
