AE 製作環形進度條看似簡單，實則涉及遮罩、旋轉同步、顯示邏輯控制等核心技巧。本教學採用「左右半圓遮罩依序旋轉露出底層進度條」的經典邏輯，逐步拆解：建立合成 → 繪製圓形與矩形構建半圓 → 使用合成路徑「相交」模式產生半圓 → 外層矩形作為固定遮罩 → 複製圖層產生左半圓、右半圓、背景半圓三層 → 為左半圓加旋轉關鍵幀 → 用表達式將右半圓旋轉同步左半圓 → 尋找 180° 臨界幀控制左半圖/背景層顯示/隱藏，實現 0-100% 平滑進度動畫。全程配合關鍵截圖與 GIF 動圖示範，適合 AE 入門到進階學習者。

核心邏輯：左右半圓接力旋轉

• 進度條本體為靜態完整圓環（深綠色背景）。
• 右半圓（淺綠）先旋轉 0°→180°，遮罩固定在右側，露出右半邊進度。
• 右半圓達 180°（臨界幀）後，左半圖（淺綠）開始旋轉 180°→360°，遮罩固定在左側，露出左半邊進度。
• 背景半圓（紫色）靜止在右半側，配合右半圓旋轉前隱藏、旋轉後顯示，補全視覺連貫性。

關鍵製作步驟

1. 新建 720p 合成，繪製 400×400 圓形置中，加 200×400 矩形蓋左半邊，用「合成路徑-相交」得左半圓，組群組並加關鍵幀備用。
2. 複製圖層改為右半圓：組外矩形移至右側（100,0）作遮罩，再加合成路徑相交。
3. 再複製一層為背景半圓，組內矩形移至右側顯示完整圓，置底層。
4. 按 U 鍵只保留左半圖組旋轉關鍵幀，做 0→360° 一圈動畫。
5. Alt+點擊右半圖旋轉屬性啟用表達式，拖動螺旋圖標連結至左半圖旋轉屬性，實現同步旋轉。
6. 填色區分：左半圖紅、右半圖藍、背景紫（教學用）。
7. 尋找右半圖旋轉達 180° 的那一幀（臨界幀），在該幀前設定左半圖與背景層不透明度 0%，該幀後 100%。

進階延伸

• 用「光澤/邊緣羽化」讓進度條更有質感。
• 加入數字百分比文字層，用 `sourceText` 表達式連結進度值。
• 將三層半圖預合成，做成可複用的「進度條組件」，專案間拖拽即用。

掌握半圓遮罩接力旋轉核心邏輯，環形進度條、載入動畫、儀表盤指針皆可觸類旁通！