範例將介紹使用旋轉動畫製作視覺資訊圖, 能把統計相關的資訊以視覺資訊圖顯示是現今設計師必備的需求之一。

何謂視覺資訊圖 (Infographic)

視覺資訊圖 (Infographic) 就是將資料以視覺的方式呈現, 在 Web 中可使用動畫等技術以呈現出更好的效果。

本範例使用動態的圓形圖示, 搭配 CSS 和 JavaScript 顯示, 圖示以自然環境為主題並顯示資料的百分比。

圓餅圖的機制

扇形動畫基本的機制就是從初始狀態隱藏然後逐漸顯示圓形的樣子, 在進入程式之前, 讓我們在更詳細了解一下其機制。

.......﹝詳細內容﹞

 
更多內容請見 《邁向 jQuery 達人的階梯 》

在玩遊戲時，常常會須了解場景資訊或是在玩家附近敵人的位置，因此許多遊戲都有小地圖或是雷達等功能。而雷達製作的基本原理其實就是用一支攝影機在主角的上空對主角拍攝，其重點流程如圖 11-1，其製作主要需要考慮二個部分，如何將攝影機拍攝的內容變成一張動態貼圖( 圖 11-1 (1))，以及如何去除地形、建築物等 場景物件只留下主角和敵人的資訊( 圖 11-1 (2)~(4))

.......﹝詳細內容﹞

..... 更多內容請見 《 Unity 3D 遊戲設計範例講堂 》