摘要：每周一點(diǎn)動(dòng)畫代碼文件在上一節(jié)每周一點(diǎn)動(dòng)畫物理效果中，我們介紹了維環(huán)境下的速度與加速度效果。與二維系統(tǒng)中的效果如出一轍。二叉樹二叉樹的類文件名為。與簡(jiǎn)單樹的原理不一樣，二叉樹的原理是采用遞歸的方法實(shí)現(xiàn)樹枝與樹干的繪制。

每周一點(diǎn)canvas動(dòng)畫代碼文件

在上一節(jié)《每周一點(diǎn)canvas動(dòng)畫》——3D物理效果中，我們介紹了3維環(huán)境下的速度與加速度效果。這一節(jié)，我們繼續(xù)介紹另外兩個(gè)物理效果：重力和屏幕環(huán)繞。

三維系統(tǒng)中實(shí)現(xiàn)重力效果的方式與二維的情況一樣，設(shè)定一個(gè)重力值，比如g=0.2。然后，在動(dòng)畫循環(huán)中將它作用于物體豎直方向的速度上。雖然原理上沒有什么大的變化，但是多了一個(gè)維度實(shí)現(xiàn)出來的效果確實(shí)相當(dāng)具有視覺沖擊力的。ok，一圖勝千言，與其在這聽我嘚吧嘚吧嘚，還不如直接上個(gè)效果圖。

在動(dòng)畫中，我們?yōu)樾∏虻南侣湓O(shè)置了一個(gè)邊界——相當(dāng)于地面，并與反彈的效果結(jié)合在一起，當(dāng)小球觸碰到地面發(fā)生反彈。與二維系統(tǒng)中的效果如出一轍。下面是核心代碼，具體代碼請(qǐng)看gravity.html：

    。。。
    function move(ball){
        ball.vy += gravity;   //重力加速度
        
        ball.xpos += ball.vx;
        ball.ypos += ball.vy;
        ball.zpos += ball.vz;
               
         if (ball.ypos > floor) {  //觸地反彈
               ball.ypos = floor;
               ball.vy *= bounce;
             }
         if(ball.zpos > -fl){   //3維場(chǎng)景設(shè)置
            var scale = fl/(fl + ball.zpos);
            ball.scaleX = ball.scaleY = scale;
            ball.x = vpX + ball.xpos * scale;
            ball.y = vpY + ball.ypos * scale;
            ball.visible = true;
         }else{
             ball.visible = false;
         }
 }
 。。。

屏幕環(huán)繞是我們今天的重頭戲，與二維環(huán)境中的概念一樣。所謂屏幕環(huán)繞就是從屏幕的這端消失，相應(yīng)的從屏幕的另一邊出來。對(duì)應(yīng)到三維的環(huán)境中，我們就多了一個(gè)緯度的選擇。下面我們介紹第一個(gè)效果——森林

繪制森林前我們要做的第一個(gè)準(zhǔn)備工作是繪制森林的基本組成單元——tree。在這里我提供了3個(gè)樹的類文件。

tree.js ——簡(jiǎn)單樹

binaryTree.js ——二叉樹

natureTree.js ——自然樹

與球類文件的引入和使用方式一樣,下面我們展示一下三種文件的繪制效果。

1.簡(jiǎn)單樹

簡(jiǎn)單樹的繪制效果如圖所示，如果你想要讓它的枝條更多，再多加兩條樹枝就可以了。類文件tree.js,沒有什么特別的，只是用到簡(jiǎn)單的lineTo,moveTo 等API。

2.二叉樹

二叉樹的類文件名為binaryTree.js。與簡(jiǎn)單樹的原理不一樣，二叉樹的原理是采用遞歸的方法實(shí)現(xiàn)樹枝與樹干的繪制。繪制效果如圖：

具體代碼如下：

/* gen: 樹枝的節(jié)點(diǎn)代數(shù)，默認(rèn)是6個(gè)節(jié)點(diǎn)*/
/* angle: 每次在節(jié)點(diǎn)樹枝的旋轉(zhuǎn)角度*/
/* branchLength: 樹枝的長(zhǎng)度*/

function Tree(color, angle, genNum, branchLength){
    this.x = 0;
    this.y = 0;
    this.xpos = 0;
    this.ypos = 0;
    this.zpos = 0
    this.scaleX = 0.85;
    this.scaleY = 0.85;
    this.gen = 0;
    this.alpha = 1;
    this.color = utils.parseColor(color);
    this.angle = (angle === undefined) ? 0.3 : angle;
    this.genNum = (genNum === undefined) ? 6 : genNum;
    this.branchLength = (branchLength === undefined) ? 40 : branchLength;
    
}

Tree.prototype.draw = function(ctx){
    ctx.save()
    ctx.translate(this.x, this.y);
    this.branch(ctx, 0);           //初始角度為0， 繪制樹干
    ctx.restore();
}

Tree.prototype.branch= function(ctx, initAngle){
    this.gen++;
    ctx.save();
    ctx.strokeStyle = this.color;
    ctx.rotate(initAngle);
    ctx.scale(this.scaleX, this.scaleY);

    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.translate(0, -this.branchLength);
    ctx.lineTo(0, 0);
    ctx.stroke();

    if(this.gen <= this.genNum){       //判斷當(dāng)前的節(jié)點(diǎn)代數(shù)是否大于設(shè)置的節(jié)點(diǎn)數(shù)
        this.branch(ctx, this.angle);   //畫右邊樹枝
        this.branch(ctx, -this.angle);  //畫左側(cè)樹枝
    }
    ctx.restore();

    this.gen--;
}

二叉樹的造型已經(jīng)與我們現(xiàn)實(shí)中的樹木結(jié)構(gòu)有相似之處了。下一步我們就通過這種繪制二叉樹的方法來實(shí)現(xiàn)自然樹。

3.自然樹

自然樹的原理與二叉樹的原理完全一樣，不同之處在于對(duì)樹枝的分叉設(shè)置了更多的隨機(jī)性。也就是說，不會(huì)像我們上面看到的一樣，樹枝的分叉那么有對(duì)稱性。并且，在樹枝的末端繪制樹葉。ok,下面展示一下用canvas繪制的藝術(shù)品。

怎么樣，帥氣吧！是不是跟真的樹一模一樣。代碼有點(diǎn)長(zhǎng)，我在這就不列出來了，具體代碼請(qǐng)查看binaryTree.js。如果你想體驗(yàn)不同的繪制效果請(qǐng)查看natureTree.html。在這個(gè)文件中，你可以對(duì)一些主要的參數(shù)進(jìn)行控制來實(shí)現(xiàn)不同的繪制效果。

無限森林的效果，就是使用屏幕環(huán)繞的原理。當(dāng)物體的z軸坐標(biāo)超過設(shè)定的位置就回到初始位置。下面我們看看效果圖。為了讓動(dòng)畫的效果更流暢，我們采用第一種簡(jiǎn)單樹來做，請(qǐng)各位看官原諒我的渣電腦實(shí)在是太老舊了。

如果你的電腦配置不錯(cuò)，可以換成其他兩種樹試試。效果一定更好哦！核心代碼如下：

...
function move (tree) {
        tree.xpos += vx;
        tree.ypos += vy;
        tree.zpos += vz;
          
        if(tree.ypos < floor){  //讓樹的Y軸坐標(biāo)落在設(shè)置好的地面上
            tree.ypos = floor;
        }
        
        if (tree.zpos < -fl) {  //如果z坐標(biāo)超出了屏幕回到一個(gè)老遠(yuǎn)的位置
          tree.zpos += 10000;
        }
        if (tree.zpos > 10000 - fl) {  //如果z軸的坐標(biāo)超過了我們?cè)O(shè)置的距離，
                                         讓它回到一個(gè)近的位置
          tree.zpos -= 10000;
        }
                                        //3維環(huán)境設(shè)置
        var scale = fl / (fl + tree.zpos);
        tree.scaleX = tree.scaleY = scale;
        tree.x = vpX + tree.xpos * scale;
        tree.y = vpY + tree.ypos * scale;
        tree.alpha = scale;
      }
...

森林的運(yùn)動(dòng)通過鍵盤的方向鍵來控制。具體代碼請(qǐng)查看tree-2.html。

星海使用的還是我們的球類文件，不同之處在于球體的著色上使用的是canvas的放射漸變來形成光暈效果。具體代碼請(qǐng)看ball3d-s.js

...
var gradient = context.createRadialGradient(0, 0, 0, 0, 0, this.radius );
    gradient.addColorStop(0,"rgba(255,255,255,1)");
    gradient.addColorStop(0.2,"rgba(0,255,255,1)");
    gradient.addColorStop(0.3,"rgba(0,0,100,1)");
    gradient.addColorStop(1,"rgba(0,0,0,0.1)");
    context.fillStyle = gradient;
...

效果圖如下：

默認(rèn)情況下，小球是有一個(gè)豎直向上的速度，通過方向鍵來控制作用于球體上的加速度，以此來達(dá)到物體運(yùn)動(dòng)的效果。代碼基本上沒有變化，在這我就不列舉了。詳細(xì)代碼請(qǐng)查看star.html

本節(jié)的內(nèi)容到這就結(jié)束了，下一節(jié)，我們介紹3維環(huán)境下的旋轉(zhuǎn)與碰撞。