在javascript中动画，如何逐个发射子弹？

Question

我正在尝试在javascript中制作一个枪击简单的动画。这是我的子弹射击代码。

JavaScript代码：

function myMove() {
    var elem = document.getElementById("myAnimation");   
    var pos = 0;
    var id = setInterval(frame, 5);
    function frame() {
        if (pos == 350) {
            clearInterval(id);
            document.getElementById('myAnimation').style.display='none';
        } else {
            pos++; 
            //elem.style.top = pos + 'px'; 
            elem.style.left = pos + 'px'; 
        }
    }
}

Html代码：

        <div class ="col-md-12"><div class="col-md-3"><img src="images/gun.jpg" onclick="myMove()"></div>
<div id="myAnimation" class="col-md-7">

<img  src="images/Bullet.png"><br>
<img  src="images/Bullet.png"><br>
<img  src="images/Bullet.png"><br>
<img  src="images/Bullet.png"><br>
<img  src="images/Bullet.png"><br>
</div>


</div>

问题是，当我点击一次，所有子弹同时被射击。只有当我点击gun.jpg的触发器时，我才希望子弹一个接一个地被解雇。不需要其他复杂的场景。

Answer 1

您可以使用解决方案https://jsfiddle.net/5bcncsv2/

var width = $('body').width();
var bullets = $('#myAnimation').children();
var cnt = 1;

var interval = setInterval(function(){
	var calWidth = width - $('img:nth-child(' + cnt + ')').width();
	$("#myAnimation img:nth-child(" + cnt + ")").animate({left: calWidth });
  cnt++;
  if(cnt === bullets.length)
  	clearInterval(interval);
}, 50);

img{
  width:50px;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class ="col-md-12">
  <div class="col-md-3">
    <img src="images/gun.jpg" onclick="myMove()">
  </div>
  <div id="myAnimation" class="col-md-7">
    <img  src="http://www.freeiconspng.com/uploads/bullet-png-pictures-1.png"><br>
    <img  src="http://www.freeiconspng.com/uploads/bullet-png-pictures-1.png"><br>
    <img  src="http://www.freeiconspng.com/uploads/bullet-png-pictures-1.png"><br>
    <img  src="http://www.freeiconspng.com/uploads/bullet-png-pictures-1.png"><br>
    <img  src="http://www.freeiconspng.com/uploads/bullet-png-pictures-1.png"><br>
  </div>
</div>

动画在文档就绪时被触发，因为您的场景可能会被点击。

首先获取#myAnimation的孩子数，这将帮助您清除间隔（一旦到达最后一个孩子）。

获取宽度，直到animate＆amp;在setInterval内提供详细信息。

希望这会对你有所帮助。

Answer 2

function myMove(){
  var index = 0;
  var elem = document.getElementsByClassName("bullets");
  var pos = 0;
  var id = setInterval(function(){frame()}, 1000);
  function frame() {
    elem[index].style.marginLeft = '350px'; 
    index ++;
    if (index === 5) {
      clearInterval(id);
      document.getElementById('myAnimation').style.display='none'
    }
  }
}

<div class ="col-md-12"><div class="col-md-3"><img src="images/gun.jpg" alt = "SHOOT" onclick="myMove()"></div>
  <div id="myAnimation" class="col-md-7">
    <img  class = "bullets" src="images/Bullet.png" alt = "bullet1"><br>
    <img class = "bullets"  src="images/Bullet.png" alt = "bullet2"><br>
    <img class = "bullets"  src="images/Bullet.png" alt = "bullet3"><br>
    <img class = "bullets"  src="images/Bullet.png" alt = "bullet4"><br>
    <img class = "bullets"  src="images/Bullet.png" alt = "bullet5"><br>
  </div>
</div>

Answer 3

这个演示版是纯CSS。它涉及字体图标，单选按钮和标签。 CSS动画更容易使用，并利用GPU处理。尽可能快地点击枪支，但它不会打破。

演示

＆＃13;

＆＃13;

.range {
  display: block;
  width: 100%;
  position: absolute;
}

.gun {
  font-size: 80px;
  margin-left: 70%;
  position: relative;
  display: block;
  line-height: 1;
  cursor: pointer
}

.gun::before {
  opacity: 0;
  content: '';
  font-size: 30px;
  display: inline-block;
  position: absolute;
  left: -10%;
  top: 10%;
}

.gun:active::before {
  opacity: 1;
}

#trigger1,
#trigger2 {
  display: none;
}

.shot {
  position: absolute;
  opacity: 0;
  left: 70%;
  top: -5%;
  font-size: 40px;
}

.trigger:checked+.range .gun+.shot {
  opacity: 1;
  transform: translateX(-10000%);
  transition: opacity .1s, transform .7s;
}

.trigger:checked+.range .gun {
  display: none;
}

＆＃13;

<input id='trigger1' class='trigger' type='radio' name='fire'>
<span class='range'>
<label class="gun" for='trigger1'></label>
<output class='shot'>⁌</output>
</span>

<input id='trigger2' class='trigger' type='radio' name='fire' checked>
<span class='range'>
<label class="gun" for='trigger2'></label>
<output class='shot'>⁌</output>
</span>

＆＃13;

＆＃13;

＆＃13;