Question

我正在制作一个HTML / JavaScript游戏，作为其中的一部分，有一个“特殊能力”，只能每x秒触发一次。我创建了一个GUI元素，显示该功能是否可以使用。因为我正在使用CSS动画，所以我想检查一下按键上的元素是否已经完成动画（表明它已准备就绪）。

我想在一个简单的if语句中执行此操作，而不是使用addEventListener，但我不确定这是否可行。

到目前为止我的代码是：

    var keystate = {};

    window.addEventListener("keydown", function(e) {
      keystate[e.keycode || e.which] = true;
    }, true);
    window.addEventListener("keyup", function(e) {
      keystate[e.keycode || e.which] = false;
    }, true);

    window.setInterval(function() {
      if (keystate[87]) { //w key, THIS is where I want to check if the animation has completed as well
        //do stuff
        document.getElementById("circle_flash_glow").classList.add("circle_flash_use");
      }
    }, 16.666666666666667);

#svg_circle_loader {
  position: absolute;
  right: 0;
  bottom: 0;
  background: none;
  border: none;
  margin: none;
  padding: none;
}
#circle_flash_loader {
  fill: none;
  stroke: #F00;
  stroke-width: 10px;
  stroke-dashoffset: 80;
  animation-fill-mode: forwards;
}
.circle_loader_load {
  animation: circle_flash_loading linear;
  animation-duration: 2.5s;
}
@keyframes circle_flash_loading {
  0% {
    stroke-dasharray: 0, 314;
  }
  100% {
    stroke-dasharray: 314, 0;
  }
}
#circle_flash_glow {
  fill: none;
  stroke: #F00;
  stroke-width: 0px;
  animation-fill-mode: forwards;
  opacity: 1;
}
.circle_flash_use {
  animation: circle_flash_pulse 0.6s ease-out;
}
@keyframes circle_flash_pulse {
  0% {
    opacity: 1;
    stroke-width: 0px;
  }
  100% {
    opacity: 0;
    stroke-width: 70px;
  }
}

<svg id="svg_circle_loader" width="200" height="200">
  <defs>
    <filter id="f1" x="-50" y="-50" width="200" height="200">
      <feGaussianBlur stdDeviation="5"></feGaussianBlur>
    </filter>
  </defs>
  <circle cx="100" cy="100" r="50" id="circle_flash_glow" class="" filter="url(#f1)"></circle>
  <circle cx="100" cy="100" r="50" id="circle_flash_loader" class="circle_loader_load"></circle>
</svg>

Answer 1

添加变量以设置当前状态，并使用setTimeout()设置它以检查它是否为动画。同时添加window.onload以通过添加

来获取其状态

window.onload=function(){
  animating=true;
  sts.value=animating;
  window.setTimeout(function() {
    animating=false;
    sts.value=animating;
  }, 2500);
};

我正在使用2500。因为你的css动画属性有 2.5S在2500ms =

var animating = false;
var keystate = {};

window.addEventListener("keydown", function(e) {
  keystate[e.keycode || e.which] = true;
}, true);
window.addEventListener("keyup", function(e) {
  keystate[e.keycode || e.which] = false;
}, true);

window.setInterval(function() {
  if (keystate[87]) { //w key, THIS is where I want to check if the animation has completed as well
    //do stuff
    if (!animating) {
      alert("animation finished");
      document.getElementById("circle_flash_glow").classList.add("circle_flash_use");
    }
  }
}, 16.666666666666667);

window.onload = function() {
  animating = true;
  sts.value = animating;
  window.setTimeout(function() {
    animating = false;
    sts.value = animating;
  }, 2500);
};

#svg_circle_loader {
  position: absolute;
  right: 0;
  bottom: 0;
  background: none;
  border: none;
  margin: none;
  padding: none;
}
#circle_flash_loader {
  fill: none;
  stroke: #F00;
  stroke-width: 10px;
  stroke-dashoffset: 80;
  animation-fill-mode: forwards;
}
.circle_loader_load {
  animation: circle_flash_loading linear;
  animation-duration: 2.5s;
}
@keyframes circle_flash_loading {
  0% {
    stroke-dasharray: 0, 314;
  }
  100% {
    stroke-dasharray: 314, 0;
  }
}
#circle_flash_glow {
  fill: none;
  stroke: #F00;
  stroke-width: 0px;
  animation-fill-mode: forwards;
  opacity: 1;
}
.circle_flash_use {
  animation: circle_flash_pulse 0.6s ease-out;
}
@keyframes circle_flash_pulse {
  0% {
    opacity: 1;
    stroke-width: 0px;
  }
  100% {
    opacity: 0;
    stroke-width: 70px;
  }
}

<svg id="svg_circle_loader" width="200" height="200">
  <defs>
    <filter id="f1" x="-50" y="-50" width="200" height="200">
      <feGaussianBlur stdDeviation="5"></feGaussianBlur>
    </filter>
  </defs>
  <circle cx="100" cy="100" r="50" id="circle_flash_glow" class="" filter="url(#f1)"></circle>
  <circle cx="100" cy="100" r="50" id="circle_flash_loader" class="circle_loader_load"></circle>
</svg>
<input id="sts" value="" />

CSS动画结束后的JavaScript

1 个答案: