Question

我意识到这里有很多关于此的答案，但这个特定的实例有一个非常个别的问题。在使用clearInterval之后，我需要在单击时重放此png序列。

var myImage = document.getElementById("myImage");

var animationArray = ['assets/calvin_hobbes_dance00.png',
                    'assets/calvin_hobbes_dance01.png',
                    'assets/calvin_hobbes_dance02.png',
                    'assets/calvin_hobbes_dance03.png',
                    'assets/calvin_hobbes_dance04.png',
                    'assets/calvin_hobbes_dance05.png',
                    'assets/calvin_hobbes_dance06.png',
                    'assets/calvin_hobbes_dance07.png',
                    'assets/calvin_hobbes_dance08.png',
                    'assets/calvin_hobbes_dance09.png',
                    'assets/calvin_hobbes_dance10.png'];

var animationIndex = 0;

function changeImage () {

  myImage.setAttribute("src", animationArray[animationIndex]);
  animationIndex++;

  if (animationIndex >= animationArray.length) {
    animationIndex = 10;
    clearInterval(intervalHandler);
    }
}

  var intervalHandler =  setInterval(changeImage, 100);

第二个问题，这只是一个代码示例。我如何包装这个以便我可以将它用于附加动画的元素，当焦点播放动画时？

谢谢。

Answer 1

只需在图片中添加onclick处理程序即可。在onclick处理程序中，将animationIndex重置为0，调用clearInterval以清除正在运行的时间间隔，然后再次调用setInterval函数。

var myImage = document.getElementById("myImage");

var animationArray = ['assets/calvin_hobbes_dance00.png',
                'assets/calvin_hobbes_dance01.png',
                'assets/calvin_hobbes_dance02.png',
                'assets/calvin_hobbes_dance03.png',
                'assets/calvin_hobbes_dance04.png',
                'assets/calvin_hobbes_dance05.png',
                'assets/calvin_hobbes_dance06.png',
                'assets/calvin_hobbes_dance07.png',
                'assets/calvin_hobbes_dance08.png',
                'assets/calvin_hobbes_dance09.png',
                'assets/calvin_hobbes_dance10.png'];

var animationIndex = 0;

function changeImage () {

  myImage.setAttribute("src", animationArray[animationIndex]);
  animationIndex++;

  if (animationIndex >= animationArray.length) {
    animationIndex = 10;
    clearInterval(intervalHandler);
  }
}

myImage.onclick = function() {
  animationIndex = 0;
  clearInterval(intervalHandler);
  intervalHandler =  setInterval(changeImage, 100);
};

var intervalHandler =  setInterval(changeImage, 100);

要回答您的第二个问题，您可能需要考虑另一种方法，因为这可能会变得混乱并且将来很难维护。考虑学习如何使用HTML画布进行动画制作。这是我发现的一个教程，展示了如何创建多个动画：http://www.williammalone.com/articles/create-html5-canvas-javascript-sprite-animation/

事实上，我建议改变你的实现，改为使用画布。

在声明了clearInterval之后，如何重新设置setInterval？

1 个答案: