HTML5 球體碰狀動畫

我們進行專案開發過程需要用到的HTML5技術,除了工作室自己的出版品,W3C 規格與各式線上文件之外,坊間圖書亦是參考的對象之一,此篇文章即是閱讀《精通 HTML5 Canvas》這本書時讀到的,我們將其述說的原理整理了一下,並作個比較簡單的範例分享,如果想對 Canvas 有更進一步的認識,也推薦 《精通 HTML5 Canvas》這本好書。

透過 Canvas 的支援,你可以很輕易的實作物件碰撞的動畫效果。當一個物件在畫面上移動,碰撞邊界時會反彈回來,而在不考慮如空氣、物體接觸等摩擦影響的情形下,球會以入射角等於反射角的公式進行運動。

根據以上的原理,我們可以透過三角函數模擬物件的碰撞運動。現在配置一個 <canvas> 標籤,將其 width 與 height 設為 600 ,並且撰寫方法函式如下:

function drawCanvas() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.beginPath();
        context.arc(x, y, 12, 0, Math.PI * 2, true);
        context.closePath();
        context.fill();
        x += d_x;
        y += d_y;
        if (x > 600 || x < 0) {
            ang = 180 - ang;
            d_x = d * Math.cos(ang * Math.PI / 180);
            d_y = d * Math.sin(ang * Math.PI / 180);
        }
        if (y > 600 || y < 0) {
            ang = 360 - ang;
            d_x = d * Math.cos(ang * Math.PI / 180);
            d_y = d * Math.sin(ang * Math.PI / 180);
        } 
}

預先清空目前畫面,然後描繪模擬運動的實心圓形,接下來改變位置座標,其中請特別注意以灰階標示的部份,在每一次圓形被重新描繪之後,根據其目前位置,重新計算運動角度,然後以三角函式取得下次的位置座標。


您的瀏覽器不支援 HTML5 動畫,請改用 Chrome 或 Firefox




沒有留言: