Rotation

The rotation animation allows you to rotate elements in your shape, depending on the value of a data point.

Objects rotate around their origin. To rotate several elements together, enclose them in an <g> element. If necessary, use an offset transformation to move the origin (see Translation).

In the Value field you can configure the rotation parameters according to the following format:

\[ɑ_0:s\]

\(ɑ_0\) represents the starting angle, and \(s\) represents the scaling factor. The current angle is calculated by \(ɑ = ɑ_0 + value \times s\).

Example 1

45:0.9

The start angle is 45°, the scaling 90%. With a value of 0, the angle is therefore 45°; with a value of 50 it is 90°.

Example 2

In the following example, the red rectangle with the white arrow rotates clockwise to such an extent that when the measurement value of 100 is reached, a complete rotation of 360° is achieved.

Rotate was selected as the Action Type and 0:3.6 was used as the Value (i.e. as the rotation configuration).

<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

Initial position with measurement value: 0 → Angle of rotation: 0

rotate-example-2

Measurement value: 10 → Angle of rotation: 36°

Simulator

Once you have activated the simulator with Start Simulator, you can test the rotation animation by entering any value within the definition range in the Test Value column.