文字動畫是網頁横幅、社群貼文、電子報最輕量級的動態視覺元素。本教學一次呈現四種經典且實用的文字 GIF 動畫效果，全部在 Photoshop 時間軸面板內完成，無需 After Effects。適合社群經營者、網頁設計師、UI 動效入門者快速掌握並即刻應用。

四大效果預覽

效果一：文字左右同時消失過渡

原理：文字圖層蒙版 + 關鍵幀動畫蒙版位置/密度。

1. 輸入文字，置中。
2. 為文字圖層加向量蒙版。
3. 時間軸開啟「位置」與「向量蒙版啟用」關鍵幀。
4. 第 1 幀：蒙版全白（全顯示）。
4. 中間幀：蒙版用黑白漸變從左右向中間收縮（或用形狀工具動畫）。
5. 最後幀：蒙版全黑（全隱藏）。
6. 反向複製幀組成循環。

效果二：文字打散重組

原理：將文字逐字拆分為獨立圖層，動畫各字元位置/旋轉/縮放/透明度。

1. 文字圖層右鍵 > 「轉換為形狀」或逐字複製圖層。 2. 每字獨立圖層，時間軸為每層打「位置」「不透明度」「變換」關鍵幀。 3. 起始：字元散亂在畫面四周、縮小、透明度 0。 4. 結束：字元歸位、恢復 100%、不透明度 100%。 5. 錯開各字元關鍵幀時間（交錯動畫），產生彈性進場感。

效果三：透明光線左右掃過

原理：漸變圖層（透明→白→透明）+ 遮罩/剪貼蒙版限制在文字範圍 + 位置動畫。

1. 新建圖層，漸變工具拉「透明-白-透明」線性漸變（細長條）。
2. 將漸變圖層剪貼至文字圖層 (Ctrl+Alt+G)，光線僅顯示在文字內。
3. 時間軸為漸變圖層打「位置」關鍵幀：從文字左側移至右側。
4. 循環播放，形成掃光效果。

效果四：光線上下掃過過渡

原理：同效果三，但漸變方向垂直，位置動畫改為垂直移動（從上掃至下或反向），常用於標題切換過渡。

通用製作流程標準化

1. 新建文件（建議 800×400 px、72 dpi、RGB）。
2. 排版靜態文字/圖形（智慧物件最佳）。
3. 視窗 > 時間軸 > 「建立影格動畫」或「建立視頻時間軸」（視頻時間軸支援屬性關鍵幀更靈活）。
4. 為目標屬性（位置、不透明度、樣式、蒙版、變換）打關鍵幀。
5. 調整幀率（12~30 fps）與幀延遲，預覽節奏。
6. 檔案 > 存儲為 Web 所用格式 > GIF、永久循環、顏色 256、抖動 88%。

效能與檔案大小優化

• 幀數控制在 20~40 幀內（GIF 非影片編碼，幀數直線影響檔案大小）。
• 畫布尺寸依實際投放尺寸設定，避免過大再縮放。
• 純文字動畫可嘗試 APNG 或 WebP 格式（支援透明度、更小體積），但相容性不如 GIF。
• 複雜動畫建議改用 After Effects + Bodymovin/Lottie 輸出 JSON，前端直渲染，效能與畫質雙贏。

延伸創意方向

• 文字逐字打字機效果（不透明度 0→100 依序觸發）。
• 文字描邊動畫（路徑修剪動畫，需形狀圖層）。
• 文字變形漸變（扭曲/擠壓/拉長）。
• 文字粒子化爆炸/重組（需粒子腳本或手動分層）。

四大經典文字動畫，掌握核心邏輯：拆分元素 → 設定關鍵屬性 → 打關鍵幀 → 調節節奏 → 輸出。現在打開 PS，為你的品牌標語、活動標語、節日問候加上動態魔法吧！