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



About the Author

Marius Bancila

Marius Bancila is a Microsoft MVP for VC++. He works as a software developer for a Norwegian-based company. He is mainly focused on building desktop applications with MFC and VC#. He keeps a blog at www.mariusbancila.ro/blog, focused on Windows programming. He is the co-founder of codexpert.ro, a community for Romanian C++/VC++ programmers.

Downloads

Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Live Event Date: September 16, 2014 @ 11:00 a.m. ET / 8:00 a.m. PT Are you starting an on-premise-to-cloud data migration project? Have you thought about how much space you might need for your online platform or how to handle data that might be related to users who no longer exist? If these questions or any other concerns have been plaguing you about your migration project, check out this eSeminar. Join our speakers Betsy Bilhorn, VP, Product Management at Scribe, Mike Virnig, PowerSucess Manager and Michele …

  • The explosion in mobile devices and applications has generated a great deal of interest in APIs. Today's businesses are under increased pressure to make it easy to build apps, supply tools to help developers work more quickly, and deploy operational analytics so they can track users, developers, application performance, and more. Apigee Edge provides comprehensive API delivery tools and both operational and business-level analytics in an integrated platform. It is available as on-premise software or through …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds