Introduction to 2D Graphics Using WPF - Computer Graphics: Principles and Practice - page 56

• The angle property of a rotation transform can be manipulated by an ani-
mation element to make the affected objects rotate.

That last example is of interest to us as clock builders. We can use three ani-
mation elements, one for each hand, to provide for the clock's movement.
Let's look at the current status of our hour hand's modeling transform, as
designed previously.

<Control.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1.7" ScaleY="0.7" />
<RotateTransform Angle="45"/> <!- for 7:30 ->
</TransformGroup>
</Control.RenderTransform>

1
2
3
4
5
6

The instance transform already contains a RotateTransform placing the hand
into a 7:30 position. It would be best to have 12:00 be the hour hand's “normal-
ized” default position, now that we're looking into adding time semantics to our
application, so let's change that rotate transform:

<!- Rotate into 12 o'clock default position ->
<RotateTransform Angle="180"/>

1
2

Additionally, to prepare for automated manipulation of the hand's position,
let's add another RotateTransform and give it a tag ( ActualTimeHour ) to allow
its manipulation by an animator. With these two changes, the TransformGroup
becomes this:

<TransformGroup>
<ScaleTransform ScaleX="1.7" ScaleY="0.6" />
<!- Rotate into 12 o'clock default position ->
<RotateTransform Angle="180"/>
<!- Additional rotation for animation to show actual time: ->
<RotateTransform x:Name="ActualTimeHour" Angle="0"/>
</TransformGroup>

1
2
3
4
5
6
7

Now, let's look at the declaration of the animation element that will rotate the
hour hand. WPF provides one animation element type for each data type that one
might want to automate. To control a rotation's angle, which is a double-precision
floating-point number, use the element type DoubleAnimation :

1
2
3
4
5
6
7

<DoubleAnimation
Storyboard.TargetName="ActualTimeHour"
Storyboard.TargetProperty="Angle"
From="0.0" To="360.0" Duration="1:00:00.0"
RepeatBehavior="Forever"

/>

The animation is connected to the hour hand through the setting of the
TargetName and TargetProperty attributes, which point to the Angle property
of the target RotateTransform element. The From and To attributes determine the
range and direction of the rotation, and Duration controls how long it should take
to move the property's value through that range. Duration is specified using this
convention:

Hours : Minutes : Seconds . FractionalSeconds

1