Javascript：如何創建一個CSS3動畫

我目前正在嘗試弄清楚如何爲我正在做的RTS實時戰鬥創建戰鬥系統欄。該欄會隨着CSS3動畫移動6秒，然後變綠，讓您採取行動。但我需要的是，只有當時間欄已滿時纔會觸發技能。Javascript：如何創建一個CSS3動畫

任何幫助？

// 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!"); 
    } 
});

來源

2013-10-04 Shawn

我張貼的答案，但它不使用CSS3。 – 2013-10-04 23:18:37

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

來源

2013-10-04 23:12:32

這是一個動畫酒吧CSS3的例子：

.outerBar{ 
    width:120px; 
    height:40px; 
    background:black; 
} 

.innerBar{ 
    width:0px; 
    height:40px; 
    -webkit-animation: grow 6s; 
} 

@-webkit-keyframes grow{ 
0%{width:0px; background:black;} 
16.6%{width:20px; background:green;} 
33.2%{width:40px; background:green;} 
49.8%{width:60px; background:green;} 
66.4%{width:80px; background:green;} 
83%{width:100px; background:green;} 
100%{width:120px; background:green;} 
}

http://jsfiddle.net/msfx9/

來源

2013-10-05 00:24:39 Conqueror

Javascript：如何創建一個CSS3動畫

回答

相關問題