【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。
【公告】《Entity Framework 實務精要》 絕版優惠學習活動,是針對最後一批少量書籍絕版的短期特別活動,只提供 20 個名額(剩 5 名),教學影片要在今年暑假過後才會重新開放訂閱,並沒有提供之前單獨購書的讀者,還請見諒, 如果您需要教學影片,屆時再請參與,也感謝讀者學員的支持,我們正在開發更多的教學內容,歡迎與我們一起努力。
《Entity Framework 實務精要》 絕版優惠學習活動》

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




沒有留言: