जावास्क्रिप्ट ब्लिंकिंग आंख एनीमेशन

Question

मैं वर्तमान में जावास्क्रिप्ट सीखने और बहुत सी चीजों को आजमाने की कोशिश कर रहा हूं, लेकिन अभी तक, मेरे जेएस स्किली अभी भी बहुत सीमित हैं। मैंने एक छोटा सा गेम बनाया जहां बनी हेड के साथ एक बॉक्स है जो यादृच्छिक रूप से दिखाई देता है और उपयोगकर्ता को जितनी जल्दी हो सके उन्हें क्लिक करना पड़ता है।

इसलिए मैंने एक अंतराल एनीमेशन के साथ खरगोश बनाए जहां बनी बंद हो जाती है और हर 2 सेकंड में अपनी आंखें खोलती है। अब मुझे बेवकूफ़ लगता है, लेकिन मैं एनीमेशन को काम करने के लिए प्रबंधित नहीं कर सकता क्योंकि मैं इसे चाहता हूं। अब बनी सिर्फ 2 सेकंड में अपनी आंखें बंद कर रही है और फिर उन्हें हर 2 सेकंड में फिर से खोल रही है। हालांकि, मैं इसे केवल झपकी देना चाहता हूं, जिसका अर्थ है कि आंखों को तुरंत एक पल के लिए बंद किया जाना चाहिए और फिर फिर से खोला जाना चाहिए, ताकि बनी हर 2 सेकंड में झपकी दे। और फिर मैं इसे यादृच्छिक रूप से कभी-कभी कभी-कभी झपकी देता हूं और कभी-कभी दो बार झपकी देता हूं। यह सुनिश्चित नहीं है कि यह हेला आसान है और मैं कोडिंग सामग्री के घंटों से न केवल अंधेरा हूं और नई चीजें सीख रहा हूं, लेकिन ऐसा लगता है कि मुझे आपकी मदद की आवश्यकता हो सकती है।

Here is a fiddle पूरी चीज़ के रूप में अभी यह ठीक है।

आप पहेली के अंदर उपयोग किए गए पूरे कोड को देख सकते हैं। मैं कोड अनुभाग में पूरी वेबसाइट यहां पोस्ट नहीं करना चाहता था, लेकिन जिन हिस्सों का मेरा मानना ​​है वे मेरी एनीमेशन के लिए रूचि रखते हैं।

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

अगला एचटीएमएल

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

और अब सीएसएस

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

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) 

    } 

तो यादृच्छिक कॉल करीब देखो, और 100 के बाद उन्हें खोलने है दोबारा