带有 FeTurbulences 的 SVG 形状失真答案

【问题标题】：SVG shape distortion with FeTurbulences带有 FeTurbulences 的 SVG 形状失真
【发布时间】：2017-03-04 10:56:57
【问题描述】：

我的问题很简单：是否可以使用 SVG 滤镜重现 this effect（圆形失真动画）？

我认为将 FeTurbulences 与 FeDisplacementMap 一起使用会很有趣，因为它适用于 static way。但实际上，我不知道应该对哪个属性进行补间以使动画好看。

<feTurbulence type="fractalNoise" baseFrequency="0.01" numOctaves="2" result="warp" seed="0" stichTitles="stitch"></feTurbulence>
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warp" />

如果您有其他解决方案（js 库、过滤器等）：请不要犹豫。我对所有解决方案都持开放态度；）

感谢您的考虑。

【问题讨论】：

标签： javascript animation svg svg-filters distortion

【解决方案1】：

这就是你做那种过滤器的方法。 baseFrequency 控制扭曲的粒度，scale 控制位移的大小，而 Animate 中的 dur 控制速度。我已经对比例进行了动画处理并添加了一个阴影以更好地匹配原始图像。

  <svg width="800px" height="600px">
  <defs>
<filter id="distort">
  <feTurbulence baseFrequency=".015" type="fractalNoise"/>
  <feColorMatrix type="hueRotate" values="0">
    <animate attributeName="values" from="0" to="360" dur="1s" repeatCount="indefinite"/>
  </feColorMatrix>
  <feDisplacementMap in="SourceGraphic" xChannelSelector="R" yChannelSelector="B" scale="20">
    <animate attributeName="scale" values="0;20;50;0" dur="5s" repeatCount="indefinite"/>
    </feDisplacementMap>
  <feGaussianBlur stdDeviation="3"/>
  <feComponentTransfer result="main">
    <feFuncA type="gamma" amplitude="50" exponent="5"/>
  </feComponentTransfer>
  
  <feColorMatrix type="matrix" values="0 0 0 0 0 
                                       0 0 0 0 0
                                       0 0 0 0 0
                                       0 0 0 1 0"/>
  <feGaussianBlur stdDeviation="10"/>
  <feComposite operator="over" in="main"/>

</filter>
  </defs>
  <circle filter="url(#distort)" cx="200" cy="200" r="150" fill="red"/>
</svg>

【讨论】：

【解决方案2】：

我曾经创建过类似的效果，但没有使用过滤器。我基本上做的是：

为 »star« 形状或常规多边形创建坐标作为数组，
为这些坐标设置动画，使它们移动，但不会过度扭曲整体星形，
使用Catmul-Rom 算法平滑边缘并将结果转换回贝塞尔路径数据并将其应用于<path />
在生成的路径上应用高斯模糊

【讨论】：