js等速運動をベースにしたサンプル解説-jsチュートリアル-php.cn

js等速運動をベースにしたサンプル解説

小云云

リリース： 2018-01-15 13:51:25

オリジナル

1320 人が閲覧しました

この記事では主に均一モーション（サイドバー、フェードイン、フェードアウト）をベースにした解説例を紹介します。編集者はこれがとても良いものだと思ったので、皆さんの参考として今から共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

JavaScript で要素 (p など) を動かすにはどうすればよいですか?

基本スタイルを設定し、必ず p を配置します (もちろん、マージンの変更を使用して要素の動きの効果を作成することもできます)。

<style>
    p {
      width: 100px;
      height: 100px;
      background: red;
      position: absolute;
      left: 0px;
    }
</style>

ログイン後にコピー

基本構造:

   <input type="button" value="动起来"/>
   <p id="box"></p>

ログイン後にコピー

このボタンをクリックするときは、p を配置する必要があります。それが動くとき、それは実際には p の左の値を変化させ続けることを意味し、それから p は最初に左を変化させ、それからそれを変化させ続けます

window.onload = function(){
    var oBtn = document.querySelector( "input" ),
      oBox = document.querySelector( '#box' );
    oBtn.onclick = function(){
      oBox.style.left = oBox.offsetLeft + 10 + 'px';
    }
  }

ログイン後にコピー

そしてボタンをクリックするたびに。、p の左の値は元の値に 10px を追加します。ここで、非インターラインスタイルを取得するメソッドを使用して、left プラス 10px の値を取得することもできます。これにより、効果も達成できます

function css(obj, attr) {
  if (obj.currentStyle) {
    return obj.currentStyle[attr];
  } else {
    return getComputedStyle(obj, false)[attr];
  }
}
window.onload = function () {
  var oBtn = document.querySelector("input"),
    oBox = document.querySelector('#box');
  oBtn.onclick = function () {
    oBox.style.left = parseInt( css( oBox, 'left' ) ) + 10 + 'px';
  }
}

ログイン後にコピー

offsetLeft 非インターラインスタイル left の値を取得することとの違いは何ですか?

offsetLeft には px 単位がありませんが、left には px 単位があります

oBtn.onclick = function () {
    // alert( css( oBox, 'left' ) ); //0px
    alert( oBox.offsetLeft ); //0
  }

ログイン後にコピー

ここで p をクリックして移動します。動き続けさせます。どうすればよいでしょうか? タイマーを追加します

  oBtn.onclick = function () {
    setInterval( function(){
      oBox.style.left = oBox.offsetLeft + 10 + 'px';
    }, 1000 / 16 );
  }

ログイン後にコピー

ボタンをクリックすると、p が左に動き続けます停止させるにはどうすればよいですか?停止するには必ず条件が必要です。たとえば、500px に達したら停止するようにお願いします

var timer = null;
  oBtn.onclick = function () {
    timer = setInterval( function(){
      if ( oBox.offsetLeft == 500 ) {
        clearInterval( timer );
      }else {
        oBox.style.left = oBox.offsetLeft + 10 + 'px';
      }
    }, 1000 / 16 );
  }

ログイン後にコピー

ここで、ステップサイズを 10 から 7 または 8 に変更すると、次のことがわかります。止められないのはなぜですか？ 500pxの判定条件がスキップされるので

0, 7, 14, 21 .... 280, 287, 294, 301, ... 490, 497, 504. 497から504までは500pxスキップされるのでpやめられない場合はどうすればいいですか？判定条件を変更するだけです。

oBtn.onclick = function () {
  timer = setInterval( function(){
    if ( oBox.offsetLeft >= 500 ) {
      oBox.style.left = 500 + 'px';
      clearInterval( timer );
    }else {
      oBox.style.left = oBox.offsetLeft + 7 + 'px';
    }
  }, 1000 / 16 );
}

ログイン後にコピー

条件を >=500 に変更してタイマーをクリアし、このコード oBox.style.left = 500 + 'px' を追加して強制的に 500px で停止します。そうしないと p は停止しません。 p が移動しているときにボタンをクリックし続けると、毎回 10 ピクセルが追加されるのではなく、別の問題が発生します。これは、ボタンをクリックするたびにタイマーがオンになり、ボタンをクリックするたびにタイマーがオンになるため、複数のタイマーが重畳され、速度も重畳されるためです。が加速し始めたら、10px の速度を維持する必要があります。これは、タイマーが重ならないようにすることを意味します。どうすればいいですか？

oBtn.onclick = function () {
  clearInterval( timer );
  timer = setInterval( function(){
    if ( oBox.offsetLeft >= 500 ) {
      oBox.style.left = 500 + 'px';
      clearInterval( timer );
    }else {
      oBox.style.left = oBox.offsetLeft + 7 + 'px';
    }
  }, 1000 / 16 );
}

ログイン後にコピー

タイマーが常にオンになるように、ボタンをクリックするたびに前のタイマーをクリアするだけで済みます。この時点で、最も基本的な等速モーション構造が完成し、これをにカプセル化できます。 function

    function animate(obj, target, speed) {
        clearInterval(timer);
        timer = setInterval(function () {
          if (obj.offsetLeft == target) {
            clearInterval(timer);
          } else {
            obj.style.left = obj.offsetLeft + speed + 'px';
          }
        }, 30);
      }

ログイン後にコピー

この関数を用意したら、小さなアプリケーションを作ってみましょう。

http://www.jiathis.com/getcode

このウェブサイトを開くと、右側にサイドバー効果があることに気づくでしょう (シェアしてください)。この種の特殊効果はウェブサイトでは非常に一般的です

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>侧边栏 - by ghostwu</title>
  <style>
    #box {
      width: 150px;
      height: 300px;
      background: red;
      position: absolute;
      left: -150px;
      top: 50px;
    }

    #box p {
      width: 28px;
      height: 100px;
      position: absolute;
      right: -28px;
      top: 100px;
      background: green;
    }
  </style>
  <script>
    window.onload = function () {
      var timer = null;
      var oBox = document.getElementById("box");
      oBox.onmouseover = function () {
        animate(this, 0, 10);
      }
      oBox.onmouseout = function () {
        animate(this, -150, -10);
      }
      function animate(obj, target, speed) {
        clearInterval(timer);
        timer = setInterval(function () {
          if (obj.offsetLeft == target) {
            clearInterval(timer);
          } else {
            obj.style.left = obj.offsetLeft + speed + 'px';
          }
        }, 30);
      }
    }
  </script>
</head>
<body>
<p id="box">
  <p>分享到</p>
</p>
</body>
</html>

ログイン後にコピー

また来てくださいフェードインとフェードアウト効果:

マウスを上に動かすと、透明度が 1 になります

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>淡入淡出 - by ghostwu</title>
  <style>
    img {
      border: none;
      opacity: 0.3;
      filter: alpha(opacity:30);
    }
  </style>
  <script>
    window.onload = function () {
      var timer = null;
      var oImg = document.getElementById("img");
      oImg.onmouseover = function(){
        animate( this, 100, 10 );
      }
      oImg.onmouseout = function(){
        animate( this, 30, -10 );
      }
      //alpha=30 --> 100
      function animate(obj, target, speed) {
        clearInterval(timer);
        var cur = 0;
        timer = setInterval(function () {
          cur = css( obj, 'opacity') * 100;
          if( cur == target ){
            clearInterval( timer );
          }else {
            cur += speed;
            obj.style.opacity = cur / 100;
            obj.style.filter = "alpha(opacity:" + cur + ")";
          }
        }, 30);
      }

      function css(obj, attr) {
        if (obj.currentStyle) {
          return obj.currentStyle[attr];
        } else {
          return getComputedStyle(obj, false)[attr];
        }
      }
    }
  </script>
</head>
<body>
<img src="./img/h4.jpg" alt="" id="img"/>
</body>
</html>

ログイン後にコピー