有了前幾節(jié)(點擊左上角列表按鈕)的游戲制作鋪墊，我們可以按照自己的想法添加一些元素，比如我自己添加了BOSS的動作帚戳，BOSS的武器等。
除了在canvas中繪制一些動畫效果儡首，我們還可以對DOM進行一些操作片任，思路是一樣的。
接下來我想介紹一下一個UI的動畫效果蔬胯。
完成后的效果
UI.png
運行效果：SuperBall_04-Add_UI_Animation
添加UI
這里我們添加了一個最外面的容器#content对供，將要顯示的UI#skills_list #score_board加入進去。
<div id="content">
<canvas id="super_ball_canvas" width="300" height="300"
style="
border-top:3px grey solid;
border-bottom:1px black solid;
border-radius: 10px;
display: block;
position: relative;
margin: 10px auto"></canvas>
<div id="skills_list"></div>
<div id="score_board"></div>
</div>
添加一些CSS樣式
#content{
...
}
/*left board*/
#skills_list{
...
}
/*right board*/
#score_board{
...
}
添加setUIAnimation()
function setUIAnimation(){
var countdown_start_num = 355;
var content_left_board = document.getElementById("skills_list");
var content_right_board = document.getElementById("score_board");
var ui_animation_interval = setInterval(
function(){
if(countdown_start_num >= 0){
content_left_board.setAttribute("style", "left:" + (-1 * (35.5 - countdown_start_num/10)).toString() + "%");
content_right_board.setAttribute("style", "left:" + (100 - countdown_start_num/10).toString() + "%");
countdown_start_num--;
}else{
clearInterval(ui_animation_interval);
}
},
frequency/2
);
}
設置動畫時間
countdown_start_num獲取
#skills_list #score_board設置
ui_animation_interval,這里的clearInterval()函數(shù)是用來終止死循環(huán)的氛濒，其參數(shù)是要終止循環(huán)的名字或ID产场。-
其實這和之前的canvas繪圖類似
render()=>content_leftBoard.setAttribute(...);checkHit()=>if(countdown_start_num < 0){}else{}update()=>countdown_start_num--;
