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

缓冲运动

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

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

2.形象的说明一下

Created with Raphaël 2.1.0 button点击 button点击 box盒子 box盒子 button按钮 button按钮 嘿,盒子, 给哥做个缓冲运动? 啥?缓冲运动? 那得给我速度方向和终点值呀,不然我飞不起来。 那行,我就给你一个速度,终点值,快点给我飞 好,那我飞了,记得让我停下来! 放心,你到了终点值的时候我就让你停下来,不要担心撞墙

3.代码结构

设定速度 方向和终点值


<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>

js运动(2)----缓冲运动_第1张图片

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

ps后记

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

你可能感兴趣的:(技术天地,html,css,javascript)