|
<?xml
version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300" height="400" xmlns="http://www.w3.org/2000/svg"
version="1.1">
<title>Bewegungsanimationen, unterschiedeliche Interpolationsarten</title>
<defs>
<path id="bewegungspfad"
d="M 10 50 c 20 4 20 20 40 20 c 20 0 20 -16 40 -20
s 10 40 0 50 s -80 4 -80 0 s -15 -40 0 -50"/>
</defs>
<g transform="translate(10)">
<use xlink:href="#bewegungspfad" fill="none"
stroke="black"/>
<circle cx="0" cy="0" r="10" fill="red">
<animateMotion
begin="0s" dur="6s" repeatDur="2:00"
calcMode="linear">
<mpath xlink:href="#bewegungspfad"/>
</animateMotion>
</circle>
</g>
<g transform="translate(150)">
<use xlink:href="#bewegungspfad" fill="none"
stroke="black"/>
<circle cx="0" cy="0" r="10" fill="yellow">
<animateMotion
begin="0s" dur="6s" repeatDur="2:00"
calcMode="discrete">
<mpath xlink:href="#bewegungspfad"/>
</animateMotion>
</circle>
</g>
<g transform="translate(10 120)">
<use xlink:href="#bewegungspfad" fill="none"
stroke="black"/>
<circle cx="0" cy="0" r="10" fill="green">
<animateMotion
begin="0s" dur="6s" repeatDur="2:00"
calcMode="paced">
<mpath xlink:href="#bewegungspfad"/>
</animateMotion>
</circle>
</g>
<g transform="translate(150 120)">
<use xlink:href="#bewegungspfad" fill="none"
stroke="black"/>
<circle cx="0" cy="0" r="10" fill="blue">
<animateMotion
begin="0s" dur="6s" repeatDur="2:00"
calcMode="spline">
<mpath xlink:href="#bewegungspfad"/>
</animateMotion>
</circle>
</g>
<g transform="translate(70 240)">
<use xlink:href="#bewegungspfad" fill="none"
stroke="black"/>
<circle cx="0" cy="0" r="10" fill="green"
fill-opacity="0.5">
<animateMotion
begin="0s" dur="6s" repeatDur="2:00"
calcMode="paced">
<mpath xlink:href="#bewegungspfad"/>
</animateMotion>
</circle>
<circle cx="0" cy="0" r="10" fill="red"
fill-opacity="0.5">
<animateMotion
begin="0s" dur="6s" repeatDur="2:00"
calcMode="linear">
<mpath xlink:href="#bewegungspfad"/>
</animateMotion>
</circle>
<circle cx="0" cy="0" r="10" fill="blue"
fill-opacity="0.5">
<animateMotion
begin="0s" dur="6s" repeatDur="2:00"
calcMode="spline">
<mpath xlink:href="#bewegungspfad"/>
</animateMotion>
</circle>
<circle cx="0" cy="0" r="10" fill="yellow"
fill-opacity="0.6">
<animateMotion
begin="0s" dur="6s" repeatDur="2:00"
calcMode="discrete">
<mpath xlink:href="#bewegungspfad"/>
</animateMotion>
</circle>
</g>
<text x="40" y="130" font-size="9pt">linear</text>
<text x="180" y="130" font-size="9pt">discrete</text>
<text x="40" y="260" font-size="9pt">paced</text>
<text x="180" y="260" font-size="9pt">spline</text>
<text x="65" y="370" font-size="9pt">alle
uebereinander</text>
</svg>
|
|
