製作無縫循環的水波動畫，是考驗設計師對「週期性」、「像素級精度」、「時間軸邏輯」理解的經典課題。本教學將一個看似簡單的 4 幀 GIF，拆解為 29 步精密操作，揭示專業動態設計師如何用數學思維控制視覺節奏。

效果預覽：兩種視覺語言

線性漣漪版：平行波紋均勻傳播，適合界面加載、背景動效。

極坐標漣漪版：同心圓擴散波動，適合點擊反饋、能量場可視化。

數學建模階段：構建完美週期單元

步驟 1-4：基頻條紋陣列的像素級構建

1. 新建 400×800px 透明文檔。鉛筆工具 40px 在 (0,0) 畫橫線。
2. 載入選區，Ctrl+Alt+T 複製變換，Y 軸位移 80px（條紋週期 = 線寬 40px + 間隙 40px = 80px）。
3. Ctrl+Shift+Alt+T 重複 8 次，獲得 10 條等距條紋。合併圖層。

步驟 5-6：模糊與對比——從硬邊到正弦波

高斯模糊 (半徑參考圖示) 將方波轉為近似正弦波 > 色階調整增強對比，確保波峰波谷純白純黑，為後續置換提供乾淨位移圖。

步驟 7-9：關鍵幀位移的數學精確控制

參考線定位可視區域 (Y=400)。關鍵計算：目標 4 幀循環，總位移 80px (一個週期)，故每幀位移 20px。
Ctrl+Alt+T 複製變換輸入 Y 位移 20px > Ctrl+Shift+Alt+T 重複 2 次，獲得 4 層依次下移 20px 的圖層。驗證：關閉下三層觀察第 4 層與參考線對齊，Alt+點擊圖層眼睛驗證無縫循環。

步驟 10-11：裁剪與畫布擴展——構建動畫條帶

裁剪工具截取 400×400px 可視區 > 畫布大小高度擴展至 1600px (向下擴展) > 移動工具將 4 層依序垂直排列無縫拼接 > 合併圖層。此步將「時間維度」空間化為「垂直空間維度」，為通道置換做準備。

位移映射階段：水波濾鏡與通道置換

步驟 12-13：水波濾鏡賦予波動形態

濾鏡 > 扭曲 > 水波：波數 3、波長 50/150、振幅 10/30、縮放 100%。逐層套用 (Ctrl+F 重複)，每層參數微調產生相位差。

步驟 14-16：二次裁剪與通道置換核心邏輯

再次裁剪 400×400px 取波動最佳區域 > 畫布擴展至 1600px > 4 層垂直排列合併。
核心魔法：通道面板 > 載入選區 (Ctrl+點擊 RGB 通道) > Ctrl+C 複製 > 目標圖片通道面板 > 新建通道 > Ctrl+V 貼上。此刻，4 幀動畫序列已編碼進單一 Alpha 通道的垂直空間中。

動畫合成階段：蒙版位移實現幀序列播放

步驟 17-23：目標圖片處理與蒙版動畫

1. 置入素材圖裁剪 400×400px，複製層放大 110% 產生視差，曲線壓暗增強層次。
2. 目標圖層添加蒙版，取消圖層與蒙版鏈接 (關鍵！)。
3. 打開時間軸面板，Alt+點擊蒙版縮圖進入蒙版編輯模式。
4. 幀動畫邏輯：第 1 幀蒙版位置 Y=0 → 第 2 幀 Y=-400px → 第 3 幀 Y=-800px → 第 4 幀 Y=-1200px。每幀間隔 0.1s (10fps)。
5. Shift+移動工具/方向鍵精確位移蒙版，實現位移圖在目標圖片上的「掃描播放」。

步驟 24-29：剪貼蒙版封裝與導出優化

Alt+點擊蒙版層與圖片層分界線建立剪貼蒙版 > 文件 > 存儲為 Web 格式 > GIF、256 色、無損、循環永遠。極坐標版本額外套用「濾鏡 > 扭曲 > 極坐標 > 矩形轉極坐標」於位移圖階段。

核心算法洞察：為什麼這樣做能無縫循環？

本質上是將 時間週期 T 映射為 空間週期 Λ：

位移圖垂直周期 Λ = 4幀 × 20px/幀 = 80px = 條紋基頻週期
蒙版掃描速度 v = Λ / T = 80px / 0.4s = 200px/s

當蒙版以恆定速度掃過編碼了完整週期位移信息的 Alpha 通道時，目標圖片像素位移恰好滿足週期性邊界條件，實現數學級無縫循環。這就是「像素級精度」的真正含義——每一個像素的位移軌跡都是經過數學驗證的。

掌握這套「空間換時間、通道編碼動畫、蒙版掃描播放」的核心邏輯，你就能製作任意週期性動態紋理：流動的雲霧、燃燒的火焰、跳動的波形、旋轉的星系……將數學之美轉化為視覺之詩。