The Translate transform
By translating an object, we're moving that object around the artboard, but moving it in a way that is relative to its original position. This is different than what happens when you drag an object, because dragging an object changes its position relative to the container in which it resides. Translations are relative; dragging is absolute.
Translations are useful for creating motions that are self-contained. For example, if a panel "opens" by sliding 200 pixels to the right, you can freely reposition the panel anywhere in the layout container without affecting the motion defined by the translation.
Consider an object that is positioned at the x and y coordinates 100,100. If you drag the object 50 pixels to the right and 50 pixels down, the object will now reside at the absolute position of 150,150. However, if the same object has a transform applied that moves it 50 pixels to the right and 50 pixels down from its original position, the object will be drawn at 150,150, though its absolute position relative to the container in which it resides will still be 100,100. The Top and Left fields on the Properties panel will show the absolute value of 100,100.
This can be a bit confusing, so let's work through an example that demonstrates the difference between the two:
1. Create a new project in Blend. Change the default Grid container on the artboard to a Canvas by editing the XAML, or by right-clicking the LayoutRoot element in the Objects and Timeline list and selecting Change Layout Type > Canvas, as shown in Figure 2-2.
2. Select the Rectangle tool from the toolbox by pressing M, and then double-click the Rectangle icon to add a Rectangle element to the canvas. By default, a 100X100 rectangle will be placed in the upper-left corner of the canvas on the artboard. Select the rectangle on the Objects and Timelines panel and use the Brushes pane of the Properties panel to give it a background color other than the default white.
3. On the Transform pane (shown in Figure 2-1), the square icon on the left with nine points allows you to select the point of origin for the transform. We'll take a closer look at this in another example, but this is useful if you need to make an object scale or rotate about a point other than the default center. In the X field, enter 100 and press Enter. The rectangle should oblige by moving to the right 100 pixels. Notice on the Layout pane that the Left position of the rectangle is still being reported as 0.
Translations define an offset from an object's current position on the artboard. If you press the V key to change to the Selection tool and then drag the rectangle to a different location on the artboard, you will notice the Left property changing in the Layout pane. After dragging, the rectangle is still offset 100 pixels from the value being displayed in the Layout pane. You can test this by entering 0 into the X field on the Transform pane—without a translation applied, the rectangle returns to the position shown in the Left field of the Layout pane. Y offsets will work the same way as X offsets.
- Figure 2-2. The Change Layout Type menu in Blend
Let's create an animation that will demonstrate a translation that occurs over time:
1. Open the eclipse project from Chapter 2 by selecting File > Open > Project/Solution. Locate the eclipse.sln file. This project contains two objects: a sun and a darkened moon.
2. In this project, we will be using a Translate transform to move the moon in order to create a lunar eclipse. If the workspace in Blend is not in the Animation Workspace (with the Objects and Timeline panel below the artboard), press F6 to change the layout now. Once you've done that, click the New Storyboard button on the Objects and Timeline panel, as shown in Figure 2-3.
3. The Create Storyboard Resource window will open. This window asks for a unique name for the storyboard that is about to be created. As you work on the artboard creating motions for your objects, Blend will automatically build out the storyboard for you. We'll take a more in-depth look at storyboards in Chapter 3. For now, just click OK to accept the default name of
Storyboard1.
Figure 2-3. Click the New Storyboard button to create a new animation.
Figure 2-3. Click the New Storyboard button to create a new animation.
4. The Blend interface will switch to timeline recording mode, as shown in Figure 2-4. A timeline and its associated controls will appear to the right of the Objects and Timeline panel, and the artboard border will turn red, indicating that timeline recording is on. When timeline recording mode is on, any changes you make to the properties of an object will create a keyframe on the timeline. You can toggle timeline recording mode on and off by clicking the red button at the top left of the artboard. Turning off timeline recording will not close the current timeline—it simply stops Blend from recording the changes you make as keyframes on the timeline. This is very useful when you need to make some changes to an object that are not supposed to be part of the animation.
- Figure 2-4. The Blend interface showing the eclipse project in timeline recording mode
The yellow bar on the timeline is called the timeline play head, and it indicates your current position within the timeline. If you are coming from a Flash background, there is a significant difference in the way timelines work in Silverlight. Here, animations are time-based rather than frame-based. Time-based animations should offer a more consistent end-user experience across a wide array of hardware, as 1 second is a consistent unit of measure across computers.
5. To move the timeline play head to a specific point on the timeline, use the mouse to click the triangle at the top of the play head and then drag it. For this example, we want to move the moon in front of the sun over a 1-second period of time, so drag the timeline play head to the 1-second mark, as shown in Figure 2-5.
- Figure 2-5. Move the timeline play head to the 1-second mark on the timeline.
6. Select the darkMoon element on the Objects and Timeline panel by clicking it. On the Properties panel, make sure that the Transform pane is expanded. On the Translate tab, we want to enter values that cause the moon to be centered over the sun object. In the X field, enter 280 to offset the moon object 280 pixels to the right. In the Y field, enter -245 to offset the moon object up 245 pixels from its current location. Remember that in Silverlight, the x and y offsets are measured from the top-left corner of an object.
7. Press the Play button above the timeline to preview your animation. You defined the start point of the object by its placement on the canvas, and the endpoint by the Translate transform you defined. Blend will handle all the in-between frames automatically, and the moon will glide in front of the sun. As you created the time-based translation, Blend automatically generated a storyboard in the background. The storyboard is XAML code that tells Silverlight how the objects in your application should move. I'll talk a lot more about storyboards in Chapter 3, but just so you can see what's going on, the following code listing shows the storyboard that was created for this animation:
<Storyboard x:Name="Storyboardl">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="darkMoon"
Storyboard.TargetProperty="(UIElement.RenderTransform).^ (TransformGroup.Children)[3].(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="00:00:01" Value="280"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="darkMoon"
Storyboard.TargetProperty="(UIElement.RenderTransform).^ (TransformGroup.Children)[3].(TranslateTransform.Y)">
<EasingDoubleKeyFrame KeyTime="00:00:01" Value="-245"/> </DoubleAnimationUsingKeyFrames> </Storyboard>
8. As mentioned earlier, translations are simply offsets from an object's actual position within its parent object. To illustrate this, drag the timeline play head back to 0 or select the Go to first frame button above the timeline. Click the red button at the top-left corner of the artboard to turn off timeline recording.
9. With the darkMoon element still selected, enter 200 into the Top field on the Layout pane of the Properties panel. Now, press the Play button for the timeline again to preview the animation. What happens? The moon moves to the same offset defined in the storyboard, but because the base object's actual position has changed, the final frame of the animation now finds the moon above the sun rather than over it.
This is an important detail to keep in mind when using translations. You may find yourself in need of a relative offset when animating objects, but remember that changes to the location of the object will affect the end position.
Average user rating: 3 stars out of 2 votes
Post a comment