JavaScript yanıp sönen göz animasyonu

Question

Şu anda JavaScript'i kullanmayı ve bir sürü şeyi denemeyi denemeye çalışıyorum ancak şimdilik şimdilik JS'm gayet sınırlı. Rastgele görünen ve kullanıcılara mümkün olduğunca hızlı bir şekilde tıklamak zorunda olan tavşan kafalı bir kutunun bulunduğu küçük bir oyun yarattım.

Bu yüzden tavşanı, her 2 saniyede bir tavşanın kapattığı ve gözlerini açtığı bir aralık animasyonuyla yarattım. Şimdi aptal hissediyorum ama istediğim gibi çalışmayı başaramam. Şimdi tavşan her 2 saniyede bir gözlerini kapatıyor ve sonra her 2 saniyede bir tekrar açıyor. Ancak, sadece göz kırpmasını istiyorum, yani gözlerin hemen bir an için kapatılması ve tekrar açılmasının yani her 2 saniyede bir göz kırpması. Ve sonra da bazen sadece bir kez rastgele yanıp sönmesini ve bazen iki kez yanıp sönmesini istiyorum. Bunun kolay olup olmadığından emin değilim ve saatlerce kodlamadan ve yeni şeyler öğrenmekten sadece körüm, ama burada yardımınıza ihtiyacım var gibi görünüyor. Her şeyin şu anda olduğu gibi

Here is a fiddle.

Kemanın içinde kullanılan kodun tamamını görebilirsiniz. Buradaki bütün siteyi kod bölümünde yayınlamak istemedim, ama inandığım kısımlar benim canlandırmamın ilgisini çekiyor.

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); 

Sonraki 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> 

Ve şimdi CSS bunu yapmanın pek çok yolu vardır

.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

teşekkürler!

Hem hızlı yanıp sönme hem de rastgele ikinci yanıp sönmeyi sağlamak için olası bir çözüm. İşte

//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

: Burada

yanıp gözler için js kodu ve benimki - aralığınızda tam bir yanıp sönme eylemi yapabilmeniz için aralığınıza bir zaman aşımı ekleyin. detaylar bol iyi biçimlenmiş soru için

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

Bu i gerçekten rastgele olabilir ama yine de 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) 

    } 

Yani rastgele çağrı yakın görünmesi için bunu, ve 100 sonra bunları açacak nasıl jsfiddle olduğunu tekrar