JavaScript的眼睛闪烁动画

Question

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

因此，我创建了兔子与间隔动画，其中兔子关闭，每隔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 这是我应该怎样做，所以这将是真正随机的，但看起来还是OK

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

window.onload= startFunc(); 

function startFunc(){ 
    var timer = Math.round(Math.random() * 2000) 
    setInterval(function(){ 
    timer = Math.round(Math.random() * 2000) 


    setTimeout(function(){ 
     console.log(timer) 
       eyeleft.className = (eyeleft.className != 'closedeyeleft' ? 'closedeyeleft' : 'eyeleft'); 
       eyeright.className = (eyeright.className != 'closedeyeright' ? 'closedeyeright' : 'eyeright'); 
      setTimeout(function(){ 
      eyeleft.className = (eyeleft.className != 'closedeyeleft' ? 'closedeyeleft' : 'eyeleft'); 
      eyeright.className = (eyeright.className != 'closedeyeright' ? 'closedeyeright' : 'eyeright'); 
      }, 100); 

    },timer) 

    },1000) 

    } 

那么随意调用Close，和100后，打开它们再次