This is a short refresher tutorial that I have wanted to put out there for some time now regarding how easy it is to create animations in Expression Blend. The System.Windows.Media.Animation namespace provides quite a number of animation classes that can be confusing to a novice user.
Another issue to point out from the beginning is that there are many types of animations, and you can literally use them almost anywhere, including in styles and control templates. Also animations don’t have to be visuals; you can animate objects that are not part of the UI as long as they meet certain criteria. This is where Expression Blend comes into play! Expression Blend makes the process of figuring out the “what use” or “when to use what” simple and easy!
Create a basic animation project
Let’s create a simple basic animation in Expression Blend and then look behind the covers to see what Blend figured out for us!
- Start Expression Blend (Start –>All Programs–>Microsoft Expression–>Microsoft Expression
Blend 4). - Create a new project (File–>New Project, or from the Welcome screen, click New Project).
- On the New Project dialog box under Project Types, click select WPF as the project type then click WPF Application.
- Under Name, give the project a name, for instance “SimpleAnimation”
- Next choose a Location or go with the default, and also select C# as the development language.
- Click OK to create the project.
- Add an ellipse with no Fill.
Tip: use the Properties Inspector to remove the Fill.
8. With the ellipse object still selected convert the ellipse to a Path. Right click the ellipse object, then select Path, and click Convert to Path:
9. Next convert the path you just created to look like a winding road. (On the Tools panel click to select the Direct
Selection tool, then use the Direct Selection tool to adjust points on the path).
Tip: use the User Guide, there are several topics that describe how to use this tool in detail. You can also use a Pen tool instead of a Direct Selection tool to create your winding road.
You should have something like the following or better:):
10. Switch to the Animation workspace and add another ellipse to the project (On the Window menu –>Workspaces–>Animation).
Tip: you can use the keyboard shortcut F6 to switch between Animation and Design workspaces.
11. Using the Object and Timeline panel to rename the path object to “Road”.
12. Add an ellipse that is 50×50 pixels and position it anywhere next to the path object.
Tip: use the Layout section of the Properties panel to set precise values.
13. Add a radial gradient fill to the ellipse; also change the color of the stroke to whatever you like.
Tip: use the Brushes panel in the Properties Inspector. Mine looks like this:
14. Rename the ellipse to “wheel”.
15. Change the stroke size of the path object (“road”) to 10.
Tip: use the Appearance panel in the Properties Inspector.
16. Select both objects (“Road and Wheel”) and convert them to motion path (On the Object
menu–>Path–>onvert to Motion Path). The moment you do this, notice a few important things that just happened; Timeline recording is immediately turned on, a default Storyboard1 is automatically created for the “wheel” object that we want to animate, and a RenderTransform with a Duration is applied to the “wheel” element:
16. Adjust keyframeplaytime as you like, you can make it slow or faster.
Tip: you can easily adjust a keyframe playhead position by dragging it with your mouse:
17. Save the project (On the File menu–>Save), or use keyboard shortcut Ctrl+S.
18. Build the project (On the Project menu–>Build Project), or use keyboard
shortcut Ctrl+Shift+B.
19. Run the project (On the Project menu–>Run Project,) or use keyboard shortcuts
F5, or Ctrl+F5.
Did you notice that the storyboard automatically starts when you run the project? This is because a Trigger was automatically added when Storyboard1 was created:
20. Stop running the project and switch to the XAML code editor. Take a look at the resources section:
Conclusion
There is a lot of interesting things going on here that we didn’t have to figure out that Expression Blend already figured
out for us! As you can see DoubleAnimationUsingPath class is being used. This is a From/To/By or Basic Animation type, and typically if you want to animate a property that takes a Double, such as the width property of an element, you use an animation that produces Double values. Path animations enable you to use a geometric path in order to produce animated values.
That’s it for now, I hope someone will find this short tutorial useful!