纯JavaScript实现惊艳的液态玻璃效果的示例

前言

今天给大家分享一个超酷的视觉效果——液态玻璃。这个效果看起来就像一块可以随意拖动、边缘会自然流动的玻璃面板。最棒的是，我们完全用原生JavaScript实现，不需要任何第三方库！

效果预览

技术原理

这个效果主要基于以下几个核心技术：

SVG位移映射：使用feDisplacementMap滤镜实现变形效果
符号距离函数(SDF)：计算边缘的平滑过渡
Canvas实时渲染：动态生成位移贴图
CSS视觉效果：结合backdrop-filter增强质感

核心代码解析

1. 初始化SVG滤镜

// 创建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');

这段代码创建了一个SVG位移滤镜，它会根据我们提供的位移贴图来扭曲元素的外观。

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函数计算点到圆角矩形边缘的距离，是实现边缘流动效果的关键。