JavaScriptを点滅させる目のアニメーション

Question

私は現在、JavaScriptを学び、たくさん試してみようとしていますが、今のところ私のJSのスキルはまだ非常に限られています。 私はランダムに表示されるウサギの頭のあるボックスがあり、ユーザーはできるだけ早くそれらをクリックしなければならない小さなゲームを作成しました。

私はバニーが2秒ごとに目を閉じて開き、間隔のアニメーションでバニーを作りました。 今、私は馬鹿だと感じていますが、アニメーションを私が望むように動かすことはできません。今、バニーは2秒ごとに目を閉じて、2秒ごとに再び開きます。しかし、私は目が瞬間に閉じて再び開いて、バニーが2秒ごとに点滅するように、点滅させるだけです。 そして、ランダムに時折1回だけ点滅し、時には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

ありがとう！

ここでは、すばやい点滅とランダムな2回目の点滅の両方を提供するための潜在的な解決策があります。ここで

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

これはそれが本当にランダムではなく、まだ

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) 

    } 

だから、ランダムコール近いOKに見える、と100の後にそれらを開きますので、私はそれを行うだろうかある jsfiddleですもう一度