SVG-Animationsverzögerung bei jeder Wiederholung

Lesezeit: 7 Minuten

Benutzer-Avatar
Ben Murden

Ich möchte jeder Iteration einer SVG-Animationsschleife eine Verzögerung hinzufügen. Hier ist ein einfaches Beispiel.

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

Verwenden begin verzögert nur die erste Iteration, also gibt es eine Möglichkeit zu verzögern jeder Wiederholung?

Sie können die hinzufügen end Ereignis eines animierten SMIL-Elements zum begin Attribut.
Sie können auch mehrere Werte hinzufügen, die durch getrennt sind ; dazu begin Attribut:

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

  • Wunderbar, danke! Ich war anfangs verwirrt, weil ich nicht mitbekommen hatte, dass das mit nicht funktioniert repeatCount.

    – Ben Murden

    29. Juli 2015 um 4:18 Uhr

  • Naja eigentlich repeatCount ist immer noch aktiv und die end Ereignisfeuer am Ende des Endlichen repeatCount.

    – Kaiido

    29. Juli 2015 um 4:24 Uhr

  • Ich nehme an, ich sollte genauer sein und sagen, dass die Animation niemals endet, wenn Sie dies getan haben repeatCount="indefinite" – das end Ereignis wird nie erreicht! Ich sehe keine spezifische Erwähnung eines Standardwerts auf MDN, aber ich gehe davon aus, dass er auf 1 gesetzt ist, wenn er nicht definiert ist.

    – Ben Murden

    29. Juli 2015 um 4:30 Uhr

  • Nun, eigentlich wird es ignoriert, wenn die Dauer festgelegt ist: Spezifikationen aber ja, wenn repeatCount auf gesetzt ist indefinite, end wird niemals feuern. Deshalb sagte ich: “Am Ende des endlich repeatCount“

    – Kaiido

    29. Juli 2015 um 4:38 Uhr

  • Hallo Kaiido, ich sehe in deinem Beispiel keine Wiederholungszählung, warum startet die Animation von alleine neu? In meinem Fall die Animation nicht.

    – Blauer Lovag

    12. Juli 2021 um 13:27 Uhr

Benutzer-Avatar
Danjiro Daiwa

Dummy Loop definieren und relative Startzeit einstellen. Sehen
Wie erstelle ich eine 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>

Benutzer-Avatar
nelsonmau

Unten ein Beispiel für “Augen schließen” … dank der Vorschläge in diesem Thread.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 16"><g>
  <g >
  <ellipse cx="9.45" cy="7.7" rx="0.96" ry="0.96" style="stroke: none; fill: black;">
   <animate id="op" attributeName="ry" attributeType="XML"
             to="0.1"
             begin="3s;op.end+3s" dur="0.15s"
             fill="remove" repeatCount="2"
            />
  </ellipse>
  <ellipse cx="14.6" cy="7.8" rx="0.8" ry="0.8" style="stroke: none; fill: black;">
   <animate id="op" attributeName="ry" attributeType="XML"
             to="0.1"
             begin="3s;op.end+3s" dur="0.15s"
             fill="remove" repeatCount="2"
            />
  </ellipse>
 </g>
</svg>

Benutzer-Avatar
Mahozad

Wenn Sie möchten, dass sich Ihre Animation abwechselt (ähnlich was animation-direction: alternate; funktioniert in CSS) und Sie möchten eine andere Verzögerung für die anfängliche/startende/erste Wiederholung als für nachfolgende Wiederholungen haben, hier biete ich zwei Problemumgehungen. Sehen dieses GitHub-Problem im Repo der SVG-Arbeitsgruppe.

Lösung 1: Verwenden von zwei Animationselementen

<circle fill="#f5ca20" r="5" cx="12" cy="12">
  <animate id="anim1" attributeName="r" dur="1s" fill="freeze" begin="3s; anim2.end + 5s" to="10" keyTimes="0; 1" calcMode="spline" keySplines="0.37, 0, 0.63, 1"/>
  <animate id="anim2" attributeName="r" dur="1s" fill="freeze" begin="anim1.end + 5s"     to="5"  keyTimes="0; 1" calcMode="spline" keySplines="0.37, 0, 0.63, 1"/>
</circle>

Lösung 2: Verwendung einer Kombination aus values und keyTimes Attribute

<circle fill="#f5ca20" r="5" cx="12" cy="12">
  <animate attributeName="r" dur="12s" begin="3s" values="5; 10; 10; 5; 5" keyTimes="0; 0.083; 0.5; 0.583; 1" repeatDur="indefinite" calcMode="spline" keySplines="0.37, 0, 0.63, 1; 0, 0, 1, 1; 0.37, 0, 0.63, 1; 0, 0, 1, 1"/>
</circle>

Bei diesem Ansatz sollten Sie die Gesamtdauer von Animationen plus Verzögerungen berechnen und zuweisen dur und auch berechnen keyTimes Werte für Ihre Dauer. Für mein Beispiel ist die Gesamtdauer 12s und die Zeiten 3 Sek 🡲 1s 🡲 5s 🡲 1s 🡲 5s Karten zu keyTimes="0; 0.083; 0.5; 0.583; 1".

Anmerkungen zu meinen Beispielen

  • calcMode="..." und keySplines="..." sind optional (sie spezifizieren Timing-Interpolation)
  • Die anfängliche Animationsverzögerung beträgt 3 Sekunden
  • Die Animationen (Schrumpfen und Expandieren) nehmen jeweils 1 Sekunde
  • Die Verzögerung vor Beginn des Schrumpfens/Ausdehnens ist 5 Sekunden

Beides führt zu folgendem Ergebnis:

Das animierte Bild

Benutzer-Avatar
Rahel Gallen

Ich denke, wonach Sie suchen, sind die additiven / kumulativen Attribute des SVG. Dies ist ein Beispiel, das ich von bekommen habe 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>

Tatsächlich ist hier ein besseres Beispiel (gleiche Quelle)

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>

  • Danke für Ihre Antwort, aber ich glaube nicht, dass dies speziell auf die Frage eingeht. Ich brauchte eine Verzögerung bei einer unbestimmten Anzahl von Wiederholungen, wo diese Beispiele endlich zu sein scheinen.

    – Ben Murden

    29. Juli 2015 um 4:24 Uhr

Benutzer-Avatar
Cyberritter

Hier ist eine ausgearbeitetere Version von Danjiro Daiwas Beispiel ohne das verborgene Rechteck, um die Animation zu synchronisieren, und ohne die orangefarbenen Kreise aus dem sichtbaren Bereich zu setzen, um sie zu verbergen opacity="0" stattdessen. Es laufen vier Animationen gleichzeitig, a1/a2 für die Bewegung, o1/o2, um die orangefarbenen Doppelgängerkreise auszublenden, wenn sie sich hinter/über den blauen Kreis bewegen, r1-r4, um den Radius zu ändern r und f1-f4 zu ändern fill Farbe.

<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
  <circle fill="#f70" cx="0" cy="100" r="20" opacity="0">
    <animate id="a1" attributeName="cx" begin="0s;a2.end" from="250" to="50" dur="3s"/>
    <animate id="o1" attributeName="opacity" begin="a1.begin" end="a1.end" from="1" to="1"/>
    <animate id="r1" attributeName="r" begin="a1.begin" from="20" to="15" dur="1.5s"/>
    <animate id="r2" attributeName="r" begin="r1.end" from="15" to="20" dur="1.5s"/>
    <animate id="f1" attributeName="fill" begin="a1.begin" from="#f70" to="#c00" dur="1.5s"/>
    <animate id="f2" attributeName="fill" begin="f1.end" from="#c00" to="#f70" dur="1.5s"/>
  </circle>

  <circle fill="blue" cx="150" cy="100" r="50" />

  <circle fill="#f90" cx="0" cy="100" r="20" opacity="0">
    <animate id="a2" attributeName="cx" begin="a1.end" from="50" to="250" dur="2s"/>
    <animate id="o2" attributeName="opacity" begin="a2.begin" end="a2.end" from="1" to="1"/>
    <animate id="r3" attributeName="r" begin="a2.begin" from="20" to="25" dur="1s"/>
    <animate id="r4" attributeName="r" begin="r3.end" from="25" to="20" dur="1s"/>
    <animate id="f3" attributeName="fill" begin="a2.begin" from="#f70" to="#ff0" dur="1s"/>
    <animate id="f4" attributeName="fill" begin="f3.end" from="#ff0" to="#f70" dur="1s"/>
  </circle>
</svg>

  • Danke für Ihre Antwort, aber ich glaube nicht, dass dies speziell auf die Frage eingeht. Ich brauchte eine Verzögerung bei einer unbestimmten Anzahl von Wiederholungen, wo diese Beispiele endlich zu sein scheinen.

    – Ben Murden

    29. Juli 2015 um 4:24 Uhr

1013780cookie-checkSVG-Animationsverzögerung bei jeder Wiederholung

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy

Contact - Terms and Conditions - Privacy Policy