旋转动画的视觉资讯图.PDFVIP

7 0 r e t p a h 旋轉動畫的視覺資訊圖 C 03 (Infographic) SampleFile /Chapter07/03/ 難易度 下面範例將介紹使用旋轉動畫製作視覺資訊圖, 能把統計相關的資訊以視覺資訊圖顯示是現 今設計師必備的需求之一。 T 主要 jQuery 方法 T 主要 jQuery Plug-in メメメメ T 主要 JavaScript ˙ 無 ˙ 無 ˙ Math.max() ˙ Math.min() 何謂視覺資訊圖 (Infographic) 視覺資訊圖 (Infographic) 就是將資料以視覺的方式呈現, 在 Web 中可使 用動畫等技術以呈現出更好的效果。 本範例使用動態的圓形圖示, 搭配 CSS 和 JavaScript 顯示, 圖示以自然環 境為主題並顯示資料的百分比。 本次範例重點 本次範例的重點如下。 ˙ 使用 CSS 的 transform 屬性設定旋轉效果 ˙ animate() 方法中不是操作 jQuery 而是 JavaScript 的物件 ˙ 設定 animate() 方法的 progress 選項 範例中使用 4 個圓分別表示各資料的百分比, 並依照數值顯示外側扇形閉合 程度。接下來讓我們想想如何實作扇形閉合的動畫。 圓餅圖的機制 扇形動畫基本的機制就是從初始狀態隱藏然後逐漸顯示圓形的樣子, 在進入 程式之前, 讓我們在更詳細了解一下其機制。 扇形動畫的機制 0～50% Right ? ? ? ? ? 0～180°0～180°0～180°0～180° overflow ：hidden overflow ：hidden 50％（180°） L R ? 50～100% Left ? ? ? ? ? 75％ 0～180°0～180°0～180°0～180° overflow ：hidden overflow ：hidden 25％（90°） 1 首先表示圓的 a 元素實際是正方形, 設定 border-radius 讓其變成圓型 , 接著分別設定背景顏色。 圓的部分在程式中用了 2 層 div 元素包覆 (Wrap), 對圓而言有「遮 罩(Mask)」的作用。這兩個遮罩都是「寬度為圓形半徑長的矩形」, 並設定 overflow:hidden;將圓超出的部分隱藏 2 。 3 然後 2 個遮罩設定 position:absolute; 將圓各遮住左右一半 , 因此初始狀 態下圓是完全隱藏的。 在這些元素中實作執行動畫的是內側的遮罩, 操作 CSS 的 transform 屬性, 以圓心為基準進行旋轉 4 。由於外側遮罩會維持初始狀態不動, 因此當內側遮罩 開始移動時, 與外側遮罩重疊的部分就會顯示。 但當內側遮罩持續旋轉到 180