作者：手机用户2502858065 | 来源：互联网 | 2023-09-24 13:14
缓冲运动1.关于缓冲运动,百度没有解释,不过依照常识来看速度越来越慢的运动就是缓冲运动,比如汽车刹车过程,这个解释比较牵强,不过在js中,暂时也只能这样理解.js中我们的关注点:
缓冲运动
1.关于缓冲运动,百度没有解释,不过依照常识来看
速度越来越慢的运动就是缓冲运动,比如汽车刹车过程,这个解释比较牵强,不过在js中,暂时也只能这样理解.
- js中我们的关注点:
- 和匀速运动一样,方向和速度以及终点值.可能有人会有疑问,为什么会有终点值,其实比较好理解,你在哪有见过别人停车的时候故意撞墙的?(这个解释太2了,其实我做这个是为了方便测试,不过一般都需要一个终点值进行控制,因为js中缓冲运动关键点是定时器,所以需要我们清除定时器,清除定时器需要一个条件,什么条件呢?当达到终点值的时候我们清除,是不是很美妙)
2.形象的说明一下
3.代码结构
设定速度 方向和终点值
<html lang&＃61;"en">
<head><meta charset&＃61;"UTF-8"><title>缓冲运动title><style>div{width: 100px;height: 100px;background-color: #f00;position:absolute;}style><script>window.onload &＃61; function(){var btn &＃61; document.getElementsByTagName(&＃39;button&＃39;)[0];var box &＃61; document.getElementsByTagName(&＃39;div&＃39;)[0];var target &＃61; 901;var timer &＃61; null;var start &＃61; 0;btn.onclick &＃61; function(){timer &＃61; setInterval(function(){start &＃43;&＃61; Math.ceil((target-start)*0.2);box.style.left &＃61; start&＃43;&＃39;px&＃39;;if(start&＃61;&＃61;target){clearInterval(timer);}},50)}}script>
head>
<body><button>缓冲运动button><div>div>
body>
html>
为了省事,用同一张图片记录了.
ps后记
缓冲运动的关键点在于运动速度,这里有个公式:运动起始值 &＃43;&＃61; (终点值-运动起始值)*系数;当运动起始值 &＃61;&＃61; 终点值时,清除定时器.
京公网安备 11010802041100号