nicht angemeldet
[SVG] Animationsattribute ändern, ohne Animation zu resetten
Hi,
ich versuche, die Dauer eines Animationsdurchlaufs (z.B. "dur"-Attribut bei animate Transform und type="rotate"), also letztendlich in meinem Beispiel die Geschwindigkeit der Drehung dynamisch, also zur Laufzeit zu ändern. Die Rotation läuft ohne Ende, und mit dem Auslösen einer Funktion wird nun der Wert des "dur"-Attributs verändert.
Problem:
Dies hat allerdings immer zur Folge, dass die Animation wieder bei ihrer Ausgangsposition beginnt (im Beispiel also bei einem Drehwinkel von 0°). Lässt sich das durch einen Trick verhindern?
Ich bin für jede Idee dankbar,
norro
PS: "Selbstgebastelte" Drehungen per Javascript kann ich leider nicht benutzen. Ich bin auf die Animation von SVG angewiesen
-
Mit dem Ulead Gifanimator krissu sowas am besten hin! Animationen erstellen oder auch die Geschwindikeit bestimmen und so...
Hi,
ich versuche, die Dauer eines Animationsdurchlaufs (z.B. "dur"-Attribut bei animate Transform und type="rotate"), also letztendlich in meinem Beispiel die Geschwindigkeit der Drehung dynamisch, also zur Laufzeit zu ändern. Die Rotation läuft ohne Ende, und mit dem Auslösen einer Funktion wird nun der Wert des "dur"-Attributs verändert.
Problem:
Dies hat allerdings immer zur Folge, dass die Animation wieder bei ihrer Ausgangsposition beginnt (im Beispiel also bei einem Drehwinkel von 0°). Lässt sich das durch einen Trick verhindern?Ich bin für jede Idee dankbar,
norro
PS: "Selbstgebastelte" Drehungen per Javascript kann ich leider nicht benutzen. Ich bin auf die Animation von SVG angewiesen
-
Hallo,
Mit dem Ulead Gifanimator
Schön, dass du wenigstens den Titel des Postings gelesen hast: "SVG".
Grüße
Thomas
-
-
Hallo,
ich versuche, die Dauer eines Animationsdurchlaufs (z.B. "dur"-Attribut bei animate Transform und type="rotate"), also letztendlich in meinem Beispiel die Geschwindigkeit der Drehung dynamisch, also zur Laufzeit zu ändern. Die Rotation läuft ohne Ende, und mit dem Auslösen einer Funktion wird nun der Wert des "dur"-Attributs verändert.
Daraus schieße ich, dass du ein einem <animate>-Element bist.
Du könntest versuchen mit den "begin", "end" und fill="freeze" Attributen etwas herumzuspielen:
[http://www.w3.org/TR/2001/REC-smil-animation-20010904/#BeginAttribute]
In die eine animation wirst du vielleicht nicht direkt eingreifen können, aber nach Ablauf einer Rotation, kannst du eine neue Animation erstellen, die auf die alte aufbaut. (kleiner Auszug am Ende um zu verdeutlichen was ich meine, ist etwas ähnliches was du möchtest, nur die Attribute nütze ich anderes)Problem:
Dies hat allerdings immer zur Folge, dass die Animation wieder bei ihrer Ausgangsposition beginnt (im Beispiel also bei einem Drehwinkel von 0°). Lässt sich das durch einen Trick verhindern?Da würde ich versuchen mit dem additiv="sum" oder besser vielleicht accumlate="sum" zu arbeiten:
http://www.w3.org/TR/2001/REC-SVG-20010904/animate.html#AdditionAttributesGrüße
Thomas-----
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="600px" height="600px"><!-- viewBox="0 0 1000 600" --><g transform="translate(250 250) scale(0.81)">
<polygon id="stern" points="0,-50 31,-158 19,-46 89,-135 35,-35 134,-90 46,-19 158,-32 50,0 158,31 46,19 133,89 35,35 89,134 19,46 31,158 0,50 -32,158 -19,47 -90,134 -36,35 -134,89 -47,19 -158,31 -50,0 -158,-32 -46,-19 -134,-89 -36,-36 -90,-134 -19,-46 -32,-158 0,-50"
style="fill-opacity:0.7;fill:rgb(214,214,214);stroke:rgb(0,0,0);stroke-width:0.5pt">
<animateTransform xlink:href="#stern" id="sternzu" attributeName="transform" type="scale" from="1" to="0" begin="indefinite" dur="10s" fill="freeze" />
<!-- wider einfahren -->
<animateTransform xlink:href="#stern" id="sternauf" attributeName="transform" type="scale" from="0" to="1" begin="indefinite" dur="10s" fill="freeze" />
</polygon>
</g><a xlink:href="#sternzu" title="animation beginn der linkanimantion">
<circle cx="221" cy="97" r="22" opacity="0.5" style="fill:silver;stroke:rgb(255,0,0);stroke-width:1pt">
<animate id="sternzu_kreisein1" attributeName="r" attributeType="XML" to="127" dur="10s" begin="sternzu.begin" fill="freeze" />
<animate id="sternzu_kreisein2" attributeName="cx" attributeType="XML" begin="sternzu_kreisein1.begin" dur="10s" fill="freeze" to="250" />
<animate id="sternzu_kreisein3" attributeName="cy" attributeType="XML" begin="sternzu_kreisein1.begin" dur="10s" fill="freeze" to="250" />
<animate attributeName="opacity" attributeType="CSS" begin="sternzu_kreisein1.begin" dur="10s" fill="remove" values="0.5;0.7"/>
<!-- wieder an seinen platz bringen -->
<animate id="sternauf_kreisaus1" attributeName="r" attributeType="XML" to="22" dur="10s" begin="sternauf.begin" fill="freeze" />
<animate id="sternauf_kreisaus2" attributeName="cx" attributeType="XML" begin="sternauf_kreisaus1.begin" dur="10s" fill="freeze" to="221" />
<animate id="sternauf_kreisaus3" attributeName="cy" attributeType="XML" begin="sternauf_kreisaus1.begin" dur="10s" fill="freeze" to="97" />
<animate attributeName="opacity" attributeType="CSS" begin="sternauf_kreisaus.begin" dur="10s" fill="remove" values="0.7;0.5"/>
</circle>
</a>
<a xlink:href="#sternauf">
<circle cx="150" cy="220" r="7.5" class="button" visibility="visible" style="fill:#669900;" />
<circle cx="150" cy="235" r="7.5" class="button" visibility="visible" style="fill:#ffcc00;" />
<circle cx="150" cy="250" r="7.5" class="button" visibility="visible" style="fill:#ccff00;" />
<circle cx="150" cy="265" r="7.5" class="button" visibility="visible" style="fill:#0099ff;" />
</a>
</svg> -
Hallo,
Problem:
Dies hat allerdings immer zur Folge, dass die Animation wieder bei ihrer Ausgangsposition beginnt (im Beispiel also bei einem Drehwinkel von 0°). Lässt sich das durch einen Trick verhindern?Du schreibst, dass Drehungen per JavaScript nicht gewuenscht sind, aber der dur-Attributwert durch eine Funktion veraendert wird. Insofern ist also doch JS im Spiel?!
Falls der Ansatz vom anderen Thomas noch nicht zum Ziel gefuehrt hat und JS nicht ausgeschlossen ist, probiere es mal mit der Aenderung des dur-Wertes via repeat-Ereignis, also onrepeat -- hier mal mit einer Linie demonstriert (dur-Wert wird nach jeweils 360° halbiert):
<!-- Linie mit animierter Transformation -->
<line x1="50" y1="50" x2="150" y2="150" stroke="#F00"><animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="0,100,100" to="360,100,100" begin="0s" dur="10s"
repeatDur="indefinite" fill="freeze"
onrepeat="evt.target.setAttribute('dur',parseFloat(evt.target.getAttribute('dur'))/2);
evt.target.ownerDocument.getElementById('duration').firstChild.nodeValue=evt.target.getAttribute('dur')"/></line>
<!-- Textbereich zur Ausgabe des aktuellen dur-Wertes -->
<text x="20" y="20">dur = <tspan id="duration">10</tspan> s</text>MfG, Thomas