BUILDING SIMPLE WPF ANIMATION

Building a Simple WPF Animation

Posted in WPF, WPF Animations at 6:19 am by Cal

This project illustrates a very simple WPF animation. The source code for this project is available here . If you prefer just the executable file itself, it is available here .

This project is a WPF Windows application (not an XBAP or WPF/E). I used Expression Blend to build it since animation in Blend is a much simpler task than it is in Visual Studio. The first thing which I did was to rename Window1 to MainWindow since using default names is only acceptable in a throw away project. Other minor housekeeping tasks included adding a custom icon to both the project and the MainWindow. In both cases, all that is required is to set the Icon property to the relative path of the icon file. (images/iconfile.ico)
Of course, the icon file should be added to the project. Be sure to set the Build Action of any image file to Resource — NOT Embedded Resource. A good way to remember that is to “avoid the ER” since you probably wouldn’t enjoy it there anyway. The Embedded Resource setting is used for Windows Forms projects and will not work with WPF images.

This animation uses two photographs taken at the Chernobyl nuclear reactor in the Ukraine (about 90 miles north of Kiev). Actually, both photographs are just the same photograph, one of which has been dressed up in Photoshop to include the glow effect. Any image file that you want to use in a WPF application should be explicitly added to your project. This can be done in either Blend or Visual Studio. It is generally best to create a new folder named “images” and then place all the image files that you need into that folder. To later reference any such files all you need to do is to include the folder name in the path (eg. images/filename.jpg).

When you place two elements in a WPF Grid and you do not specify any rows or columns, both elements simply sit on top of each other in the same cell. Knowing this, I positioned my photographs so that the one without the glow sits directly in front of the one with the glow. Whichever element is added later will have the highest Z-Order.

Using the Animation Workspace in Blend I set a keyframe at time 02. At the beginning of the timeline, the opacity of the front photograph starts out at 100%. This means that when the application begins to run, the front photo is fully opaque. At the 2 second mark (the first keyframe), I set the opacity of the front photo to 0%. At this point, the front photo is entirely translucent and a user will see only the rear photo — the one with the glow. Then I created a second keyframe at time 00:00:04 (4 seconds). where I set the opacity of the first photo back to 100%. Animations of this sort scale in a linear fashion, meaning that at the 1 second point as well as the 3 second point, the opacity of the front photo will be 50%.

WPF animations are not affected by CPU speed. A faster CPU will mean a smoother animation not a shorter animation.
Next I set AutoReverse to True and RepeatBehavior to Forever. This makes the glow fade back out and then reappear indefinitely until the user closes the application. Technically, I didn’t have to set AutoReverse to True since the animation as I built it already performs a complete cycle from 100% opaque to 100% transparent and back to 100% opaque again. If I had stopped the animation when the front photo was fully transparent, the AutoReverse setting would have been required in order to return the front photo to opaque.

To allow the photo without the glow to appear briefly before the glow starts to phase in, I set the BeginTime property of the animation to 2 seconds (00:00:02). The BeginTime property is used to delay the commencement of an animation for a specified period of time. (2 seconds in my case as shown in the illustration above)
The triggering event is the loading of the MainWindow.

So as you can see, the steps required to create this animation are actually very simple. Not including the time needed to fly to the Ukraine to take this photo or the time needed to fix it up in Photoshop, buiding this animation can easily be accomplished in under half an hour.