javascript 缓冲运动

最新推荐文章于 2024-07-12 10:43:17 发布

weixin_33720452

最新推荐文章于 2024-07-12 10:43:17 发布

阅读量128

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000016195997

版权

缓冲运动的特性

逐渐变慢，最后停止
距离越远速度越大
速度由距离决定
速度=（目标值-当前值）/缩放系数

距离大，速度大。
距离小，速度小。
速度和距离成正比。
缓冲运动的时候速度一定要取整，如果速度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>

weixin_33720452

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript 缓冲运动

缓冲运动的特性逐渐变慢，最后停止距离越远速度越大速度由距离决定速度=（目标值-当前值）/缩放系数距离大，速度大。距离小，速度小。速度和距离成正比。缓冲运动的时候速度一定要取整，如果速度0.9的话，不取整会直接变成0；速度大于0应向上取整，小于0应向下取整。下面我们就来做一个div从0移动到300的缓冲运动，做一个div从60...
复制链接

扫一扫

javascript 缓冲运动

缓冲运动的特性

代码实现缓冲运动

“相关推荐”对你有帮助么？