如何为 feTurbulence 设置动画以显示连续

Question

feTurbulence 滤镜用于创建云。通过动画频率值，生成的云被放大或缩小。我希望它们从右向左滑动。到目前为止我做了：

<svg height="0" width="0" style=";position:absolute;margin-left: -100%;">
 <defs>
  <filter id="imagenconturbulencias" x="0" y="0" width="100%" height="100%">
   <feTurbulence result="cloud" baseFrequency=".2" seed="22" stitchTiles="nostitch" type="fractalNoise" numOctaves="3">
   <animate
    attributeName="baseFrequency"
    calcMode="spline"
    dur="5s"
    values=".2;.1;"
    repeatCount="indefinite"
   />
   </feTurbulence>
   <feComposite operator="in" in="cloud" in2="SourceGraphic"/>
  </filter>
 </defs>
 <g stroke="none" stroke-width="4" id="rlog" fill="#eee"><path d="M34.2,13.9v19.5h-7.3V13.9H34.2z M30.5,5.2c1,0,1.8,0.3,2.6,1s1.1,1.5,1.1,2.5c0,1-0.3,1.8-1,2.5s-1.6,1-2.6,1c-1.1,0-1.9-0.3-2.6-1s-1-1.5-1-2.5c0-1,0.4-1.8,1.1-2.5S29.5,5.2,30.5,5.2z"/></g>
</svg>

<div id="a">
 <svg viewBox="0 0 230 280">
  <use filter="url(#imagenconturbulencias)" xlink:href="#rlog"></use>
 </svg>
</div>

如果你仔细观察，动画会在 5 秒后重复出现，这是应该的！但是看起来不是很漂亮

我知道此滤镜用于创建逼真的云状结构。我们如何继续移动这些云？

feTurbulence 过滤器接受 randomSeed numberOfOctaves 和 baseFrequency 等参数。

在给定的示例中，我对基频值进行了动画处理。因为没有更多的属性可以设置动画。

如何让这个动画看起来是连续的？ 我们是否在这个湍流生成的东西上使用 perlin 噪声生成器结合矩阵和置换贴图并以某种方式一起制作动画？（只是集思广益..）

任何帮助、想法、方法、片段，真诚感谢。

为简单起见，这可能是黑白的，但云动画仍然不连续。 Bonus snippet

Answer 1

不要设置基频动画。要获得平滑效果，请使用 360 hueRotate 和 colorMatrix（因为 hueRotate 循环回到原始值）。

http://codepen.io/mullany/pen/fmJKr

代码

<svg x="0px" y="0px" width="800px" height="500px" viewbox="0 0 800 500">

    <script type="text/ecmascript" xlink:href="http://www.codedread.com/lib/smil.user.js"/>

  <defs>
<filter id="heavycloud" color-interpolation-filters="sRGB" x="0%" y="0%" height="100%" width="100%">
  <feTurbulence type="fractalNoise" result="cloudbase" baseFrequency=".0025" numOctaves="5" seed="24"/>

    <feColorMatrix in="cloudbase" type="hueRotate" values="0" result="cloud">
    <animate attributeName="values" from="0" to="360" dur="20s" repeatCount="indefinite"/>
  </feColorMatrix>


  <feColorMatrix in="cloud" result="wispy" type="matrix" 
                               values="4 0 0 0 -1
                                       4 0 0 0 -1
                                       4 0 0 0 -1
                                       1 0 0 0 0   
                                       "/>

  <feFlood flood-color="#113388" result="blue"/>

  <feBlend mode="screen" in2="blue" in="wispy"/>

  <feGaussianBlur stdDeviation="4"/>

  <feComposite operator="in" in2="SourceGraphic"/>

</filter>
  </defs>
  <text x="30" y="380" filter="url(#heavycloud)" font-size="400" font-family="arial" stroke-color="blue" font-weight="bold" kerning="-75" font-stretch="condensed">SVG!</text>


</svg>

如何为 feTurbulence 设置动画以显示连续

How to animate feTurbulence to appear continuous

html

svg-filters

svg-animate