Rotation

Mit der Rotationsanimation können Sie Elemente in Ihrem Shape abhängig vom Wert eines Datenpunkts rotieren.

Elemente rotieren jeweils um ihren Ursprung. Um mehrere Elemente gemeinsam zu rotieren, umschließen Sie diese mit einem <g>-Element. Verwenden Sie allenfalls eine Verschiebungstransformation, um den Ursprung zu verschieben (siehe Verschiebung).

Im Feld Wert können Sie die Rotation gemäss dem folgenden Format parametrieren:

\[ɑ_0:s\]

\(ɑ_0\) entspricht dem Startwinkel, und \(s\) entspricht dem Skalierungsfaktor. Der aktuelle Winkel errechnet sich aus \(ɑ = ɑ_0 + value \times s\).

Beispiel 1

45:0.9

Der Startwinkel beträgt 45°, die Skalierung 90%. Bei einem Wert von 0 beträgt der Winkel demnach 45°, bei einem Wert von 50 beträgt er 90°

Beispiel 2

Im folgenden Beispiel rotiert das rote Rechteck mit dem weißen Pfeil im Uhrzeigersinn so, dass beim Erreichen des Messwerts 100 eine vollständige Drehung von 360° erreicht wird.

Als Aktionstyp wurde Rotation ausgewählt, und im Feld Wert (d.h. als Rotationskonfiguration) wurde 0:3.6 eingegeben.

<rect x="0" y="0" fill="whitesmoke" stroke="darkgray" width="100" height="100" />
<g id="Target" transform="translate(50,50)">
    <g transform="translate(-25,-25)">
        <rect fill="red" stroke="crimson" width="50" height="50" />
        <polygon points="10,10 40,25 10,40" fill="white" />
    </g>
</g>

rotate-example-1

Grundposition mit Messwert: 0 → Rotationswinkel: 0°

rotate-example-2

Messwert: 10 → Rotationswinkel: 36°

Simulator

Sobald Sie den Simulator mit Simulator starten neben der Shape-Vorschau aktiviert haben, können Sie die Rotationsanimation testen, indem Sie in der Spalte Testwert einen beliebigen Wert innerhalb des Definitionsbereichs eingeben.