Ritardo animazione SVG per ogni ripetizione

Vorrei aggiungere un ritardo a ciascuna iterazione di un ciclo di animazione SVG. Ecco un semplice esempio.Ritardo animazione SVG per ogni ripetizione

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

Uso begin ritarda solo la prima iterazione, quindi c'è un modo per ritardare ogni iterazione?

fonte

2015-07-29 Ben Murden

È possibile aggiungere l'evento end di un elemento animato SMIL all'attributo begin.
Inoltre, è possibile aggiungere più valori, separati da ; a questo attributo begin:

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

fonte

2015-07-29 03:55:48 Kaiido

Marvelous, grazie! All'inizio ero confuso, perché non mi ero reso conto che questo non funziona con 'repeatCount'. –

beh effettivamente 'repeatCount' è ancora attivo e l'evento' end' si attiva alla fine del 'repeatCount 'finito. – Kaiido

Suppongo che dovrei essere più specifico e dire che l'animazione non finisce mai se hai 'repeatCount =" indefinite "' - l'evento 'end' non viene mai raggiunto! Non vedo una menzione specifica di un valore predefinito su MDN, ma presumo che sia impostato su 1 se non definito. –

Penso che quello che state cercando è l'additivo/attributi cumulativa del svg. Questo è un esempio che ho ricevuto da 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>

Infatti ecco un exaample migliore (stessa fonte)

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>

fonte

2015-07-29 04:00:38

Grazie per la risposta, ma non penso che questo risolva specificamente la domanda. Avevo bisogno di un ritardo su un numero indefinito di ripetizioni, dove questi esempi sembrano essere finiti. –

Definire ciclo manichino; imposta l'orario di inizio relativo. Vedere 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>

fonte

2015-07-29 07:12:05

Ritardo animazione SVG per ogni ripetizione

risposta

Problemi correlati