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:
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 endlichrepeatCount“
– 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.
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.
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:
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
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
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.
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
10137800cookie-checkSVG-Animationsverzögerung bei jeder Wiederholungyes
Fand diesen Link etwas hilfreich: srufaculty.sru.edu/david.dailey/svg/svgScaleinHTML.htm
– Justin
26. Februar 2020 um 11:42 Uhr