js运动(2)----缓冲运动

来源：互联网发布：网络管理法律法规编辑：程序博客网时间：2024/05/02 21:20

缓冲运动

1.关于缓冲运动,百度没有解释,不过依照常识来看

  速度越来越慢的运动就是缓冲运动,比如汽车刹车过程,这个解释比较牵强,不过在js中,暂时也只能这样理解.

js中我们的关注点:
- 和匀速运动一样,方向和速度以及终点值.可能有人会有疑问,为什么会有终点值,其实比较好理解,你在哪有见过别人停车的时候故意撞墙的?(这个解释太2了,其实我做这个是为了方便测试,不过一般都需要一个终点值进行控制,因为js中缓冲运动关键点是定时器,所以需要我们清除定时器,清除定时器需要一个条件,什么条件呢?当达到终点值的时候我们清除,是不是很美妙)

2.形象的说明一下

3.代码结构

设定速度方向和终点值

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>缓冲运动</title>    <style>        div{            width: 100px;            height: 100px;            background-color: #f00;            position:absolute;        }    </style>    <script>        window.onload = function(){            //1.获取标签            var btn = document.getElementsByTagName('button')[0];            var box = document.getElementsByTagName('div')[0];            var target = 901;            var timer = null;            var start = 0;            //2.点击事件监听            btn.onclick = function(){                timer = setInterval(function(){                //缓冲运动公式                    start += Math.ceil((target-start)*0.2);                    box.style.left = start+'px';                    //当运动距离达到终点值时,清除定时器                    if(start==target){                        clearInterval(timer);                    }                },50)            }        }    </script></head><body>    <button>缓冲运动</button>    <div></div></body></html>

缓冲运动

为了省事,用同一张图片记录了.

ps后记

 缓冲运动的关键点在于运动速度,这里有个公式:运动起始值 += (终点值-运动起始值)*系数; 当运动起始值 == 终点值时,清除定时器.

0 0