SVG mit Pingpong-Effekt

[Sabina]

Hallo,

Ich habe meine erste SVG-Grafik zum "zappeln" gebracht , aber es gibt ein Problem. ich habe eine große gelbe Ellipse vor der ein schwarzer Ball immer größer und kleiner werden kann, derzeit gibt es zwei animationen: die erste beginnte bei 0s und sorgt für das größer werden die zweite beginnt nach 5s (Dauer der ersten Animation), wenn ich aber beide auf unendliche Wiederholung stelle, gibt es nach dem ersten Durchlauf keine Verzögerung mehr zwischen beiden und nur noch die zweite Animation (das Schrumpfen) wird angzeigt. Gibt es eine Möglichkeit den schwarzen Kreis kontinuierlich wachsen und schrumpfen zu lassen? (Quelltext is im Anhang)

Danke,
Sabina

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="23.12cm" height="15.9cm"
     text-decoration="none">
  <ellipse id="EllipseOne" cy="112px" cx="327px" rx="164px" ry="62px"
        style="stroke: #FFFF00; fill: #FFFF00"/>

<ellipse id="pupil" cy="111px" cx="322px" rx="0px" ry="0px"
        style="stroke: #000000; fill: #000000">

<animate attributeName="rx" attributeType="XML" begin="0s" dur="5s"
fill="freeze" from="0" to="47" repeatDur="indefinite" />

<animate attributeName="rx" attributeType="XML" begin="5s" dur="5s"
fill="remove" from="47" to="0" repeatDur="indefinite" />

<animate attributeName="ry" attributeType="XML" begin="0s" dur="5s"
fill="freeze" from="0" to="47" repeatDur="indefinite" />

<animate attributeName="ry" attributeType="XML" begin="5s" dur="5s"
fill="remove" from="47" to="0" repeatDur="indefinite" />

</ellipse>
</svg>

[Thomas J.S.]

Hallo Sabina,

Ich habe meine erste SVG-Grafik zum "zappeln" gebracht , aber es gibt ein Problem. ich habe eine große gelbe Ellipse vor der ein schwarzer Ball immer größer und kleiner werden kann, derzeit gibt es zwei animationen: die erste beginnte bei 0s und sorgt für das größer werden die zweite beginnt nach 5s (Dauer der ersten Animation), wenn ich aber beide auf unendliche Wiederholung stelle, gibt es nach dem ersten Durchlauf keine Verzögerung mehr zwischen beiden und nur noch die zweite Animation (das Schrumpfen) wird angzeigt. Gibt es eine Möglichkeit den schwarzen Kreis kontinuierlich wachsen und schrumpfen zu lassen?

Ich würde hier satt die zweite Ellipse einen Kreis nehmen:

<circle id="pupil" cy="111px" cx="322px" r="0px" style="stroke: #000000; fill: #000000">
<animate id="p1" attributeName="r" attributeType="XML" begin="0; p2.begin+5s" dur="5s" fill="freeze" from="0" to="47" />
<animate id="p2" attributeName="r" attributeType="XML" begin="p1.begin+5s" dur="5s" fill="freeze" from="47" to="0"  />
</circle>

Grüße
Thomas

[Thomas Meinike]

Hallo Thomas,

Ich würde hier satt die zweite Ellipse einen Kreis nehmen:

<circle id="pupil" cy="111px" cx="322px" r="0px" style="stroke: #000000; fill: #000000">
<animate id="p1" attributeName="r" attributeType="XML" begin="0; p2.begin+5s" dur="5s" fill="freeze" from="0" to="47" />
<animate id="p2" attributeName="r" attributeType="XML" begin="p1.begin+5s" dur="5s" fill="freeze" from="47" to="0"  />
</circle>

Noch'n Tick kuerzer und einfacher mit anderen Werten anzupassen:
begin="0; p2.begin+5s" --> begin="0; p2.end"
bzw.
begin="p1.begin+5s" --> begin="p1.end"

Grüße
Thomas

Ebenso ;-)

[Thomas J.S.]

Hallo Thomas,

Noch'n Tick kuerzer und einfacher mit anderen Werten anzupassen:
begin="0; p2.begin+5s" --> begin="0; p2.end"
bzw.
begin="p1.begin+5s" --> begin="p1.end"

Stimmt, so geht auch.
Was mir jetzt dabei eingefallen ist, welche Lösung ist "besser"?
Was ich meine: bei meiner Lösung wird eine Zeitlinie begonnen (bei 0s) die dann mit 5s Schritten erhöht wird. Bei dir wird eine 10s-ige Schleife abgespielt und dann das ganze immer wieder wiederholt.
Haben dieses unterschiedliche Lösungen eine Auswirkung auf die darstellende Software u/o System?
Wäre mal interessant zu wissen.

Grüße
Thomas

Ebenso ;-)

Nochmal so :-)

[Thomas Meinike]

Hallo Thomas,

Was mir jetzt dabei eingefallen ist, welche Lösung ist "besser"?
Was ich meine: bei meiner Lösung wird eine Zeitlinie begonnen (bei 0s) die dann mit 5s Schritten erhöht wird. Bei dir wird eine 10s-ige Schleife abgespielt und dann das ganze immer wieder wiederholt.
Haben dieses unterschiedliche Lösungen eine Auswirkung auf die darstellende Software u/o System?
Wäre mal interessant zu wissen.

Sind beide Varianten vom Ablauf her wirklich verschieden? Es bleibt ja dur="5" auch bei meinem Ansatz jeweils erhalten. Nur habe ich nicht px.begin+5s sondern px.end verwendet, was wegen end=begin+dur zeitlich zusammenfaellt.

Performanceunterschiede fallen mir mit dem ASV 3.0 jedenfalls nicht auf. Von der Wartbarkeit sehe ich ggf. Vorteile bei der kuerzeren Version.

MfG, Thomas

BTW: Fuer eine etwas bessere Optik sollte vielleicht noch der Mittelpunkt des Kreises mit dem der Ellipse zusammenfallen.

[Thomas J.S.]

Hallo Thomas, ;-)

Sind beide Varianten vom Ablauf her wirklich verschieden? Es bleibt ja dur="5" auch bei meinem Ansatz jeweils erhalten. Nur habe ich nicht px.begin+5s sondern px.end verwendet, was wegen end=begin+dur zeitlich zusammenfaellt.

Es kann natürlich sein, dass ich einen logischen Fehler begehe, aber:

1. Lösung: Beginn bei 0s dann lief es 5s lang, beginn 2. anim.
   [hier wird der beginn von anim 1 um 5s vom beginn der 2. anim erhöht: 5+5 = 10] der 2. anim lief jetzt 5s und dann beginnt der erste wieder [hier wird der Beginn von 2. anim um 5s vom Beginn der 2. anim erhöht (der jetzt bei 10s leigt) also 10+5 = 5] ... etc.

2. Lösung: Beginn bei 0s der 1. anim lief 5s und endet. Mit dem Ende beginnt gleichzeitig die 2. anmi, lief 5s und endet. Mit dem Ende beginnt die 1. anmi wieder.
Also keine Zeiterhöhung, sonder eigentlich ein 2x5s Wiederhlungsschleife.

Bei näherem Betrachten gefällt mir deine Lösung besser, denn darin wird nur eine einzige Messwert benötigt (5s) und keine andere mathematische Logik.

Performanceunterschiede fallen mir mit dem ASV 3.0 jedenfalls nicht auf. Von der Wartbarkeit sehe ich ggf. Vorteile bei der kuerzeren Version.

Na ja, bei so einem kleinen Beispiel wirken sich solche Fragen wohl nur als "nicht Messbar" aus.

Grüße
Thomas

[Sabina]

Danke für die Vorschläge, werde ich probieren.