SuperBall开发总结(六)-UI动画设计

有了前几节(点击左上角列表按钮)的游戏制作铺垫，我们可以按照自己的想法添加一些元素，比如我自己添加了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
        );
    }

1. 设置动画时间countdown_start_num

2. 获取#skills_list #score_board

3. 设置ui_animation_interval,这里的clearInterval()函数是用来终止死循环的，其参数是要终止循环的名字或ID。

4. 其实这和之前的canvas绘图类似

   1. render() => content_leftBoard.setAttribute(...);

   2. checkHit() => if(countdown_start_num < 0){}else{}

   3. update() => countdown_start_num--;