缓冲运动

最新推荐文章于 2022-08-05 20:48:39 发布

原创最新推荐文章于 2022-08-05 20:48:39 发布 · 152 阅读

0 ·

CC 4.0 BY-SA版权

本文深入探讨了使用JavaScript实现的缓冲运动算法，该算法通过计算目标位置与当前位置的距离来调整运动速度，确保元素平滑移动到指定位置。文章详细解释了如何利用定时器和速度与距离的关系来实现这一效果，同时提供了完整的代码示例。

在这里插入图片描述

 /*
             刹车
             不是物理规律的特点：速度和距离成正相关。


             var speed = 距离
             var speed = iTarget - iCur

             【注】计算机最小能识别的像素是一像素
            */
            var oBtn = document.getElementById("btn1");
            var oDiv1 = document.getElementById("div1");
            oBtn.onclick = function(){
                starMove(500);
            }
            var timer = null;
            function starMove(iTarget){
                clearInterval(timer);
                timer = setInterval(function(){
                    //缓冲运动速度操作
                    var speed = (iTarget - oDiv1.offsetLeft) / 8;//速度和距离公式
                    speed = speed > 0? Math.ceil(speed):Math.floor(speed);
                    if(oDiv1.offsetLeft==iTarget){
                        clearInterval(timer);

                    }else{
                        oDiv1.style.left = oDiv1.offsetLeft + speed + "px";

                    }
                    var oTxt1 = document.getElementById("txt1");
                    oTxt1.value += speed + "," + oDiv1.offsetLeft + "\n";
                },30);
            }