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

最新推荐文章于 2019-08-02 11:09:43 发布

夏末终秋凉

最新推荐文章于 2019-08-02 11:09:43 发布

阅读量663

点赞数

CC 4.0 BY-SA版权

分类专栏：技术天地 html css javascript 文章标签： javascript 运动框架

本文链接：https://blog.youkuaiyun.com/qq545698514/article/details/54411831

css 同时被 3 个专栏收录

15 篇文章

订阅专栏

html

14 篇文章

订阅专栏

javascript

9 篇文章

订阅专栏

本文介绍JavaScript中实现缓冲运动的方法，包括速度控制、方向设定及如何通过定时器来精确停止运动。通过具体实例代码展示了缓冲运动的基本原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

缓冲运动

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

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