javascript - .png 或 .jpg 图像在屏幕上移动，spritesheet，css 关键帧，停止并重复循环

Question

有谁知道如何通过使用 .png 或 .jpg 图像来停止 css 关键帧旋转/圆周运动来移动图像，而不是无限循环它，它必须在一段时间后停止？

基本上，存在这个问题，我找不到将 .png 图像与 css 结合使用的方法，然后在一段时间后停止时用圆周运动将其绑定(bind)。

之后当点击一个随机位置时，它必须消失，然后在触发某个事件后重新出现，并再次经历相同的动画。

我找到了这个 fiddle ，https://jsfiddle.net/cshao/1kb8cm7j/1/ ，一切都按预期工作，但停止与点击事件相关联而不是时间过去并且它不回答如何在点击 Canvas 后重新启动该事件，它应该返回到 0 或 360 度位置然后旋转一半转了一圈然后停了下来。下面这个 fiddle 的代码——

JavaScript:

function include(arr,obj) {
return (arr.indexOf(obj) != -1);
}

var hasPaused = false;
document.addEventListener('click', function(e) {
  if (hasPaused) {
    return;
  }
  if (e.target.id == "errordot") {
    var sun = document.getElementById('errorsun');
    // var classes = sun.className.split(" ");
    if (sun.className == "orbit") {
        //sun.className = "";
        sun.setAttribute('class', 'orbit paused');
        e.target.style.backgroundColor = 'green';
        hasPaused = true;
      }
     else {
        sun.setAttribute('class', 'orbit');
        e.target.style.backgroundColor = 'yellow';
      }
    }
});

CSS:

#errordot{
position:absolute;
top:0;
left:0;
width:50px;
height:50px;
background:red;
border-radius:50%;
font-size:40px;
}
#errorsun{
    width:200px;
    height:200px;
    position:absolute;
    top:50px;
   left:50px;
}
.orbit {
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    -webkit-animation-name:orbit;
    -webkit-animation-duration:5s;
}
.paused {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}

@-webkit-keyframes orbit {
from { -webkit-transform:rotate(0deg) }
to { -webkit-transform:rotate(360deg) }
}
@-moz-keyframes orbit {
from { -moz-transform:rotate(0deg) }
to { -moz-transform:rotate(360deg) }
}

HTML:

<div id="errorsun">
<div id="errordot">
</div>
</div>

此外，图像应该在打开时立即开始移动，或者当图像已经消失时在 Canvas 上单击，移动到一半然后停止。 此外，此示例中的点是使用 css 制作的，因为需要的是静止的 .png 或 .jpg 图像，它们将以相同的方式执行。

我尝试使用 spritesheet 动画，成功地使图像移动然后循环，但是找不到一种方法可以使该图像在一段时间后停止，然后在 Canvas 上单击时消失并在按下时重复循环图像消失后再次出现在 Canvas 上。

总之，需要 .png 或 .jpg 图像以圆周运动在屏幕上移动半个圆周，然后停下来，保持在那里直到有人按下卡瓦或任何其他随机位置，它会消失，然后在图像不再可见后在 Canvas 上按下/单击时重复循环。基本上它的功能，click-gone，click-animation and stop，click-gone，click-animation and stop等。

我通过隐藏 css 类来尝试在 javascript 中隐藏或可见。这会使图像消失，但在再次可见后，它会保留在屏幕上的确切位置，就像它被隐藏之前一样。

我也尝试过使用 .gif，但无法阻止它，所以它一遍又一遍地循环。甚至设置了gif应该有的步数，但是它不再移动了，因为我无法让它再次移动。

Answer 1

function include(arr,obj) {
    return (arr.indexOf(obj) != -1);
}

var hasPaused = false;
document.addEventListener('click', function(e) {
  if (hasPaused) {
		var sun = document.getElementById('errorsun');
		sun.removeAttribute('class');
		var errorDot =  document.getElementById('errordot');
		errorDot.removeAttribute('style');
    hasPaused = false;
    return;
  }
  if (e.target.id == "errordot") {
  	var sun = document.getElementById('errorsun');
    // var classes = sun.className.split(" ");
    
    if (sun.classList.length == 0) {
  			    	sun.setAttribute('class', 'orbit');
      	        e.target.style.backgroundColor = 'yellow';
      	        setTimeout(()=> {
      	        sun.setAttribute('class', 'orbit paused');
      	        e.target.style.backgroundColor = 'green';
      	        hasPaused = true;
      	          }, 2000);
      }
    }
});

#errordot{
    position:absolute;
    top:0;
    left:0;
    width:50px;
    height:50px;
    background:red;
    border-radius:50%;
    font-size:40px;
}
#errorsun{
    width:200px;
    height:200px;
    position:absolute;
    top:50px;
    left:50px;
}
.orbit {
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    -webkit-animation-name:orbit;
    -webkit-animation-duration:5s;
}
.paused {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}

@-webkit-keyframes orbit {
from { -webkit-transform:rotate(0deg) }
to { -webkit-transform:rotate(360deg) }
}
@-moz-keyframes orbit {
from { -moz-transform:rotate(0deg) }
to { -moz-transform:rotate(360deg) }
}

<div id="errorsun">
<div id="errordot">
</div>
</div>