如何使fe骚动动画显得连续

时间:2015-04-30 11:14:37

标签: html svg-filters svg-animate

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>
&#13;
&#13;
&#13;

如果仔细观察,5秒后动画会重复,应该如此!但它看起来并不那么漂亮。

我知道这个过滤器用于创建逼真的云状结构。我们如何继续持续移动这些云?

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

在给定的例子中,我有基频的动画值。由于没有更多动画属性。

如何使这个动画看起来连续?我们是否使用perlin噪声发生器结合矩阵和置换贴图在这个湍流生成的东西上并以某种方式动画一起? (只是头脑风暴......)

任何帮助,想法,方法,片段,真诚地感谢。

为简单起见,这可能是黑色和白色,但云动画仍然不是持续的。 Bonus snippet

1 个答案:

答案 0 :(得分:2)

不要为基频设置动画。为了获得平滑效果,请使用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>