Animations in Blend

The addition of the animation engine in Windows Presentation Foundation (WPF) allows designers and developers to animate objects without using third party software. Before getting into an example of how to work with animations, it is important to know the basics.

  • Animations are time based. After setting a target value the animation interpolates the values from the current value to the target value.
  • Storyboards are the container holding animations. Each Storyboard can hold multiple animations.
  • Animation types include colors, numeric properties, points, and strings.

A simple example of a ball bouncing will show how to create animations in Blend.

Press the Shift key while drawing your ellipse. This ensures a perfect circle.

Create the Storyboard
First things first, create a ball. Use the ellipse tool from the toolbox and draw a circle on the Artboard. The next step is to create a Storyboard to hold the ball dropping animation. On the Interactions panel click the plus sign, Figure 1. A box will pop up asking what you would like to name your animation. Everyone has their own naming conventions. For simplicity, this example will stick with the default Storyboard1 name.

Figure 1

After creating the Storyboard you will notice the interface has changed. The Interactions panel expanded, a timeline appeared, and a red border lines the Artboard. This lets you know it is time to animate.

Animation workspaces
Blend accommodates for two different views when designing animations, the Design workspace and the Animation workspace. To switch between views click Window -> Activate Workspace -> Design Workspace/Animation Workspace. Figure 2 and Figure 3 show the difference between the two views.

Figure 2- Design workspace

Figure 3 – Animation workspace

Keyboard shortcut
F6 toggles between the Design Workspace and the Animation Workspace

Add animation to the Stoyboard
Now the Storyboard has been created, add the ball dropping animation. Click on the first second in the timeline, and then move the ball to the bottom of the screen. Notice a white dot appears on the timeline across from the ellipse. This indicates a keyframe has been created for that element at that time. Click on the play icon above the timeline to test the animation.

Figure 4

What values are changing – Transforms
The value that was changed when you moved the ball down was the Y value of the TranslateTransform. Transforms are used for positioning, sizing, and rotating. There are four types of transforms: Translate, Scale, Skew, and Rotate. When moving or sizing in the Artboard, Blend changes the value of the transforms by default. It is possible to animate the Height and Width properties, but you will have to do this by using the property window instead of changing the size of the object on the Artboard.
Every UI element has a Transform. You can find the Transform palette in the properties window. There are six tabs Translate, Rotate, Scale, Skew, Center Point, and Flip in that order.

Figure 5 – Transform palette

Make the bounce look natural
Up to this point you only have a ball that falls. There are three actions left to make the ball bounce look more natural: add easing, change the shape of the ball once it hits the ground, and make the ball bounce back up.

Currently the ball is falling at the same rate, making the animation feel unnatural. In general to make animations more natural you need to add acceleration and deceleration. In Blend this is done by Easing. Click on the white dot on the timeline. The Easing palette appears in the properties window. Click and drag the bottom left dot until you get a curve similar to that in Figure 6. With this curve, the ball will slowly drop then pick up speed as it approaches the ground, simulating gravity.

Figure 6

The ball hits the ground
Think of a racquetball hitting the ground. Once on the ground it changes shape, even if only for a split second. Along with simulating gravity this makes the bouncing ball animation more natural. Just like creating the first animation, click on timeline around 1.2 seconds. Then on the Artboard make the height of the ball smaller. Press play.

Figure 7 – Ball hitting the ground

Finally, make it bounce
Storyboards have the ability to automatically reverse themselves along with repeating the animation. To make the ball bounce you will make the Storyboard reverse and have the behavior repeat. On the Interaction panel click the title of the Storyboard, Figure 8. In the properties window the Common Properties for the Storyboard appear, Figure 9. Check AutoReverse and set the RepeatBehavir to Forever. Press Play
Figure 8

Figure 9

2 comments so far

  1. […] Animations in Blend (Corey Schuman) […]

  2. Kevin Leclair on

    Cool stuff man!

    Put The Message Where It Matters! WideCircles Social Advertising!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: