SVG animasyon gecikmesi

Question

Bir SVG animasyon döngüsünün her yinelemesine gecikme eklemek istiyorum. İşte basit bir örnek.

<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px"> 
 
    <circle cx="50" cy="50" r="15" fill="blue"> 
 
    <animate id="op" attributeType="CSS" attributeName="opacity" 
 
      from="1" to="0" dur="3s" repeatCount="indefinite" /> 
 
    </circle> 
 
</svg>

yüzden her yinelemeyi geciktirmek için bir yol yoktur, sadece ilk iterasyon geciktirir begin kullanarak?

Answer 1

SMIL animasyonlu öğenin end olayını begin özniteliğine ekleyebilirsiniz.
Ayrıca, bu begin özniteliği için ; ayrılmış birden fazla değer ekleyebilirsiniz:

<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px"> 
 
    <circle cx="50" cy="50" r="15" fill="blue"> 
 
    <animate id="op" attributeType="CSS" attributeName="opacity" 
 
      from="1" to="0" dur="3s" begin="3s;op.end+3s" /> 
 
    </circle> 
 
</svg>

Answer 2

ne aradığınız svg toplamsal/birikimli nitelikleri olduğunu düşünüyorum. Bu i (aynı kaynak) daha iyi bir exaample burada Aslında css tricks

svg { 
 
    border: 3px solid #eee; 
 
    display: block; 
 
    margin: 1em auto; 
 
}

<svg width="500" height="100"> 
 
    <circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" /> 
 

 
    <animate xlink:href="#orange-circle" attributeName="cx" from="0" to="100" additive="sum" repeatCount="3" calcMode="spline" keyTimes="0;1" keySplines=".42 0 1 1" dur="1s" begin="click" fill="freeze" /> 
 
</svg>

var olan bir örnek

svg { 
 
    border: 3px solid #eee; 
 
    display: block; 
 
    margin: 1em auto; 
 
}

<svg width="500" height="150"> 
 
    <style> 
 
    rect { 
 
     -moz-transform-origin: 75px 75px; 
 
     transform-origin: 50% 50%; 
 
    } 
 
    </style> 
 
    <rect id="deepPink-rectangle" width="50" height="50" x="50" y="50" fill="deepPink" /> 
 
    
 
    <animateTransform 
 
      xlink:href="#deepPink-rectangle" 
 
      attributeName="transform" 
 
      attributeType="XML" 
 
      type="rotate" 
 
      from="0 75 75" 
 
      to="360 75 75" 
 
      dur="2s" 
 
      begin="0s; 5s; 9s; 17s;" 
 
      end="2s; 8s; 15s; 25s;" 
 
      fill="freeze" 
 
      restart="whenNotActive" 
 
      /> 
 
    
 
</svg>

Answer 3

kukla döngü tanımlamak ve bağıl başlangıç ​​zamanını ayarla. How to make SVG Loop Animation?

<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px"> 
 
    <rect> 
 
    <animate id="o1" begin="0;o1.end" dur="10s" 
 
    attributeName="visibility" from="hide" to="hide"/> 
 
    </rect> 
 
    <circle fill="orange" cx="-50" cy="100" r="20"> 
 
    <animate begin="o1.begin" 
 
    attributeName="cx" from="250" to="50" dur="5.05s"/> 
 
    </circle> 
 
    <circle fill="blue" cx="150" cy="100" r="50" /> 
 
    <circle fill="orange" cx="-50" cy="100" r="20"> 
 
    <animate begin="o1.begin+5s" 
 
    attributeName="cx" from="50" to="250" dur="5.05s"/> 
 
    </circle> 
 
</svg>