The Rotate transform Silverlight Animations

The Rotate transform

Mon, 14 Mar 2011 14:01:47 | Silverlight Animations

How To Set Up Your Own Power Station In Your Back Yard

Rotate transforms are used to rotate objects within an application. Rotational angles are expressed in degrees, and the values input are additive—a value of 720 will fully spin an object around twice (360 X 2). For spinning in the opposite direction (counterclockwise), negative values can be used.

To see a Rotate transform in action, open the exhaustFan project from Chapter 2. This project contains a scene composed of a simple static background element and a fan element that will be made to rotate, as shown in Figure 2-6.

: Figure 2-6. A Rotate transform will be used to make the exhaust fan in this project spin.

1. Click the New storyboard button on the Objects and Timeline panel. Click OK when the Create Storyboard Resource dialog opens to accept the default storyboard name. Once again, verify that the Blend layout is set to the Animation Workspace with the timeline open across the bottom of the screen.

2. Drag the timeline play head to 2 seconds. Select the fan element from the Objects and Timeline list. On the Transform pane, select the Rotate tab, and enter 720 into the Angle field. When you click the Play button for the timeline, you will see the fan element perform two rotations over the course of the 2-second animation.

If you are interested in seeing the angle at any given point in time on the storyboard, drag the timeline play head and keep an eye on the Angle field of the Rotate tab. As you move the play head, the value changes to reflect the fan's current angle. Once again, Blend has taken the end value you specified and created all the in-between frames automatically. The storyboard for this project is shown in the following listing:

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="fan"

Storyboard.TargetProperty="(UIElement.RenderTransform).^ (TransformGroup.Children)[2].(RotateTransform.Angle)"> <EasingDoubleKeyFrame KeyTime="00:00:02" Value="720"/> </DoubleAnimationUsingKeyFrames> </Storyboard>

As noted earlier, it is possible to change the point of origin for a transform by relocating the center point. To change the point around which an object is rotating, click the Translate tab of the Transform pane. The small box with nine points located on the left side of the Transform pane allows you to change the location of the pivot to one of nine presets.

3. Click the red button at the top left of the artboard to turn off timeline recording, and drag the timeline play head back to 0.

4. On the Translate tab, click the top-left point, as shown in Figure 2-7.

Press the Play button for the timeline. The fan should now be rotating around its top-left corner. This is useful for creating objects that rotate from locations other than their center point. A more accurate term for "center point" is render transform origin, as this is how it is specified in XAML code. Changing the location of the center point is really just changing the origin of any transform applied to an object. It just happens that the default position of the point is in the center of an object's bounding box.

Try selecting other points for the center point and playing the timeline to see the effect it has on the object. Figures 2-8 through 2-10 show the effect of changing the center point of the fan object if it were rotated 15 degrees.