片方の丸が別の丸を追いかけるアニメーションのコード（再実行可能）




オリジナル：赤丸を青丸が追いかけるアニメーションのコード（正式）

<!DOCTYPE html>
<html lang="ja">
<head>
  <title></title>
  <style>
    #container {
      position: relative;
      height: 300px;
      width: 300px;
      border: 1px solid black;
    }
    #circle {
      position: absolute;
      height: 20px; /* 赤丸のサイズ */
      width: 20px; /* 赤丸のサイズ */
      background-color: red;
      border-radius: 50%;
      transition: top 0.5s, left 0.5s; /* 赤丸の速度 */
      z-index: 1; /* 赤丸を前面に表示 */
    }
    #circle2 {
      position: absolute;
      height: 20px; /* 青丸のサイズ */
      width: 20px; /* 青丸のサイズ */
      background-color: blue;
      border-radius: 50%;
      transition: top 2s, left 2s; /* 青丸の速度 */
      z-index: 2; /* 青丸を前面に表示 */
    }
    #line {
      position: absolute;
      height: 40px;
      width: 1px; /* 縦線の幅 */
      background-color: white;
      right: -1px; /* 右枠に配置 */
      top: calc(50% - 20px); /* 上下中央に配置 */
    }
    label,input,button{ height:30px;font-size:18px;}
    input{width:150px;}
  </style>
</head>
<body>
  <div id="container">
    <div id="circle"></div>
    <div id="circle2"></div>
    <div id="line"></div> <!-- 縦線を追加 -->
  </div>

  <form id="speedForm">
    <label for="redSpeed">赤丸の速度 (秒):</label>
    <input type="number" id="redSpeed" name="redSpeed" step="0.1" value="0.5"><br>
    <label for="blueSpeed">青丸の速度 (秒):</label>
    <input type="number" id="blueSpeed" name="blueSpeed" step="0.1" value="2"><br>
    <button type="button" onclick="updateSpeeds()" style="width:300px;">更新</button><br>
  </form>

  <script>
    var container = document.getElementById('container');
    var circle = document.getElementById('circle');
    var circle2 = document.getElementById('circle2');

    var x = 0;
    var y = 0;

    function moveCircle() {
      x = Math.floor(Math.random() * (container.offsetWidth - circle.offsetWidth));
      y = Math.floor(Math.random() * (container.offsetHeight - circle.offsetHeight));

      circle.style.left = x + 'px';
      circle.style.top = y + 'px';
    }

    function followCircle() {
      circle2.style.left = x + 'px';
      circle2.style.top = y + 'px';
    }

    function moveToCenter() {
      x = container.offsetWidth - circle.offsetWidth;
      y = (container.offsetHeight - circle.offsetHeight) / 2;

      circle2.style.transition = 'left 1s, top 1s'; // 青丸の速度
      circle2.style.left = x + 'px';
      circle2.style.top = y + 'px';
      circle.style.transition = 'left 2s, top 2s'; // 赤丸の速度
      circle.style.left = x - circle.offsetWidth / 2 + 'px';
      circle.style.top = y + 'px';
    }

    function moveToOutside() {
      x = container.offsetWidth + circle.offsetWidth;
      y = (container.offsetHeight - circle.offsetHeight) / 2;

      circle2.style.transition = 'left 1s, top 1s'; // 青丸の速度
      circle2.style.left = x + 'px';
      circle2.style.top = y + 'px';
    }

    function run() {
       // 最初の位置
      // circle.style.left = '0px';
      // circle.style.top = '0px';
      moveCircle();
      circle2.style.left = (container.offsetWidth - circle2.offsetWidth * 2) + 'px';
      circle2.style.top = (container.offsetHeight - circle2.offsetHeight) / 2 + 'px';

      var intervalId = setInterval(moveCircle, 1000); // 1秒ごとに赤丸を移動
      var intervalId2 = setInterval(followCircle, 1000); // 1秒ごとに青を移動

      setTimeout(function() {
        clearInterval(intervalId); // 赤丸のランダムな移動を停止
        clearInterval(intervalId2); // 青丸のランダムな移動を停止、停止しないと次回に枠外に戻ろうとする
        moveToCenter(); // 20秒後に青丸を右枠中央に移動
      }, 20000);
      setTimeout(function() {
        moveToOutside(); // 21秒後に青丸を枠の外に移動
      }, 21000);
    }
    run();
    var redSpeed = 0.5;
    var blueSpeed = 2;

    function updateSpeeds() {
      redSpeed = parseFloat(document.getElementById('redSpeed').value);
      blueSpeed = parseFloat(document.getElementById('blueSpeed').value);

      // 赤丸と青丸の速度を更新
      circle.style.transition = 'top ' + redSpeed + 's, left ' + redSpeed + 's';
      circle2.style.transition = 'top ' + blueSpeed + 's, left ' + blueSpeed + 's';

      // 赤丸と青丸の重なりを更新
      circle.style.zIndex = Math.floor(redSpeed*10);
      circle2.style.zIndex = Math.floor(blueSpeed*10);

      // 再実行
      run();
    }
  </script>
</body>
</html>

コメント

コメントを投稿