Question

我目前正在尝试学习JavaScript并尝试了很多东西，但就目前而言，我的JS skilly仍然非常有限。我创建了一个小游戏，其中有一个随机出现的兔子头盒子，用户必须尽快点击它们。

所以我用间隔动画创建了兔子，兔子关闭并在每2秒内睁开眼睛。现在我觉得有点愚蠢，但我无法让动画像我想要的那样工作。现在，兔子每2秒钟闭上眼睛，然后每2秒再次打开它们。但是，我希望它只是眨眼，这意味着眼睛应该暂时关闭然后再打开，这样兔子每2秒闪烁一次。然后我还希望它有时会偶尔闪烁一次，有时会眨眼两次。不确定这是不是很容易，而且我只是因为编写代码和学习新东西而盲目，但似乎我可能需要你的帮助。

Here is a fiddle就像现在一样。

您可以看到小提琴内部使用的完整代码。我不想在代码部分发布整个网站，但我认为我的动画部分感兴趣。

这是眨眼睛的js代码：

var eyeleft = document.getElementById("eyeleft");
var eyeright = document.getElementById("eyeright");

window.onload = setInterval(function() {
    eyeleft.className = (eyeleft.className != 'closedeyeleft' ? 'closedeyeleft' : 'eyeleft');
    eyeright.className = (eyeright.className != 'closedeyeright' ? 'closedeyeright' : 'eyeright');
    }, 2000);

下一步HTML

<div id="shape" class="game-shapes">
    <div class="ears left"></div>
    <div class="ears right"></div>
    <div id="eyeleft" class="eyeleft"></div>
    <div id="eyeright" class="eyeright"></div>
    <div id="mouth">
        <div id="tooth"></div>
        <div id="tongue"></div>
    </div>
</div>

现在是CSS

.game-shapes {
  height: 80px;
  width: 80px;
  cursor: pointer;
  opacity: 0;
  position: relative;
  transition: opacity ease-in-out .2s;
}
.game-shapes div {
  position: absolute;
}
.eyeleft,
.eyeright {
  background: #000;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  top: 30px;
}
.eyeleft {
  left: 4px;
}
.eyeright {
  right: 4px;
}
.eyeleft:before,
.eyeleft:after,
.eyeright:before,
.eyeright:after {
  content: '';
  background: #fff;
  width: 7px;
  height: 7px;
  top: 4px;
  left: 4px;
  border-radius: 50%;
  position: absolute;
  z-index: 5;
}
.eyeleft:after,
.eyeright:after {
  width: 4px;
  height: 4px;
  top: 10px;
  left: 10px;
}
.closedeyeleft,
.closedeyeright {
  background: transparent none repeat scroll 0 0;
  border-color: #000;
  border-radius: 5px;
  border-style: solid;
  border-width: 4px 4px 0;
  height: 4px;
  top: 35px;
  width: 12px;
}
.closedeyeleft {
  left: 3px;
}
.closedeyeright {
  right: 3px;
}

Answer 1

感谢一个结构良好的问题，并提供了大量详细信息！

这是一种提供快速闪烁以及随机第二次闪烁的潜在解决方案。

//made blink a named function to improve readability a bit
var blink = function(isSecondBlink) {
  //got rid of the ternary expressions since we're always doing
  //open eyes -> close eyes -> delay -> open eyes

  //close both eyes
  eyeleft.className = "closedeyeleft";
  eyeright.className = "closedeyeright";

  //let's reopen those eyes after a brief delay to make a nice blink animation
  //as it happens, humans take ~250ms to blink, so let's use a number close to there
  setTimeout(function() {
      eyeleft.className = "eyeleft";
      eyeright.className = "eyeright";
  }, 200);

  if (isSecondBlink) { return; } //prevents us from blinking 3+ times

  //This provides a 40% chance of blinking twice, adjust as needed
  var blinkAgain = Math.random() <= 0.4;

  //if we need to blink again, go ahead and do it in 300ms
  if (blinkAgain) {
    setTimeout(function() { blink(true); }, 300);
  }
}

//go ahead and blink every 2 seconds
window.onload = setInterval(blink, 2000);

Answer 2

有很多方法可以做到这一点，这是我的 - 只需在你的间隔中添加一个超时，以便间隔进行完整的闪烁动作。

Demo

var blink = function(){
  //close your eyes little bunny
  eyeleft.className = (eyeleft.className != 'closedeyeleft' ? 'closedeyeleft' : 'eyeleft');
  eyeright.className = (eyeright.className != 'closedeyeright' ? 'closedeyeright' : 'eyeright');
  setTimeout(function(){
    //open them again
    eyeleft.className = (eyeleft.className != 'closedeyeleft' ? 'closedeyeleft' : 'eyeleft');
    eyeright.className = (eyeright.className != 'closedeyeright' ? 'closedeyeright' : 'eyeright');
  }, 100);
};

setInterval(blink, 2000);

Answer 3

这是jsfiddle 我就是这样做的，所以它会非常随机，但看起来还不错

https://jsfiddle.net/y390jcx8/3/

...
gotoxy(10, 19);
textcolor(LIGHTCYAN);
textbackground(MAGENTA);
cprintf(" A "); printf(" ");
cprintf(" F "); printf(" ");
cprintf(" G "); printf(" ");
cprintf(" K "); printf(" ");
cprintf(" Z "); printf(" ");
cprintf(" E "); printf(" ");
cprintf(" I "); printf(" ");
...

所以随机调用关闭，再次打开100后

JavaScript眨眼动画

3 个答案: