JavaScriptの無限のアニメーションを止める方法

Question

私は以下のアニメーションを開発しています....アニメーションは無限になりました..いくつかの条件があります.. 1.）ボタンをクリックすると、ボールが上がりますダウン当時）のデフォルトの位置... 2.に停止する必要がありますuは二度目のボタンをクリックした場合、それは2個のボールが衝突を示します...どのようにjavascript

function animationone(cobj) { 
 
    var circle = document.getElementById("circle" + cobj); 
 
    var h = window.innerHeight - 50; 
 

 
    var btmPos = 0; 
 
    var isForward = true; 
 

 
    setInterval(function() { 
 
     
 
     if (btmPos < h && isForward) { 
 
      btmPos += 10; 
 
      isForward = true; 
 

 
     } else { 
 
      if (btmPos > 20) { 
 
       isForward = false; 
 
       btmPos -= 10; 
 
      } else { 
 
       btmPos += 10; 
 
       isForward = true; 
 
      } 
 

 
     } 
 
     circle.style.bottom = btmPos + "px"; 
 
    }, 100); 
 
};

body{ 
 
    background-color: gray; 
 
    position: relative; 
 
    min-height: 558px; 
 
} 
 
.overall{ 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
} 
 
.box, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10{ 
 
    width: 9%; 
 
    text-align: center; 
 
    float: left; 
 
    margin-right: 5px; 
 
} 
 

 
#circle1, #circle2, #circle3, #circle4, #circle5, #circle6, #circle7, #circle8, #circle9, #circle10{ 
 
    width: 45px; 
 
    height: 45px; 
 
    background-color: violet; 
 
    z-index: 10; 
 
    border-radius: 30px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    display: table; 
 
    position: absolute; 
 
    bottom: 16px; 
 
}

<div class="overall"> 
 
      <div class="box"> 
 
       <p id="circle1"></p> 
 
       <hr> 
 
       <button onclick="animationone(1)">Button 1</button> 
 
      </div> 
 

 
      <div class="box2"> 
 
       <p id="circle2"></p> 
 
       <hr> 
 
       <button onclick="animationone(2)">Button 2</button> 
 
      </div> 
 

 
      <div class="box3"> 
 
       <p id="circle3"></p> 
 
       <hr> 
 
       <button onclick="animationone(3)">Button 3</button> 
 
      </div> 
 
      
 
      <div class="box4"> 
 
      <p id="circle4"></p> 
 
      <hr> 
 
      <button onclick="animationone(4)">Button 4</button> 
 
     </div> 
 
      
 
      <div class="box5"> 
 
      <p id="circle5"></p> 
 
      <hr> 
 
      <button onclick="animationone(5)">Button 5</button> 
 
     </div> 
 
      
 
      <div class="box6"> 
 
      <p id="circle6"></p> 
 
      <hr> 
 
      <button onclick="animationone(6)">Button 6</button> 
 
     </div> 
 
      
 
      <div class="box7"> 
 
      <p id="circle7"></p> 
 
      <hr> 
 
      <button onclick="animationone(7)">Button 7</button> 
 
     </div> 
 
      
 
      <div class="box8"> 
 
      <p id="circle8"></p> 
 
      <hr> 
 
      <button onclick="animationone(8)">Button 8</button> 
 
     </div> 
 
      
 
      <div class="box9"> 
 
      <p id="circle9"></p> 
 
      <hr> 
 
      <button onclick="animationone(9)">Button 9</button> 
 
     </div> 
 
      
 
      <div class="box10"> 
 
      <p id="circle10"></p> 
 
      <hr> 
 
      <button onclick="animationone(10)">Button 10</button> 
 
     </div> 
 

 
     </div>

Answer 1

私はあなたの質問を理解したかどうかは分かりませんが、インタラクションに基づいて、アニメーションをもっと作成せずに実行したいと思っています。

これを達成するために間隔をクリアしました。それ以外の場合は、新しい間隔が既存の間隔の上に作成されます。各ボタンには独自のアニメーションがあるため、間隔はお互いに分かれています。

各ボタンに間隔属性を割り当てて値を保存しました。おそらくこれを要素データオブジェクトとして保存するのが最善の方法です。 HTML Onclickイベントは、要素の参照にも渡されるようになり、引数リストのthisになります。

function animationone(cobj, button) { 
 
    if (button.interval) clearInterval(button.interval); // clear the interval if an interval already exists 
 
    var circle = document.getElementById("circle" + cobj); 
 
    var h = window.innerHeight - 50; 
 

 
    var btmPos = 0; 
 
    var isForward = true; 
 

 
    var interval = setInterval(function() { 
 

 
    if (btmPos < h && isForward) { 
 
     btmPos += 10; 
 
     isForward = true; 
 

 
    } else { 
 
     if (btmPos > 20) { 
 
     isForward = false; 
 
     btmPos -= 10; 
 
     } else { 
 
     btmPos += 10; 
 
     isForward = true; 
 
     } 
 

 
    } 
 
    circle.style.bottom = btmPos + "px"; 
 
    }, 100); 
 
    button.interval = interval; // set the new interval reference 
 
};

body { 
 
    background-color: gray; 
 
    position: relative; 
 
    min-height: 558px; 
 
} 
 
.overall { 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
} 
 
.box, 
 
.box2, 
 
.box3, 
 
.box4, 
 
.box5, 
 
.box6, 
 
.box7, 
 
.box8, 
 
.box9, 
 
.box10 { 
 
    width: 9%; 
 
    text-align: center; 
 
    float: left; 
 
    margin-right: 5px; 
 
} 
 
#circle1, 
 
#circle2, 
 
#circle3, 
 
#circle4, 
 
#circle5, 
 
#circle6, 
 
#circle7, 
 
#circle8, 
 
#circle9, 
 
#circle10 { 
 
    width: 45px; 
 
    height: 45px; 
 
    background-color: violet; 
 
    z-index: 10; 
 
    border-radius: 30px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    display: table; 
 
    position: absolute; 
 
    bottom: 16px; 
 
}

<div class="overall"> 
 
    <div class="box"> 
 
    <p id="circle1"></p> 
 
    <hr> 
 
    <button onclick="animationone(1, this)">Button 1</button> 
 
    <!-- note the extra agrument "this" --> 
 
    </div> 
 

 
    <div class="box2"> 
 
    <p id="circle2"></p> 
 
    <hr> 
 
    <button onclick="animationone(2, this)">Button 2</button> 
 
    </div> 
 

 
    <div class="box3"> 
 
    <p id="circle3"></p> 
 
    <hr> 
 
    <button onclick="animationone(3, this)">Button 3</button> 
 
    </div> 
 

 
    <div class="box4"> 
 
    <p id="circle4"></p> 
 
    <hr> 
 
    <button onclick="animationone(4, this)">Button 4</button> 
 
    </div> 
 

 
    <div class="box5"> 
 
    <p id="circle5"></p> 
 
    <hr> 
 
    <button onclick="animationone(5, this)">Button 5</button> 
 
    </div> 
 

 
    <div class="box6"> 
 
    <p id="circle6"></p> 
 
    <hr> 
 
    <button onclick="animationone(6, this)">Button 6</button> 
 
    </div> 
 

 
    <div class="box7"> 
 
    <p id="circle7"></p> 
 
    <hr> 
 
    <button onclick="animationone(7, this)">Button 7</button> 
 
    </div> 
 

 
    <div class="box8"> 
 
    <p id="circle8"></p> 
 
    <hr> 
 
    <button onclick="animationone(8, this)">Button 8</button> 
 
    </div> 
 

 
    <div class="box9"> 
 
    <p id="circle9"></p> 
 
    <hr> 
 
    <button onclick="animationone(9, this)">Button 9</button> 
 
    </div> 
 

 
    <div class="box10"> 
 
    <p id="circle10"></p> 
 
    <hr> 
 
    <button onclick="animationone(10, this)">Button 10</button> 
 
    </div> 
 

 
</div>

Answer 2

を通じて、この問題を修正します

間隔を停止するには、次の手順を実行します。 変数に入れる：

window.runner=window.setInterval(...,1000); 

今あなたが使ってそれを停止することができます：あなたが見ることができるようにあなたはすべての関数の内部で間隔をクリアすることができるように、私は窓のスコープにそれを追加しました

window.clearInterval(window.runner); 

。