Pixate 是適合設計師思維、實時預覽、全平台免費的動效工具（Google 收購後免費）。本教程以 Circle Progress 為例，演示點擊下載 → 環形進度條順時針 360° 動畫 → 完成後文字消失的完整流程。

核心邏輯

兩個半圓沿圓形軌跡依次旋轉：左半圓 0°→180°（被白色 Cover 遮蓋逐漸顯現），右半圓 180°→360°（Cover 移至底層/消失），配合按鈕消失、文字淡入淡出。

素材準備（統一尺寸 PNG）

1. 透明鏤空背景軌跡
2. 白色半圓覆蓋層
3. 左半圓進度條
4. 右半圓進度條（初始 Opacity 0）
5. 可選：下載按鈕、Downloading 文字

圖層順序（自上而下）

1. 按鈕（頂層）
2. Downloading 文字
3. 透明軌跡
4. Cover
5. LeftPart
6. RightPart（底層，初始透明）

關鍵動畫設置

圖層	觸發	動畫類型	參數
按鈕	Tap	Fade	消失
LeftPart	按鈕 Tap 後 1s	Rotate	2s 內完成 180° 旋轉
RightPart	按鈕 Tap 後 3s	Rotate	2s 內完成 180° 旋轉
RightPart	按鈕 Tap 後 3s	Fade	Opacity 0→1 顯現
Cover	按鈕 Tap 後 3s	Reorder	移至底層
Downloading 文字	按鈕 Tap 後 5s	Fade	消失

實時預覽與下載

手機裝 Pixate App（iOS/Android），WiFi/數據線連電腦即時預覽。官網 pixate.com 提供 Demo 與教學視頻。鼓勵自行動手練習，不提供源文件下載。