Add Simple Animations to Your WPF Application with Timelines

In the previous article of this series, I introduced you to WPF transformations. This article will continue to work with transformation, but also introduce timelines that help you create animations in your WPF applications.

Setting Up a Scene

You will start by setting up a scene in which you will add some simple animations. Your scene will contain four buttons and a text box that will be rotated by pushing the buttons. The scene is shown in the image below:

In the previous articles, you used the Timeline window, where the tree with the elements of the scene is displayed. As the name suggests, this window is more than just that; it provides support for creating animations via timelines.

On the center top of the window, there is a series of buttons. The first one called Create New Timeline; it creates a new timeline.

The top red bar shows the time in seconds, not frames. You don’t have to worry about frames and frame rates because the Interactive Designer takes direct advantage of the hardware configurations and sets up the frame rate automatically. You can zoom in and out of the timeline with the zoom tool at the bottom of the window.

A vertical line indicates the current position in the timeline. When you move this pointer, the top-right time display shows the position in seconds of the pointer.

Creating Timelines

What you will do in this article is create four timelines for the textbox control and add some transformations inside each timeline. Then, you will add triggers for these timelines so that you can start the animations by pushing the buttons that you added to the scene.

To start, select the TextBox control and add four timelines. In each of the four timelines, you will add a key frame at two seconds. To do that, move the timeline pointer to two seconds (make sure the textbox control is selected) and open the Transform window and set the Z property to -90 degrees. That means a rotation of the text box with 90 degrees counter-clockwise.

For the second timeline, set a rotation of -180 degrees, for the third 90 degrees, and for the fourth 180 degrees.

Notice that you did not set a start key frame in any timeline. This way, an animation does not require a start position to play, but instead it will begin from the current position of the control. You’ll be able to test that when running the application and pushing the buttons before the animation trigger ends.

Adding Triggers for the Timelines

You can test the animations in the timeline window by using the playing buttons (on the center top of the Timeline window), but the animations would be pointless unless they can be triggered while the application runs. To create triggers for the timelines, open the Timeline Properties window (from the View menu). Then, select Timeline1, select ButtonTop and use the Add button to add a trigger. It will show you tree combo boxes.

The first one contains the control used to trigger the animation. (If you selected the ButtonTop control, it should be the only one displayed and selected here.) The second one represents an event that can trigger the playing of the timeline. Scroll through the events and select Click. The third combo represents an action concerning the animation and can be Begin, End, Pause, or Resume (make sure Begin is selected).

Repeat the same procedure with the Timeline2 associated with the ButtonLeft control, Timeline3 with the ButtonBottom control, and Timeline4 with the ButtonRight control. And that is all. you have successfully set up an application that can play some simple animations with a text box. Run the application and use the buttons to rotate the text box control. As already pointed out, if you press a button before the playing animation ends, the triggered animation starts from the present position of the control.

Previous Series Articles

More by Author

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Must Read