nicht angemeldet
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#AdditionAttributes
Grüß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>