無插件製作 Liquid Animation 液態動畫!

你是不是也想做出那種像「果凍一樣流動」、「水滴感變形」的動畫，但又不想裝超大超多 plugin？
其實你只需要 2 個 AE 內建特效以及一些表做出隨機流體以及接近變色，Proximity表達式還有很多玩法。

Gaussian Blur + Simple Choker，就能做出超順流暢的 Liquid Animation！

🔧 使用工具

• Gaussian Blur（高斯模糊）

• Simple Choker（邊緣收縮）

• Wiggle 表達式（隨機震動）詳細解說

• Proximity 表達式（接近縮放）詳細解說

• Proximity 表達式（接近變色）詳細解說
  

---

🧪 製作步驟教學

✅ Step 1：建立圖形（Shape Layer）配上Wiggle + Proximity 表達式

1. 加入圓形圖層 Shape Layer

2. 圖層加上Wiggle表達式達到隨機運動效果
   詳細解說

3. 在Scale中加上Proximity 表達式接近縮放
   詳細解說

加上Wiggle表達式

加上Proximity 表達式

✅ Step 2：加入模糊效果 Gaussian Blur

1. 在 Effects & Presets 搜尋「Gaussian Blur」

2. 將其拖拉到 shape layer 上

3. 調整 Blurriness 數值（建議 50–100 之間）

   數值越高，邊緣越糊，像水的邊緣
   
   

✅ Step 3：加入 Simple Choker

1. 再搜尋並加上「Simple Choker」

2. 調整 Choke Matte 數值（建議 -10 ~ -30）

   Simple Choker 會將模糊的邊緣「收緊」，形成自然的液態形狀

加入Gaussian Blur

加入 Simple Choker

✅ Step 4：Proximity 表達式接近變色

1. 在shape layer 新增一個 Fill 填滿顏色

2. 在 Fill 中的 Color 新增一個接近變色表達式

   (Proximity 表達式建立圖層方式可以觀看這裡)

   https://www.jan1lab.com/blog/proximity-animation
   

3. 接近變色表達式如下:

加上Proximity 表達式接近變色

nullPos = thisComp.layer("null").transform.position;
objPos = transform.position;
maxDist = thisComp.layer("controller").effect("distance")("Slider");

dist = length(nullPos, objPos);
normDist = clamp(dist / maxDist, 0, 1);

// RGB 顏色
r = linear(normDist, 0, 1,0.318,0.949); // 紅色
g = linear(normDist, 0, 1,0.796,0.722); //綠色
b = linear(normDist, 0, 1,1.000,1.000); // 藍色

[r, g, b,1];

🎨 HEX → AE RGB 換算

轉換為 AE 的 [R, G, B] 格式（除以 255）

假設想要的顏色是 (R 184)(G 252) (B 255)就必須個別在除以 255

範例:

R = 184 ÷ 255 ≈ 0.722

G = 252 ÷ 255 ≈ 0.988

B = 255 ÷ 255 = 1.000

✨為什麼要轉換？
在 After Effects 表達式中，顏色必須用格式：[R, G, B, A]，且每個值都要在 0.0～1.0 的範圍內
（不是 0～255！這是 AE 與 HTML/CSS 最大不同）

{linear(normDist, 0, 1,最近顏色, 最遠顏色)}
在AE表達式中呈現樣式:

r = linear(normDist, 0, 1, 0.506, 0.722);

g = linear(normDist, 0, 1, 0.314, 0.988);

b = linear(normDist, 0, 1, 0.549, 1.0);

[r, g, b, 1];

---

🧠 快速總結

你只需要兩個效果，就能做出看起來高級、實際簡單的 Liquid Animation：

Gaussian Blur（柔化）+ Simple Choker（收邊）＝ 液態動畫

如果文章對你有幫助，可以支持我並取得ＡＥ原始專案檔。