javascript，HTML5模拟视频游戏HUD效果

javascript, html5 simulate video game HUD effect

本文关键字：HUD 效果 游戏 模拟视频 HTML5 javascript      更新时间：2023-09-26

我正在尝试在HTML5中模拟视频游戏HUD。我有一个带有 CSS 样式的div，使其看起来像游戏叠加层，当单击导航链接时，我需要div 从显示：none 状态，然后非常快速地闪烁两次，然后淡入。

此外，当单击div 中的关闭按钮时，应该会发生同样的情况，只是末尾的淡入淡出从 100% 反转为 0%。

我必须对其他导航链接和不同的div 做同样的事情。如果我能让一个人工作，我也应该能够让其他人工作。

所以div的透明度是这样的：

被点击前的关闭状态 0%
点击
时打开 100%关闭 0%
在 100%
关闭 0%
然后
淡入淡出超过 1.5 秒 0% 至 100%

导航链接： 

<li><a href="#target" id="about">About</a></li>

分：

    <div id="overlay">
<a href="#" class="btn" id="close">X</a>
    <h3>Overlay</h3>
    Fusce commodo congue ante, quis venenatis nibh blandit ut. Aenean felis est, dictum eget venenatis ac,vestibulum vel urna. Quisque felis metus, vehicula et semper quis, fermentum a dolor.  
    </div>

我试过这个，但没有产生预期的效果。

  $("#target").click(function() {
    //alert("Handler for .click() called.");
    // set interval
     var timeCount=0;
    setInterval(function() {

        if(timeCount == 1){
        //alert("timeCount"+ timeCount);
          $('#overlay').toggle();
        }
        if(timeCount == 2){
        //alert("timeCount"+ timeCount);
          $('#overlay').toggle();
        }
        if(timeCount == 3){
        //alert("timeCount"+ timeCount);
          $("#overlay").fadeIn("slow");
        }
        if(timeCount == 4){
          //abortTimer();
        }
        timeCount++;
      }, 50);
      });

对于 setInterval 速度，低于 50 的任何值都太快，无法呈现开/关切换。我只是看到淡入。

任何超过 60 的东西都太慢了。

当前间隔仅闪烁一次显示，因为您将其打开，然后再次关闭一次。你应该有这样的东西：

if( timeCount < 4) $("#overlay").toggle();
else {
    $("#overlay").fadeIn("slow");
    clearInterval(timer);
}

此外，即使有两次闪光，闪光灯也只能持续20秒。显示器刷新率为每秒 60 次，因此即使浏览器是实时的，它也只会显示三帧。我不了解你，但对我来说，这似乎真的很快。我会让它显示大约 10 帧（间隔为 100），隐藏 10 帧，再次显示，再次隐藏，然后淡入淡出。这将使闪烁持续大约半秒钟，这仍然很快，但至少是可见的。你目前的做法，就像你试图引起癫痫发作......

相关文章：