jsでバッファリングモーションを実装する方法（コード例）-jsチュートリアル-php.cn

jsでバッファリングモーションを実装する方法（コード例）

不言

リリース： 2018-08-31 10:25:00

オリジナル

1218 人が閲覧しました

この記事の内容は、js でのバッファリング動作の実装方法 (コード例) です。必要な方は参考にしていただければ幸いです。

バッファリングモーションの特徴

徐々に遅くなり、最終的に停止します
距離が遠いほど速度が大きくなります
速度は距離によって決まります
速度=(目標値 - 現在の値) / スケーリング係数

素晴らしい距離と素晴らしいスピード。
距離が短く、速度も小さい。
速度は距離に正比例します。
速度が 0.9 の場合、速度は四捨五入されずに四捨五入される必要があります。速度が 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>

ログイン後にコピー