Question

我正在使用此代码进行图像转换。我需要再添加4个图像。但我找不到它。如何使用svg过滤器在此图像过渡中添加更多图像？另外如何控制转换速度？它使主页过渡更容易。所以我想再添加4个图像。

＆＃13;

<DOCTYPE! html>
<html>
<head>
  <meta charset="utf-8" />
    <meta name="robots" content="index, follow">
    <meta name="keywords" content="">
    <meta name="description" content=""/>
    <title>AC</title>
  </head>
<body>
  <svg width="1600px" height="800px">
<defs>
  <filter id="turbulent-dissolve" x="0%" y="0%">
  <feTurbulence type="fractalNoise" baseFrequency=".012"/>
   <feColorMatrix type="luminanceToAlpha"/>
   <feComponentTransfer>
      <feFuncA type="linear" slope="0">
        <animate attributeName="slope" values="0;0;0;0;0;0.5;1;1.5;2;2;2;2;2;2;1.5;1;0.5;0" dur="8s" repeatCount="indefinite"/>
     </feFuncA>
    </feComponentTransfer>
    
    <feComponentTransfer>
      <feFuncA type="discrete" tableValues="0 1"/>
    </feComponentTransfer>
     <feGaussianBlur stdDeviation="1"/>
    <feComposite operator="in" in="SourceGraphic" result="overlay"/>
    
    <feImage xlink:href="https://ykob.github.io/glsl-dissolve/img/osaka02.jpg" width="800" height="600" result="underlay"/>
    <feComposite operator="over" in="overlay" in2="underlay"/>
  </filter>
  </defs>

  
  <image filter="url(#turbulent-dissolve)" width="800" height="600" xlink:href="https://ykob.github.io/glsl-dissolve/img/osaka01.jpg"/>
  
</svg>
</body>
</html>

＆＃13;

如何使用svg过滤器在此图像过渡中添加更多图像？

Answer 1

难怪你在理解这件事如何运作方面遇到了问题。时间安排隐藏在过于复杂的值列表中。首先，查看<animate>过滤器函数的<feFuncA>元素。从一个图像转换到下一个图像所需的是将slope属性从0更改为2.将其写为：

<animate attributeName="slope" repeatCount="indefinite"
         values="0;0;2" keyTimes="0;0.4;1" dur="5s" />

dur="5s"定义动画所需的完整时间。 keyTimes列表指出三个时间点：0等于0，0.4等于2，1等于5。（第一个值必须为0，最后一个为1.）对于这些时间点，values列表给出了slope属性的值。在0和2之间，值保持为0，这意味着<feImage>元素中指定的图像仍然可见。在2s和5s之间，图像不断向下转换到<image>元素中命名的图像。之后，动画再次跳回到第一张图像并重复。（您应该能够弄清楚如何为其他时间更改这些值。）

现在，要显示更多图像，您可以执行以下操作：当动画跳回到第一张图像时，您将<feImage>换成刚转换到的图像，并交换要显示的图像在<image>旁边。这个动画看起来像这样：

<feImage xlink:href="" width="800" height="600" result="underlay">
  <animate attributeName="xlink:href" repeatCount="indefinite"
           values="url1;url2;url3;url4" dur="20s" />
</feImage>

请注意，dur值现在是20秒，是四张图片的过渡动画持续时间的四倍，因此图像交换每5秒发生一次。

<image>元素的动画看起来相同，但列出了以第二个网址开头的图片。

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1600px" height="800px">
<defs>
  <filter id="turbulent-dissolve" x="0%" y="0%">
  <feTurbulence type="fractalNoise" baseFrequency=".012"/>
   <feColorMatrix type="luminanceToAlpha"/>
   <feComponentTransfer>
      <feFuncA type="linear" slope="0">
        <animate attributeName="slope" repeatCount="indefinite"
                 values="0;0;2" keyTimes="0;0.4;1" dur="5s" />
     </feFuncA>
    </feComponentTransfer>
    
    <feComponentTransfer>
      <feFuncA type="discrete" tableValues="0 1"/>
    </feComponentTransfer>
     <feGaussianBlur stdDeviation="1"/>
    <feComposite operator="in" in="SourceGraphic" result="overlay"/>
    
    <feImage xlink:href="" width="800" height="600" result="underlay">
      <animate attributeName="xlink:href" repeatCount="indefinite"
               values="https://ykob.github.io/glsl-dissolve/img/osaka01.jpg;
                       https://ykob.github.io/glsl-dissolve/img/osaka02.jpg;
                       https://ykob.github.io/glsl-dissolve/img/osaka03.jpg;
                       https://ykob.github.io/glsl-dissolve/img/osaka04.jpg"
               dur="20s" />
</feImage>
    <feComposite operator="over" in="overlay" in2="underlay"/>
  </filter>
  </defs>

  
  <image filter="url(#turbulent-dissolve)" width="800" height="600" xlink:href="">
    <animate attributeName="xlink:href" repeatCount="indefinite"
             values="https://ykob.github.io/glsl-dissolve/img/osaka02.jpg;
                     https://ykob.github.io/glsl-dissolve/img/osaka03.jpg;
                     https://ykob.github.io/glsl-dissolve/img/osaka04.jpg;
                     https://ykob.github.io/glsl-dissolve/img/osaka01.jpg"
             dur="20s" />

</svg>

＆＃13;

如何使用svg过滤器在图像过渡中添加更多图像？

1 个答案: