如何完美循环 feTurbulence 动画

发布于 2025-01-16 22:16:48 字数 993 浏览 0 评论 0原文

我正在使用以下内容并第一次尝试 SMIL 动画。

如果你看一下，你会发现动画不流畅，最后有一个跳跃。

我怎样才能让它顺利运行而不发生任何跳跃？

<svg class="layer1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
      <defs>
    <filter id="trip">
        <feTurbulence id="turbulence" baseFrequency="10" numOctaves="20" seed="10" stitchTiles="stitch">
            <animate id="noiseAnimate" attributeName="baseFrequency" attributeType="XML" from="10" to="15" begin="0s" dur="5s" repeatCount="indefinite"></animate>
        </feTurbulence>
        <feDisplacementMap in="SourceGraphic" scale="1"></feDisplacementMap>
      </filter>
 
</defs>
<rect class="bg" id="bg" width="200" height="200" fill="black">
</rect>
<rect class="bg" id="bg" x="50" y="50" width="30" height="30" fill="white" filter="url(#trip)">
</rect>
</svg>

原文

I am working with this following and trying SMIL animation for the first time.

If you take a look, you would realize that the animation is not smooth, there is a jump at the end.

How can I make this to run smoothly without any jump?

<svg class="layer1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
      <defs>
    <filter id="trip">
        <feTurbulence id="turbulence" baseFrequency="10" numOctaves="20" seed="10" stitchTiles="stitch">
            <animate id="noiseAnimate" attributeName="baseFrequency" attributeType="XML" from="10" to="15" begin="0s" dur="5s" repeatCount="indefinite"></animate>
        </feTurbulence>
        <feDisplacementMap in="SourceGraphic" scale="1"></feDisplacementMap>
      </filter>
 
</defs>
<rect class="bg" id="bg" width="200" height="200" fill="black">
</rect>
<rect class="bg" id="bg" x="50" y="50" width="30" height="30" fill="white" filter="url(#trip)">
</rect>
</svg>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

永不分离 2025-01-23 22:16:48

让我们忽略您的动画是否是一个好的选择的问题，只看一下所涉及的语法。

<animate ... from="10" to="15" repeatCount="indefinite"></animate>

此动画的行为与 CSS property< 相同/a> 动画方向：正常：

[E]每次动画循环时，动画都会重置到开始状态并重新开始。

从 10 移动到 15 后，它会跳回到 10 并重新开始。

虽然 CSS 具有值 animation-direction:alternate 来描述平滑地前后移动的动画，但 SMIL 不存在这种情况。相反，您必须描述具有三个值的运动：起始值、结束值和再次起始值。这不能用 from 和 to 属性来描述，而是用 值。

此外，您还必须设置 keyTimes 属性。在 0...1 的间隔中，它描述了相对于简单持续时间何时达到该值。

<animate ... values="10;15;10" keyTimes="0;.5;1" repeatCount="indefinite"></animate>

注意：要设置 baseFrequency 动画，您必须设置 stitchTiles="noStitch"，否则频率会以离散步骤更改，导致 Perlin 单元大小始终是原始过滤器区域大小的整数部分。

<svg class="layer1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
      <defs>
    <filter id="trip">
        <feTurbulence id="turbulence" baseFrequency="10" numOctaves="20"
                      seed="10" stitchTiles="noStitch">
            <animate id="noiseAnimate" attributeName="baseFrequency" attributeType="XML"
                     values="10;15;10" keyTimes="0;.5;1" begin="0s" dur="5s"
                     repeatCount="indefinite"></animate>
        </feTurbulence>
        <feDisplacementMap in="SourceGraphic" scale="1"></feDisplacementMap>
      </filter>
 
</defs>
<rect class="bg" id="bg" width="200" height="200" fill="black">
</rect>
<rect class="bg" id="bg" x="50" y="50" width="30" height="30" fill="white" filter="url(#trip)">
</rect>
</svg>

Let's ignore the question whether your animation is a good choice, and just look at the syntax involved.

<animate ... from="10" to="15" repeatCount="indefinite"></animate>

The behavior of this animation is just the same as the CSS property animation-direction: normal:

[E]ach time the animation cycles, the animation will reset to the beginning state and start over again.

After moving from 10 to 15, it jumps back to 10 and starts over.

While CSS has a value of animation-direction: alternate to describe an animation that moves smoothly forth and back, the same does not exist for SMIL. Instead, you have to describe a movement that has three values: the start value, the end value, and the start value again. This cannot be described with the from and to attributes, but with values.

Additionally, you have to set the keyTimes attribute. In an interval of 0...1 it describes when, relative to the simple duration, the value is reached.

<animate ... values="10;15;10" keyTimes="0;.5;1" repeatCount="indefinite"></animate>

Note: For animating baseFrequency, you have to set stitchTiles="noStitch", as otherwise the frequency is changed in such discrete steps that the Perlin cell size is always an integral fraction of the primitive filter region size.

<svg class="layer1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
      <defs>
    <filter id="trip">
        <feTurbulence id="turbulence" baseFrequency="10" numOctaves="20"
                      seed="10" stitchTiles="noStitch">
            <animate id="noiseAnimate" attributeName="baseFrequency" attributeType="XML"
                     values="10;15;10" keyTimes="0;.5;1" begin="0s" dur="5s"
                     repeatCount="indefinite"></animate>
        </feTurbulence>
        <feDisplacementMap in="SourceGraphic" scale="1"></feDisplacementMap>
      </filter>
 
</defs>
<rect class="bg" id="bg" width="200" height="200" fill="black">
</rect>
<rect class="bg" id="bg" x="50" y="50" width="30" height="30" fill="white" filter="url(#trip)">
</rect>
</svg>

回复收藏 0 原文

~没有更多了~