Javascript：为什么我的javascript不能同时运行这两个动画？

Question

我正在为我的项目制作视频游戏，并遇到动画问题。基本上，我正在做一个最终幻想风格的游戏，你的ATB酒吧充电一旦完成，你可以做一个技巧。所以我在这里有3个功能。第一个是清除我的ATB栏，以便重置。此代码有效。第二个是通过移动一个DIV块来补充时间条。这也适用。第三个功能是我的攻击技能函数，除了它没有按照我放置它们的顺序执行这两个动画函数外，它也可以工作。

如果你看下面，你会注意到我有代码先运行清晰的ATB函数，然后运行时间条函数，希望每次点击按钮它都会重置我的ATB。问题是，它完全忽略了FIRST函数并运行第二个函数。我试着切换它们，发生同样的事情。所以基本上我坚持我的代码总是会忽略第一个，如果我的两个动画函数都在代码中，则操作第二个。所以现在我对如何解决这个问题感到困惑，因为我希望这两个代码能够工作。他们现在单独和独立地工作，但是当我结合他们时，只有第二个人登记。

// 5. ATB TIMEBAR FUNCTION 

function clearTimeBar (el, color) { //Clears the bar 
    var elem = document.getElementById(el); 
    elem.style.transition = "width 0.0s, ease-in 0s"; 
    elem.style.background = color; 
    elem.style.width = "0px" 
} 
function timeBar (el, color) { // Runs the animation 
    var elem = document.getElementById(el); 
    elem.style.transition = "width 6.0s, ease-in 0s"; 
    elem.style.background = color; 
    elem.style.width = "289px"; 
    } 

// ATTACK SKILL 
document.getElementById("attack").addEventListener('click', function(){ 
    clearTimeBar('overlay','white'); // Clear the ATB bar 
    timeBar('overlay', 'blue'); // Run the ATB bar 
    var criticalRoll = Math.floor(Math.random() * 100 + 1); 
    var precisionRoll = Math.floor(Math.random() * cs.precision + 1); 
    var npcParryRoll = Math.floor(Math.random() * dragonstats.parry + 1); 
    var damage = Math.floor(Math.random() * cs.strength + 1); 
     if (precisionRoll < npcParryRoll) { 
      addMessage("The Dragon evaded your attack!"); 
      return; 
     } 
     if (cs.critical >= criticalRoll) { 
      damage *= 2; 
      damage -= dragonstats.armor; 
      dragon.hp -= damage; 
      document.getElementById("npchp").innerHTML = dragon.hp; 
      addMessage("Critical Strike! Dragon suffers " + damage + " hp!") 
      } 
     else if (damage - dragonstats.armor <= 0) { 
      addMessage("Your opponents armor withstood your attack!"); 
      } 
    else { 
    damage -= dragonstats.armor; 
    dragon.hp -= damage; 
    document.getElementById("npchp").innerHTML = dragon.hp; 
    addMessage("You hit the dragon for " + damage + " hp!"); 
    } 
}); 

Answer 1

在clearTimeBar完成后运行您的timeBar函数。

window.setTimeout(function() { timeBar('overlay', 'blue') }, 1000/60); 

或

window.requestAnimationFrame(function() { timeBar('overlay', 'blue') });