javascript - 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

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

演示

.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: 22px;
}

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

#trigger1,
#trigger2 {
  display: none;
}

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

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

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

/**
 * Added to remove blue highlighting
 * https://stackoverflow.com/a/21003770/2813224
 */
.noSelect {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.noSelect:focus {
    outline: none !important;
}

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

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