Animate CC繪製八等分圓餅圖動畫素材

發佈於Animate CC 網頁動畫與JS互動

更新於 2025/02/04發佈於 2020/02/05閱讀時間約 2 分鐘

STEP1.
開啟空白網頁格式新檔，檔案尺寸800X800，依序繪製600X600一般正圓(非基本橢圓)並個別群組(CTRL+G)，繼續繪製300X300、筆畫粗細20正圓圈並個別群組(繪製時避免與大圓重疊)，最後依序繪製水平、垂直、2個45度角等四個筆畫粗細20線段(繪製時按住SHIFT)，同樣避免重疊並依序個別群組。

raw-image

STEP2.
同時選取大圓與圓圈，依序按下對齊控制板(視窗>對齊)上的【與舞台對齊】、【垂直居中】、【水平居中】讓二個圓對齊至檔案中心；再複選另外四條線段，依序按下對齊控制板(視窗>對齊)上的【與舞台對齊】、【垂直居中】、【水平居中】、【符合寬度與高度】讓四線段對齊至檔案中心並與檔案尺寸同大小。

raw-image

STEP3.
複選所有物件執行【修改>打散】，再各別點取中間交錯的8個線段並均刪除。

raw-image

STEP4.
選取工具在線段上按二下選取所有線段，執行【修改>形狀>將線段轉換成填色】，選取工具在空白處點一下以取消選取，再次點取原線段轉換成的填色並刪除，即可刪去下方的圓成空隙，最後依序更改填色就完成。

raw-image

相關課程 : 優勢多媒體 - Adobe Animate CC製作HTML5動畫與互動效果

哩老師的沙龍Animate CC 網頁動畫與JS互動

留言

留言分享你的想法！

哩老師的沙龍

29會員

129內容數

多媒體設計的專業能力養成過程，除了有效率學習軟體之外，更重要的是各個軟體間的整合應用! Photoshop、Illustrator、Dreamweaver、Animate、CSS、Bootstrap響應式網頁等，相關的整合應用有機會皆會與大家分享喔~

哩老師的沙龍的其他內容

2020/02/15

Animate CC 動態產品介紹互動設計

利用影片片段安排要控制的動畫內容，包括圖片切換顯示動畫，以及各個設定互動控制的按鈕元件，再搭配正確的互動控制程式碼片段，即可完成具動畫效果的動態產品介紹互動設計。 Step1. 點取介紹內容並設定實體名稱『all_mc』。進入到全部內容元件內，點取上方介紹內容設定實

2020/02/15

Animate CC 動態產品介紹互動設計

利用影片片段安排要控制的動畫內容，包括圖片切換顯示動畫，以及各個設定互動控制的按鈕元件，再搭配正確的互動控制程式碼片段，即可完成具動畫效果的動態產品介紹互動設計。 Step1. 點取介紹內容並設定實體名稱『all_mc』。進入到全部內容元件內，點取上方介紹內容設定實

2020/02/15

Animate CC 控制動態網頁畫面切換

利用影片片段安排要控制的動畫內容，以及各個設定互動控制的按鈕元件，再搭配正確的互動控制程式碼片段，即可完成具動畫效果的畫面切換內容。 Step 1. 場景左側由遮色片控制顯示範圍的所有頁面元件實體名稱為【all_mc】，另外五個按鈕元件實體名稱依序為【b1_btn ~

2020/02/15

Animate CC 控制動態網頁畫面切換

利用影片片段安排要控制的動畫內容，以及各個設定互動控制的按鈕元件，再搭配正確的互動控制程式碼片段，即可完成具動畫效果的畫面切換內容。 Step 1. 場景左側由遮色片控制顯示範圍的所有頁面元件實體名稱為【all_mc】，另外五個按鈕元件實體名稱依序為【b1_btn ~

2020/02/15

Animate CC 控制影片片段元件內時間軸播放

除了控制場景上時間軸的影格播放外，更可以控制影片片段元件內時間軸的播放，因此只要影片片段元件安排得當，並正確加上元件實體名稱，就可以做出更有互動性的動畫內容控制安排，請注意在程式碼中需正確完整撰寫由場景至每個影片片段元件的順序。 STEP1. 範例檔中已完成摩托車的動畫

2020/02/15

Animate CC 控制影片片段元件內時間軸播放

除了控制場景上時間軸的影格播放外，更可以控制影片片段元件內時間軸的播放，因此只要影片片段元件安排得當，並正確加上元件實體名稱，就可以做出更有互動性的動畫內容控制安排，請注意在程式碼中需正確完整撰寫由場景至每個影片片段元件的順序。 STEP1. 範例檔中已完成摩托車的動畫

你可能也想看

Emma 的意識界。

你今天蝦皮了嗎? 『 10 樓 2 選物店』開箱🎉

介紹朋友新開的蝦皮選物店『10樓2選物店』，並分享方格子與蝦皮合作的分潤計畫，註冊流程簡單，0成本、無綁約，推薦給想增加收入的讀者。

#平台#商品#蝦皮

2025/05/16

Emma 的意識界。

你今天蝦皮了嗎? 『 10 樓 2 選物店』開箱🎉

介紹朋友新開的蝦皮選物店『10樓2選物店』，並分享方格子與蝦皮合作的分潤計畫，註冊流程簡單，0成本、無綁約，推薦給想增加收入的讀者。

#平台#商品#蝦皮

2025/05/16

穿越的古文課的沙龍

【端午特輯】細思極恐!屈原和端午節其實沒有關係？

當你邊吃粽子邊看龍舟競賽直播的時候，可能會順道悼念一下2300多年前投江的屈原。但你知道端午節及其活動原先都與屈原毫無關係嗎?這是怎麼回事呢？本文深入探討端午節設立初衷、粽子、龍舟競渡與屈原自沉四者。看完這篇文章，你就會對端午、粽子、龍舟和屈原的四角關係有新的認識喔。那就讓我們一起解開謎團吧!

#屈原#粽子#龍舟

2025/05/27

穿越的古文課的沙龍

【端午特輯】細思極恐!屈原和端午節其實沒有關係？

當你邊吃粽子邊看龍舟競賽直播的時候，可能會順道悼念一下2300多年前投江的屈原。但你知道端午節及其活動原先都與屈原毫無關係嗎?這是怎麼回事呢？本文深入探討端午節設立初衷、粽子、龍舟競渡與屈原自沉四者。看完這篇文章，你就會對端午、粽子、龍舟和屈原的四角關係有新的認識喔。那就讓我們一起解開謎團吧!

#屈原#粽子#龍舟

2025/05/27

哩老師的沙龍

Illustrator CC即時上色繪製元件

STEP1. 開啟範例檔，選取中央直線並執行『物件 > 變形 > 旋轉』設定旋轉角度：10按下拷貝，再繼續按下『Ctrl』＋『D』複製變形複製出所有旋轉10度的直線。 STEP2. 複選所有物件執行『物件 > 即時上色 > 製作』建立即時上色狀態，使用即時上色油漆桶進行上色。 STEP3. 選

#工具與應用

2020/02/20

哩老師的沙龍

Illustrator CC即時上色繪製元件

STEP1. 開啟範例檔，選取中央直線並執行『物件 > 變形 > 旋轉』設定旋轉角度：10按下拷貝，再繼續按下『Ctrl』＋『D』複製變形複製出所有旋轉10度的直線。 STEP2. 複選所有物件執行『物件 > 即時上色 > 製作』建立即時上色狀態，使用即時上色油漆桶進行上色。 STEP3. 選

#工具與應用

2020/02/20

哩老師的沙龍

Photoshop CC 繪製紙質物件風格

Step1. 開啟範例練習檔，圖層資料夾Set1為使用矩型工具與線段工具繪製之紙張紋路，為練習方便在路徑控制版中已包含本範例所需的物件形狀路徑，均由繪圖工具組繪製，也可自行繪製。設定前景色為#FEBD63，新增圖層1，使用矩型繪圖工具、繪圖方式選擇填滿像素，繪製5*5像素之小正方形於左下角，並

#工具與應用

2020/02/19

哩老師的沙龍

Photoshop CC 繪製紙質物件風格

Step1. 開啟範例練習檔，圖層資料夾Set1為使用矩型工具與線段工具繪製之紙張紋路，為練習方便在路徑控制版中已包含本範例所需的物件形狀路徑，均由繪圖工具組繪製，也可自行繪製。設定前景色為#FEBD63，新增圖層1，使用矩型繪圖工具、繪圖方式選擇填滿像素，繪製5*5像素之小正方形於左下角，並

#工具與應用

2020/02/19

哩老師的沙龍

Animate CC Q版照片人物動畫

對於是以相片人物來製作動畫時，當然必需要在Photoshop中事先處裡好每個元件細節，然後再正確匯入Animate中來完成動畫，同樣是需要注意元件變形中心與動畫動作的設定。目標動畫效果:應用影片片段元件表現以影像為素材的人物動畫，需注意匯入檔案的正確方式，除了元件的準備

2020/02/13

哩老師的沙龍

Animate CC Q版照片人物動畫

對於是以相片人物來製作動畫時，當然必需要在Photoshop中事先處裡好每個元件細節，然後再正確匯入Animate中來完成動畫，同樣是需要注意元件變形中心與動畫動作的設定。目標動畫效果:應用影片片段元件表現以影像為素材的人物動畫，需注意匯入檔案的正確方式，除了元件的準備

2020/02/13

哩老師的沙龍

Animate CC 畫線與色塊變形繪圖動畫

【檢視範例】【下載範例】應用形狀補間動畫的物件變形特點，再搭配遮色片功能，不需要藉助任何的元件與濾鏡效果，即可完美演繹目標內容的動態呈現。目標動畫效果:應用形狀補間動畫完成畫線條動畫，以及搭配遮色片呈現內容出現的效果，並細膩設定物件變形與時間點控制，達成繪圖動畫的目地。使用動畫技巧:形狀補間

#遮色片動畫

2020/02/07

哩老師的沙龍

Animate CC 畫線與色塊變形繪圖動畫

【檢視範例】【下載範例】應用形狀補間動畫的物件變形特點，再搭配遮色片功能，不需要藉助任何的元件與濾鏡效果，即可完美演繹目標內容的動態呈現。目標動畫效果:應用形狀補間動畫完成畫線條動畫，以及搭配遮色片呈現內容出現的效果，並細膩設定物件變形與時間點控制，達成繪圖動畫的目地。使用動畫技巧:形狀補間

#遮色片動畫

2020/02/07

哩老師的沙龍

Animate CC 書寫中文字動畫

【檢視範例】【下載範例】在Animate動畫中的文字效果，還有中文字依筆畫，書寫出文字內容的文字動畫效果，只要將各筆畫分圖層，再依序以遮色片上的形狀補間動畫或逐格動畫，控制各筆畫出現即可。目標動畫效果:應用遮色片圖層上的形狀補間或逐格動畫方式，來呈現分圖層的各文字筆畫書寫畫出，加上速度與時間差

#遮色片動畫#動畫效果

2020/02/06

哩老師的沙龍

Animate CC 書寫中文字動畫

【檢視範例】【下載範例】在Animate動畫中的文字效果，還有中文字依筆畫，書寫出文字內容的文字動畫效果，只要將各筆畫分圖層，再依序以遮色片上的形狀補間動畫或逐格動畫，控制各筆畫出現即可。目標動畫效果:應用遮色片圖層上的形狀補間或逐格動畫方式，來呈現分圖層的各文字筆畫書寫畫出，加上速度與時間差

#遮色片動畫#動畫效果

2020/02/06

哩老師的沙龍

Animate CC 動畫類型

1. 基本四大類型 AnimateCC的基礎動畫可分為基本四大類型，逐格動畫、形狀補間動畫、傳統(移動)補間動畫、(新的)移動補間動畫，全都是要成為 Animate CC動畫得心應手的必備動畫基礎。 (1)逐格動畫　　　製作方式:依序在要設定內容的時間點上插入關鍵影格，設定更改內容即可。 (2)

#AnimateCC動畫類型#動畫基礎

2020/02/05

哩老師的沙龍

Animate CC 動畫類型

1. 基本四大類型 AnimateCC的基礎動畫可分為基本四大類型，逐格動畫、形狀補間動畫、傳統(移動)補間動畫、(新的)移動補間動畫，全都是要成為 Animate CC動畫得心應手的必備動畫基礎。 (1)逐格動畫　　　製作方式:依序在要設定內容的時間點上插入關鍵影格，設定更改內容即可。 (2)

#AnimateCC動畫類型#動畫基礎

2020/02/05

哩老師的沙龍

Animate CC 設計漸層文字動畫素材

建立文字打散後的漸層編輯應用，設定製作出文字倒影與陰影素材，進而隨後表現其動畫效果。 STEP1. 在深色背景上建立白色文字並打散二次成圖像，各向上、下複製出另二份文字圖像共三份。首先選取第二份文字，使用油漆桶工具為第二份文字填入黑白線性漸層(請確認使用油漆桶工具於文字上點一下倒入整體漸層)，

#動畫基礎#動畫素材準備

2020/02/05

哩老師的沙龍

Animate CC 設計漸層文字動畫素材

建立文字打散後的漸層編輯應用，設定製作出文字倒影與陰影素材，進而隨後表現其動畫效果。 STEP1. 在深色背景上建立白色文字並打散二次成圖像，各向上、下複製出另二份文字圖像共三份。首先選取第二份文字，使用油漆桶工具為第二份文字填入黑白線性漸層(請確認使用油漆桶工具於文字上點一下倒入整體漸層)，

#動畫基礎#動畫素材準備

2020/02/05

哩老師的沙龍

Animate CC繪製漸層球與光動畫素材

使用橢圓、矩型、鋼筆工具建立物件基本造型，搭配物件重疊合併的編輯，以及漸層填色技巧，完成仿3D的場景內之球、舞台、光線、陰影等動畫素材物件。 STEP1. 為方便編輯請先設定場景背景色為灰色，選擇填色為黑白放射狀漸層，繪製正圓形無邊框黑白漸層，再使用漸層變形工具調整漸層中心至圓內左上角，放大漸層範圍

#動畫基礎#動畫素材準備

2020/02/05

哩老師的沙龍

Animate CC繪製漸層球與光動畫素材

使用橢圓、矩型、鋼筆工具建立物件基本造型，搭配物件重疊合併的編輯，以及漸層填色技巧，完成仿3D的場景內之球、舞台、光線、陰影等動畫素材物件。 STEP1. 為方便編輯請先設定場景背景色為灰色，選擇填色為黑白放射狀漸層，繪製正圓形無邊框黑白漸層，再使用漸層變形工具調整漸層中心至圓內左上角，放大漸層範圍

#動畫基礎#動畫素材準備

2020/02/05

哩老師的沙龍

Animate CC繪製八等分圓餅圖動畫素材

STEP1. 開啟空白網頁格式新檔，檔案尺寸800X800，依序繪製600X600一般正圓(非基本橢圓)並個別群組(CTRL+G)，繼續繪製300X300、筆畫粗細20正圓圈並個別群組(繪製時避免與大圓重疊)，最後依序繪製水平、垂直、2個45度角等四個筆畫粗細20線段(繪製時按住SHIFT)，同樣

2020/02/05

哩老師的沙龍

Animate CC繪製八等分圓餅圖動畫素材

STEP1. 開啟空白網頁格式新檔，檔案尺寸800X800，依序繪製600X600一般正圓(非基本橢圓)並個別群組(CTRL+G)，繼續繪製300X300、筆畫粗細20正圓圈並個別群組(繪製時避免與大圓重疊)，最後依序繪製水平、垂直、2個45度角等四個筆畫粗細20線段(繪製時按住SHIFT)，同樣

2020/02/05

哩老師的沙龍

Animate CC繪圖與物件重疊編輯

無群組或是非基本矩形、非基本橢圓等繪圖物件，在物件重疊時隨即自動進行圖案間編輯處理，包括填色與外框筆畫間均會互相作用。 1.填色圖案之間相加當繪製彼此重疊且無筆畫的填色相同形狀時，重疊的形狀將自動合併在一起。 2. 填色圖案之間上減下當您繪製彼此重疊無筆畫的不同填色形狀時，最上層的形狀會截掉一

2020/02/04

哩老師的沙龍

Animate CC繪圖與物件重疊編輯

無群組或是非基本矩形、非基本橢圓等繪圖物件，在物件重疊時隨即自動進行圖案間編輯處理，包括填色與外框筆畫間均會互相作用。 1.填色圖案之間相加當繪製彼此重疊且無筆畫的填色相同形狀時，重疊的形狀將自動合併在一起。 2. 填色圖案之間上減下當您繪製彼此重疊無筆畫的不同填色形狀時，最上層的形狀會截掉一

2020/02/04

追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News