当前位置:Gxlcms > JavaScript > js如何实现缓冲运动(代码实例)

js如何实现缓冲运动(代码实例)

时间:2021-07-01 10:21:17 帮助过:2人阅读

本篇文章给大家带来的内容是关于js如何实现缓冲运动(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

缓冲运动的特性

  • 逐渐变慢,最后停止

  • 距离越远速度越大

  • 速度由距离决定

  • 速度=(目标值-当前值)/缩放系数

距离大,速度大。
距离小,速度小。
速度和距离成正比。
缓冲运动的时候速度一定要取整,如果速度0.9的话,不取整会直接变成0;速度大于0应向上取整,小于0应向下取整。
下面我们就来做一个div从0移动到300的缓冲运动,做一个div从600移动到300的缓冲运动。

代码实现缓冲运动

<!DOCTYPE html>
<html>
  <head>
    <title>缓冲运动</title>
    <style>
      #div1{
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
        /* left: 0; */
        left: 600px;
        top: 50px;
      }
      #div2{
        /* 300位置的参考线 */
        width: 1px;
        height: 300px;
        position: absolute;
        left: 300px;
        top: 0;
        background: #000;
      }
    </style>
    <script>
      window.onload=function(){
        var oBtn=document.getElementById("btn1");
        oBtn.onclick=function(){
          startMove();
        }
      }

      function startMove(){
        var oDiv=document.getElementById("div1");
        setInterval(function(){
          var speed=(300-oDiv.offsetLeft)/10;
          speed=speed>0?Math.ceil(speed):Math.floor(speed);//取整
          oDiv.style.left=oDiv.offsetLeft+speed+"px";
        },30);
      }
    </script>
  </head>
  <body>
    <input id="btn1" type="button" value="开始运动" />
    <div id="div1"></div>
    <div id="div2"></div>
  </body>
</html>

相关推荐:

JS运动缓冲效果的封装函数如何使用

JS实现多物体缓冲运动实例代码_javascript技巧

以上就是js如何实现缓冲运动(代码实例)的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行