动画png停在最后一帧JavaScript

时间:2018-07-09 12:09:49

标签: javascript jquery html animation

我正在使用此代码为PNG序列制作动画。

    <div id="animation">
          <img src="/Sequence-1/Sequence-100.png" class="animated show" />
          <img src="/Sequence-1/Sequence-101.png" class="animated" />
          <img src="/Sequence-1/Sequence-102.png" class="animated" />
          <img src="/Sequence-1/Sequence-103.png" class="animated" />
          <img src="/Sequence-1/Sequence-104.png" class="animated" />
    </div>    

    onload = function startAnimation() {
        var frames = document.getElementById("animation").children;
        var frameCount = frames.length;
        var i = 0;
        setInterval(function () {
            frames[i % frameCount].style.display = "none";
            frames[++i % frameCount].style.display = "block";
        }, 30);
    }
  #animation img {
    display: none;
  }
  #animation img:first-child {
    display: block;
  }

它工作正常,但我想在最后一帧停止动画。但是我不知道该如何实现?谁能帮我吗?

谢谢。

0 个答案:

没有答案