SVG-animation die Deckkraft auf Schleife

Ich würde gerne eine svg-Pfad der Deckkraft geht es von 0 auf 100 wieder auf 0 und 100 auf einer kontinuierlichen Schleife.

Bisher kann ich es animieren von 0 auf 100, aber nicht wieder zurück,

Irgendwelche Ideen?

Dank

InformationsquelleAutor der Frage John Vaughan | 2012-08-06

  1. 19

    Haben Sie zwei separate Animationen - eine für die Deckkraft erhöhen und eine für es verringert. Jeder beginnt, wenn das andere endet, aber der erste, beginnt auch bei 0s. Hier ist ein Beispiel für eine rect:

    <rect x="10" y="10" width="20" height="20">
    <animate id="animation1"
             attributeName="opacity"
             from="0" to="1" dur="1s"
             begin="0s;animation2.end" />
    <animate id="animation2"
             attributeName="opacity"
             from="1" to="0" dur="1s" 
             begin="animation1.end" />
</rect>

    InformationsquelleAutor der Antwort Peter Collingridge

  2. 38

    Animieren Sie eine beliebige Anzahl von Werten mithilfe der values - Attribut, wie hier:

    <rect x="10" y="10" width="20" height="20">
    <animate attributeName="opacity"
             values="0;1;0" dur="1s"
             repeatCount="indefinite"/>
</rect>

    Dass animieren von Deckkraft 0, opacity 1 (100%) und dann wieder auf 0 wieder über dem Kurs von 1 Sekunde.

    InformationsquelleAutor der Antwort Erik Dahlström

Schreibe einen Kommentar