純JavaScript實現(xiàn)驚艷的液態(tài)玻璃效果的示例

更新時間：2025年07月03日 16:33:35 作者：迷空

今天給大家分享一個超酷的視覺效果：液態(tài)玻璃??,這個效果看起來就像一塊可以隨意拖動、邊緣會自然流動的玻璃面板,具有一定的參考價值,感興趣的可以了解一下

前言

今天給大家分享一個超酷的視覺效果——??液態(tài)玻璃??。這個效果看起來就像一塊可以隨意拖動、邊緣會自然流動的玻璃面板。最棒的是，我們完全用原生JavaScript實現(xiàn)，不需要任何第三方庫！

效果預覽

技術原理

這個效果主要基于以下幾個核心技術：

??SVG位移映射??：使用feDisplacementMap濾鏡實現(xiàn)變形效果
??符號距離函數(shù)(SDF)??：計算邊緣的平滑過渡
??Canvas實時渲染??：動態(tài)生成位移貼圖
??CSS視覺效果??：結合backdrop-filter增強質感

核心代碼解析

1. 初始化SVG濾鏡

// 創(chuàng)建SVG濾鏡
const filter = document.createElementNS('http://www.w3.org/2000/svg', 'filter');
this.feDisplacementMap = document.createElementNS('http://www.w3.org/2000/svg', 'feDisplacementMap');
this.feDisplacementMap.setAttribute('in', 'SourceGraphic');
this.feDisplacementMap.setAttribute('in2', `${this.id}_map`);
this.feDisplacementMap.setAttribute('xChannelSelector', 'R');
this.feDisplacementMap.setAttribute('yChannelSelector', 'G');

這段代碼創(chuàng)建了一個SVG位移濾鏡，它會根據(jù)我們提供的位移貼圖來扭曲元素的外觀。

2. 位移貼圖生成

// 在updateShader方法中計算每個像素的位移
for (let i = 0; i < data.length; i += 4) {
  const x = (i / 4) % w;
  const y = Math.floor(i / 4 / w);
  const pos = this.fragment({ x: x / w, y: y / h }, mouseProxy);
  const dx = pos.x * w - x;
  const dy = pos.y * h - y;
  maxScale = Math.max(maxScale, Math.abs(dx), Math.abs(dy));
  rawValues.push(dx, dy);
}

這段代碼遍歷canvas的每個像素，計算它們應該移動的位置，生成位移貼圖。

3. 邊緣平滑處理

function roundedRectSDF(x, y, width, height, radius) {
  const qx = Math.abs(x) - width + radius;
  const qy = Math.abs(y) - height + radius;
  return Math.min(Math.max(qx, qy), 0) + length(Math.max(qx, 0), Math.max(qy, 0)) - radius;
}

這個SDF函數(shù)計算點到圓角矩形邊緣的距離，是實現(xiàn)邊緣流動效果的關鍵。