教學目標

零代碼實現數字翻轉動畫，掌握「圖層組管理→時間軸幀動畫→可見性控制→GIF 導出」完整工作流，適合 UI 動效入門練習。

製作流程

1. 數字素材準備

文字工具輸入「0」 → Alt+拖動複製 → 修改為 1-9 → 選中所有數字圖層 → 對齊工具水平垂直居中對齊。

2. 圖層組架構：位數分組

背景圖層上方新建組 → 將 10 個數字拖入組 → 組可摺疊管理。複製組 3 次，對應「秒個位、秒十位、分個位、分十位」四位數（教程示範 6 分鐘即 4 組）。

3. 位置佈局與分隔符

方向鍵微調各組水平間距 → 背景上方新建圖層畫兩黑點作「:」分隔符。

4. 時間軸幀動畫製作

1. 窗口＞時間軸＞「創建幀動畫」＞「轉換為幀」。
2. 調整各組數字可見性：第 1 幀顯示 00:00，第 2 幀秒個位 0→1 … 第 10 幀 0→9。
3. 全選現有幀 → 複製幀 → 修改秒十位組：0→1→…→5（60 秒進位邏輯）。
4. Ctrl+點選所有偶數幀 → 關閉分隔符圖層（閃爍效果）。
5. 全選複製 → 修改分個位組 0→1，以此類推完成分鐘進位。
6. 全選幀 → 延遲 1 秒 → 循環選「永遠」。

5. 導出 GIF

文件＞存儲為 Web 所用格式 → GIF、無損/適當抖動 → 存檔。

進階延伸

• 數字圖層改為智能對象，替換字體/顏色一鍵全局更新。
• 添加「毫秒」位：增加組、縮短幀延遲至 0.1s。
• 導出 MP4/WebP：需配合 After Effects 或線上轉檔工具。
• 結合 JS/CSS 實現真機可運行數字時鐘（超出 PS 範疇）。