JavaScript 眨眼动画

Posted 2023-03-06

【中文标题】JavaScript 眨眼动画

【英文标题】：JavaScript blinking eye animation

【发布时间】：2017-02-05 05:13:59

【问题描述】：

我目前正在尝试学习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;

【参考方案1】：

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

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

【参考方案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);

【讨论】：

我喜欢随机的第二次眨眼 :) 如果有人也想检查，这里是一个小提琴jsfiddle.net/y390jcx8/4

哎呀哈哈我忘了把我的模组贴到小提琴上。谢谢mx！

非常感谢您的快速帮助。这个版本效果最好。

【参考方案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)

    

所以随机调用 close ，然后在 100 之后再次打开它们