如何为 feTurbulence 设置动画以显示连续
How to animate feTurbulence to appear continuous
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
不要设置基频动画。要获得平滑效果,请使用 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 滤镜用于创建云。通过动画频率值,生成的云被放大或缩小。我希望它们从右向左滑动。 到目前为止我做了:
<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
不要设置基频动画。要获得平滑效果,请使用 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>