1

I am using this code for image transition.I need to add 4 more images. But I cannot find it. How to add more images in this image transition using svg filters? Also how to control transition speed? It make the home page transition easier.so i am looking to add 4 more images.

<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>

How to add more images in this image transition using svg filters?

Jasmine Joseph
  • 287
  • 2
  • 21
  • The `dur` attribute controls the speed of the transition (currently 8 seconds), and the answer to [this question](https://stackoverflow.com/q/8455773/1679849) explains how you can use Javascript to trigger SVG animations. Please try working on this yourself for a bit; your question as it stands doesn't show much effort on your part, and is likely to be closed as it is rather too broad. – r3mainer May 11 '18 at 14:46

1 Answers1

1

No wonder you had problems understanding how this thing works. Timing had been hidden in a list of overly complicated values. First, look at the <animate> element for the <feFuncA> filter function. What you need to transition from one image to the next is to change the slope attribute from 0 to 2. Write it like this:

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

The dur="5s" defines the complete time the animation takes. The keyTimes list names three points in time: 0 equals 0s, 0.4 equals 2s and 1 equals 5s. (The first value must be 0 and the last 1.) For these points in time, the values list gives values for the slope attribute. Between 0s and 2s the value remains at 0, which means the image named in the <feImage> element remains visible. Between 2s and 5s, the image continuously transitions to the one named in the <image> element further down. After that, the animation jumps back to the first image again and repeats. (You should be able to figure out how to change these values for other timings.)

Now, to get more images shown you can do this: the moment the animation jumps back to the first image, you swap that <feImage> for the one that was just transitioned to, and swap the one to be revealed next into the <image>. This animation looks like this:

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

Note that the dur value is now 20s, four times the duration of the transition animation for four pictures, so that the image swap happens every 5 seconds.

The animation for the <image> element looks the same, but lists the pictures begining with the second url.

<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>
ccprog
  • 20,308
  • 4
  • 27
  • 44