使用feDisplacementMap+feImage滤镜实现水波纹效果(计算动态值)

使用feDisplacementMap+feImage滤镜实现水波纹效果（计算动态值）

理解feDisplacementMap滤镜

feDisplacementMap滤镜是一个非常强大的SVG滤镜，它可以根据指定的图像（通常是一个噪声图）来对目标元素的像素进行偏移，从而产生各种变形效果，包括我们今天要实现的水波纹效果。

工作原理：

• feImage: 创建一个图像元素，作为偏移的参考。这个图像通常是一个噪声图，其像素值会影响目标元素的像素偏移。
• feDisplacementMap: 根据feImage的像素值，对目标元素的像素进行偏移。偏移的幅度和方向由feImage的像素值以及feDisplacementMap的一些属性（如scale、xChannelSelector、yChannelSelector）共同决定。

实现步骤

1. 准备噪声图：
   • 噪声图的像素值会直接影响水波纹的效果。一般来说，灰度图的噪声效果比较好。
   • 可以使用Photoshop或其他图像处理软件生成噪声图，也可以在线生成。
2. 创建SVG元素：
   • 在HTML中创建一个SVG元素，作为容器。
   • 在SVG中定义一个filter，包含feImage和feDisplacementMap两个元素。
3. 设置滤镜属性：
   • feImage: 设置噪声图的路径。
   • feDisplacementMap:
     • scale: 控制偏移的幅度。值越大，偏移越明显。
     • xChannelSelector、yChannelSelector: 指定使用噪声图的哪个通道来控制x轴和y轴的偏移。
     • in: 指定要应用滤镜的目标元素。
     • in2: 指定噪声图。

代码示例

<svg width="300" height="200">
  <defs>
    <filter id="waveFilter">
      <feImage result="noise" xlink:href="noise.png" />
      <feDisplacementMap scale="20" xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" in2="noise" />
    </filter>
  </defs>
  <image xlink:href="your_image.jpg" x="0" y="0" width="300" height="200" filter="url(#waveFilter)" />
</svg>

实现动态效果

为了实现动态的水波纹效果，我们需要不断改变噪声图，或者改变feDisplacementMap的属性。

方法一：动画噪声图

• 创建多个噪声图： 准备一系列不同噪声图。
• 使用JavaScript： 通过JavaScript定时切换噪声图的路径，从而产生动画效果。

方法二：动态改变scale属性

• 使用JavaScript： 定时改变feDisplacementMap的scale属性，从而控制偏移幅度，产生波浪效果。

// 获取滤镜元素
const filter = document.getElementById('waveFilter');
const displacementMap = filter.querySelector('feDisplacementMap');

// 动态改变scale属性
function animate() {
  displacementMap.setAttribute('scale', Math.random() * 20);
  requestAnimationFrame(animate);
}

animate();

优化与改进

• 噪声图质量： 噪声图的质量会直接影响水波纹的效果。
• scale值调整： 通过调整scale值，可以控制水波纹的幅度和频率。
• xChannelSelector和yChannelSelector： 通过调整这两个属性，可以控制水波纹的形状。
• 性能优化： 对于复杂的动画，可以考虑使用硬件加速或Web Workers。

总结

feDisplacementMap滤镜是一个非常强大的工具，可以实现各种各样的变形效果。通过合理地使用噪声图和调整滤镜属性，我们可以创建出逼真的水波纹效果。

更多优化和探索：

• 自定义噪声函数： 可以使用JavaScript编写自定义的噪声函数，生成更复杂的噪声图。
• 结合其他滤镜： 可以将feDisplacementMap与其他滤镜组合，实现更丰富的效果。
• 三维效果： 通过使用3D技术，可以实现更逼真的水波纹效果。

希望这个回答能帮助你更好地理解和应用feDisplacementMap滤镜！

如果你还有其他问题，欢迎随时提问。

想了解更多，可以参考以下链接：

• 深入理解SVG feDisplacementMap滤镜及实际应用： https://www.zhangxinxu.com/wordpress/2017/12/understand-svg-fedisplacementmap-filter/

关键词： SVG滤镜，feDisplacementMap，水波纹，动画，噪声图

注意： 为了更好地理解和实践，建议配合实际代码和示例进行学习。