Come eseguire il ciclo della sequenza di animazione SVG?

Ho sequenza di animationTransform:Come eseguire il ciclo della sequenza di animazione SVG?

<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="30" begin="0s" dur="0.4s" fill="freeze"/> 
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="30" to="0" begin="0.4s" dur="0.4s" fill="freeze"/>

Se possibile ciclo questa sequenza senza utilizzare lo script?

Posso impostare l'animazione individuale in loop utilizzando repeatCount="indefinite" in modo da eseguire il ciclo dell'intera sequenza in ordine.

fonte

2010-09-02 serg

Già calcolato. Soluzione per coloro che sono interessati:

<animateTransform id="anim1" attributeName="transform" attributeType="XML" type="rotate" from="0" to="30" begin="0s; anim2.end" dur="0.4s" fill="freeze"/> 
<animateTransform id="anim2" attributeName="transform" attributeType="XML" type="rotate" from="30" to="0" begin="anim1.end" dur="0.4s" fill="freeze"/>

fonte

2010-09-02 19:05:54 serg

Lavori in (oold) Firefox 10, non funziona in (up-to-date) Chrome 32, solo se qualcuno incontra la stesso problema. E alcuni link utili che descrivono tutte le funzionalità del tempo di animazione: [W3C SVG 1.1 Spec.] (Http://www.w3.org/TR/SVG/animate.html#TimingAttributes), [Developer.Mozilla.org] (https : //developer.mozilla.org/en-US/docs/Web/SVG/Attribute/begin). – Jeyekomon

Posso confermare che questo non funziona in Chrome 34. – hamishtaplin

Si può anche solo ciclo all'interno di un singolo animateTransform fornendo un attributo values con un punto e virgola elenco separato:

<animateTransform attributeName="transform" type="rotate" 
    values="0;30;0" begin="0s" dur="0.8s" fill="freeze" 
    repeatCount="indefinite" />

Here's an example (check-in Firefox 4.0 e Cromo).

fonte

2010-12-22 11:43:46 robertc

Amo questa soluzione. Potresti consigliare dove trovare la documentazione dell'attributo 'valori' di animateTransform SVG? Sfortunatamente è una parola piuttosto comune per una normale ricerca sul web. Grazie! – jtheletter

@janaspage Mi sono imbattuto nella documentazione per l'attributo dei valori qui: http://www.w3.org/TR/smil-animation/#ValuesAttribute – chrisM

è anche possibile aggiungere/sottrarre (milli) secondi:

begin="anim2.end-500ms"

fonte

2011-11-01 10:25:20

Come eseguire il ciclo della sequenza di animazione SVG?

risposta

Problemi correlati