Javascript:如何创建 CSS3 动画

Question

我目前正在尝试弄清楚如何为我正在做的 RTS 实时战斗创建战斗系统栏。该栏将随着 CSS3 动画移动 6 秒，然后变成绿色，允许您执行操作。但我需要它的方式是技能只有在时间条满时才会触发。

有什么帮助吗？

// ATB DIV bar for the CSS3 animation
<div id="atbbar"> </div>


// ATTACK SKILL
document.getElementById("attack").addEventListener('click', function(){
    var damage = Math.floor(Math.random() * characterstats.strength + 1);
    damage -= dragonstats.armor;
    dragon.hp -= damage;
    if (damage <= 0) {
        addMessage("Armor negated your attack!");
        }
    else {  
    document.getElementById("npchp").innerHTML = dragon.hp;
    addMessage("You hit the dragon for " + damage + " hp!");
    }
});

Answer 1

http://jsbin.com/oXuzASA/2/edit

<div class='bar'>
  </div>
  <div class='bar_overlay'>
  </div>

原理很简单。叠加层将位于条的顶部并设置为零。它会按比例增加量，以便您可以根据需要设计其样式。

.bar {
  background-color: #000;
  display: block;
  width: 100px;
  height: 20px;
}

.bar_overlay {
  background-color: green;
  margin-top: -20px;
  width: 100px;
  height: 20px;
  display: block;
}

我们做了一个简单的方程。

currentSeconds / maxSeconds = currentWidth / maxWidth
x / 6 = y / 100

叉乘:

currentWidth = (100 / 6) * x

这就是我们更新栏宽度的内容。

编辑

我添加了一个按钮来演示如何将其集成到游戏中。

<input type='button' id='attack' value='Attack!' />

$("#attack").click(function() {
    $("#attack").attr("disabled", "disabled");

    var timer;
    timer = setInterval(function() {
    seconds++;
  $('.bar_overlay').css('width', (100/6) * seconds);

      if (seconds == 6)
      {
        clearInterval(timer);
seconds = 0;
        $("#attack").removeAttr("disabled");
      }
  }, 500);
  });