Get Started with Animation
A Quick Overview on Creating Time-Based Animations
Silverlight has a Time-Based Animation system rather than a Frame-based one. This allows you as the Animator to focus on timing rather than worry about how many frames per second your application may or may not be getting. The system also includes a Storyboard object which acts as a harness to maintain and change property values in a flexible way.
Expression Blend does a great job providing tools for this powerful yet simple framework.
In this tutorial, we will use Time-Based Animations to make the spaceship fly across
the screen in an accelerated fashion.
Word
PDF
01 Opening Scene
Download the BasicAnimation project files and Open the project in Expression Blend.
02 Switch to the Animation Workspace
From the top menu, select Window -> Workspaces -> Animation. This is one of the default Workspaces included with Expression Blend 3, that as the name suggests is used to create Animations. You can create and save your own Workspaces from the Windows menu item.
03 Add a Storyboard
In Blend, most Animations are defined by Storyboards. To add a new Storyboard, find the Objects and Timeline panel and click the “+” icon. A Create Storyboard Resource dialog will pop, click OK to accept the default name Storyboard1. The new Storyboard is created and selected which causes the timeline and the Recorder Indicator to be shown as a red outline around the Artboard.
04 Make the Ship move
Drag the playhead in the timeline to 3 seconds. Select the Ship and move it to a new position. Click the Play button found above the timeline and watch the ship fly slowly across the screen. The Play button along with the other transport control allow for previewing your Animation during design-time, which can very useful.
05 Ease the Ship into Acceleration
Drag the white oval key frame indicator from frame 3 to 1. Hit Play and notice the ship is much faster now, but the movement is linear and unnatural. On the Properties panel find the Easing section and from the 33 built-in Easing functions choose Exponential In. Change the Exponent property from 2 to 6. Hit Play and now you’ll see the ship accelerate across the screen.
06 Never ending Storyboard
Select Storyboard1 by clicking its name directly in the dropdown box. When the Storyboard is selected, the Properties panel will change and display a Common Properties section. AutoReverse causes the Storyboard to play back to the beginning in reverse once it meets the end of the Storyboard. RepeatingBehavior sets how many times a Storyboard should play through once started.
07 Fire the Engine!
With the Direct Selection Tool (A), select the end Point of the Flame Path coming out of the ship. With Storyboard1 selected and the playhead at 1 second, drag the point to the other horizontal edge of the moon. Select the newly created key frame in the Flame row and change the Easing function to Elastic In. Hit the Play button and watch the engines fire.
08 Starting and Stopping the Animation
Close the Storyboard and switch back to the Design Workspace. In the Assets panel select Behaviors and drag a copy of the ControlStoryboardAction to the Ship Grid. In the Properties panel you will now find a Trigger and Common Properties Section. From the Storyboard dropdown, select Storyboard1. Drag a new ControlStoryboardAction onto the Moon Grid and select Storyboard1 again, but this time choose the Option to Stop. Hit F5 to run and test your Animation by clicking the ship and the moon to play and stop your ship from flying.
» Next Step
Now let's take a look at working with traditional media files by Playing Video with the MediaElement
To continue learning about Animation in Expression Blend read this Animating objects article on the Expression Community site.