《每週一點canvas動畫》——角度反彈

每週一點canvas動畫代碼文件

在上一節咱們介紹了高級的座標旋轉方法，咱們只須要知道物體的位置，經過設定每一幀須要旋轉的角速度,經過公式

newX = x*cos - y*sin;
newY = y*cos + x*sin;

就能夠計算出作圓周運動時物體的下一個座標位置。本節的內容與上一節的內容息息相關。因此，務必把上一節的內容弄懂了，再來看這一節你就不會那麼吃力了。這也應該是本系列最難的一部分吧！請收下個人膝蓋。。。

在前面的章節中咱們寫了不少的小動畫，大部分的動畫中，爲了限制物體的活動範圍，當物體與canvas畫布邊界接觸的時候，咱們都設定了一個反彈係數bounce，讓物體有種撞上牆壁的感受。可是現實環境中不單單隻有水平或豎直方向的平面，更多的是不一樣傾斜度的表面。那麼，當物體撞擊上這樣的表面咱們該如何處理呢？物體反彈後的速度大小，還有方向該如何計算呢？下面咱們就來一一討論這些問題。

1.概念解析

若是，你對前面的文字描述不理解，不要緊。看下圖，我會經過圖形來形象的描述。好比，如今咱們有個斜平面，物體以必定的速度朝着斜面運動。

沒有現成的公式能夠直接讓物體按照咱們想象的從斜面反彈。這彷佛是個很複雜的問題，那你有沒有想過，既然斜面很差作，何不把它轉到平面來作呢！咱們最擅長的就是平面的反彈了。

思路有了，咱們須要把它轉化成平面來作角度反彈。那咱們須要作哪些事情呢？不賣關子了，我們所要作的全部事情就是把整個系統包括物體，包括平面所有旋轉的平面，作完反彈處理後，再旋轉回去。這就意味着，咱們須要旋轉斜面，旋轉物體的座標，而且還要旋轉物體的速度。

這裏我隨便設置了一箇中心點（圖中虛線與實線相交的部分），讓其圍繞這個中心點旋轉至平面。此時速度也作了相應的旋轉，圖中清晰的顯示出了速度的方向。接下來，你應該就很熟悉了，既然到了水平面作反彈就很容易。反彈後的速度方向以下圖：

下一步，就是把整個系統旋轉回去，也就是還原整個系統到初始位置

若是你對它的真實性表示懷疑，這裏咱們它旋轉前與旋轉恢復後的兩幅圖作個疊加

是否是跟你想象的徹底同樣呢？

2.代碼實現

首先咱們，新建一個類文件line.js，它的做用和其餘的類文件同樣，就是畫一條線。這裏我就不列出來了，你能夠去代碼文件中找到這個文件的代碼。先上效果圖

具體代碼以下，首先引入類文件

<canvas id="canvas" width="500" height="500" style="background: #fff;"></canvas>
   <script src="../js/utils.js"></script>
   <script src="../js/ball.js"></script>
   <script src="../js/Line.js"></script>

而後是初始化咱們須要的元素

<script>
       window.onload = function(){
           var canvas = document.getElementById('canvas'),
               context = canvas.getContext('2d'),
               ball = new Ball(20, "red"),
               line = new Line(0, 0, 300, 0),
               gravity = 0.2,                         //重力加速度
               bounce = -0.6,                         //反彈係數
               angleN = 10;                           //斜面的旋轉角度
           
           ball.x = 100;
           ball.y = 100;
           
           line.x = 50;
           line.y = 300;
           line.rotation = angleN * Math.PI / 180;    //角度旋轉
           
           //獲得系統從斜面轉到平面的cos和sin值(就是咱們座標旋轉中的sin,cos值)
           var cos = Math.cos(line.rotation),         
               sin = Math.sin(line.rotation);
               
           //動畫循環
           }
    </script>

小球的引入我就不解釋了，Line有4個參數（x1,y1,x2,y2）,表示從(x1，y1)位置開始，至（x2,y2）位置畫一條線。在代碼中是從(0,0)到(300,0)，也就是畫了一條長度爲300的水平直線。而後，把它移動到(50, 300)的位置，並讓其傾斜了一個角度。這樣你就看到咱們圖中的斜線了。

下一步，就是咱們的核心了

(function drawFrame(){
               window.requestAnimationFrame(drawFrame, canvas);
               context.clearRect(0, 0, canvas.width, canvas.height);
               
               //球體運動
               ball.vy += gravity;            
               ball.x += ball.vx;                //初始爲0，小球豎直往下落
               ball.y += ball.vy;
               
               //獲取小球體與線的相對位置
               var x1 = ball.x - line.x,
                   y1 = ball.y - line.y,
                   
                   //旋轉座標
                   x2 = x1 * cos + y1 * sin,
                   y2 = y1 * cos - x1 * sin,
                   
                   //旋轉速度
                   vx1 = ball.vx * cos + ball.vy * sin,
                   vy1 = ball.vy * cos - ball.vx * sin;
            
               
               //若是小球與斜面碰撞
               if(y2 > -ball.radius){
                   y2 = -ball.radius;              //重設小球的位置
                   vy1 *= bounce;                  //反彈
               }
               //
               x1 = x2 * cos - y2 * sin;           //位置旋轉回去，注意公式變化
               y1 = y2 * cos + x2 * sin;
               ball.vx = vx1 * cos - vy1 * sin;    //速度旋轉回去
               ball.vy = vy1 * cos + vx1 * sin;
               ball.x = line.x + x1;               //小球位置變化
               ball.y = line.y + y1;
               
               ball.draw(context);
               line.draw(context);
               
}())

注意代碼中，旋轉回去的座標旋轉公式公式發生了變化。

3.代碼優化

注意上部分代碼中，咱們發生座標旋轉是在下面的條件下：

if(y2 > -ball.radius){
       //...
  }

那上面的代碼就有很大的問題了，咱們在每一幀都作了座標旋轉，再旋轉回去。其實徹底沒有必要，因此代碼修改以下：

...
    var x1 = ball.x - line.x,
        y1 = ball.y - line.y,
        y2 = y1*cos - x1*sin;
        
   
    if(y2 > -ball.radius){                       //只有當小球與平面接觸時才作旋轉
           var x2 = x1*cos + y1*sin;             //旋轉 x 座標
                      
           vx1 = ball.vx*cos + ball.vy*sin;      //旋轉速度
           vy1 = ball.vy*cos - ball.vx*sin;
                      
            y2 = -ball.radius;
            vy1 *= bounce;
                      
           //全部東西旋轉回去
           x1 = x2*cos - y2*sin;
           y1 = y2*cos + x2*sin;
           ball.vx = vx1*cos - vy1*sin;
           ball.vy = vy1*cos + vx1*sin;
           ball.x = line.x + x1;
           ball.y = line.y + y1;
}

4.邊界問題

注意到在上面的效果中，當小球超出了斜面依然保持運動。而不是咱們想象的掉落到地面上。爲了修正這個問題，咱們須要用到前面章節介紹的兩個物體之間的邊界檢測方法，你應該很熟悉。

//動畫循環中
var bounds = line.getBounds(),
if( ball.x + ball.radius > bounds.x && ball.x - ball.radius < bounds.x + bounds.width){
    if(y2 > -ball.radius){
       //....
    }
}

效果以下：

5.更多動效

1.用鼠標控制斜面的角度

2.多斜面撞擊

6.總結

本章的重點公式就是一個座標旋轉

newX = x*cos - y*sin;
newY = y*cos + x*sin;

//旋轉回去
newX = x*cos + y*sin;
newY = y*cos - x*sin;