With animations you can make a smooth transition using moving elements, color changes, transforms, and so on. WPF makes it easy to create animations. You can animate the value of any dependency property. Different animation classes exist to animate the values of different properties, depending on their type.
The major elements of animations are as follows:
- Timeline – The timeline defines how a value changes over time. ~t kinds of timelines are available for changing different types of values. The base class for all timeIines is Timeline. To animate a double, the class DoubleAnimation can be used. Int32Animation is the’ ” animation class for int values.
- Storyboard – A storyboard is used to combine animations. The Storyboard class itself is . derived hem the base class TimelineGroup, which derives from Timeline. With DoubleAnimation you can animate a double value; with a Storyboard you combine all the animations that belong together.
- Triggers – With triggers you can start and stop animations. You’ve seen property triggers previously. Property triggers fire when a property value changes. You can also create an event
trigger. An event trigger fires when an event occurs.
The namespace for animation classes is System. Windows. Media. Animation.
A Timeline defines how a value changes over time. The first sample animates the size of an ellipse. Here a DoubleAnimation that is a timeline that changes a double value is used. The Triggers property of the Ellipse class is set to an EventTrigger. The event trigger is fired when the ellipse is loaded as defined with the RoutedEvent property of the EventTrigger. BeginStoryboard is a trigger action that begins the Storyboard. With the storyboard, a DoubleAnimation element is used to animate the Width property of the Ellipse class. The animation changes the width of the ellipse from 100 to 300 within 3 seconds, and reverses the animation after the 3 seconds.
Animations are far more than typical window-dressing animation that appears onscreen constantly and immediately. You can add animation to business applications that make the user interface more responsive.
The following example demonstrates a decent animation and also shows how the animation can be defined in a style. Within the Window resources you can see the style AnimatedButtonStyle for buttons. In the template a rectangle named outline is defined. This template has a thin stroke with the thickness set to 0.4.
The template has a property trigger for the IsMouseOver property defined. The EnterActions property of this trigger applies as soon as the mouse is moved over the button. The action to start is BeginStoryboard. BeginStoryboard is a trigger action that can contain and thus start Storyboard elements. The Storyboard element defines a DoubleAnimation to animate a double value. The
property value tpat is changed in this animation is the Rectangle. StrokeThickness of the Rectangle element with the name outline. The value is changed in a smooth way by 1.2, as the By property specifies, for a time length of 0.3 seconds as specified by the Duration property. At the end of the animation, the stroke thickness is reset to its original value because AutoReverse=” True”. To summarize: as soon as the mouse moves over the button, the thickness of the outline is incremented by 1.2 for 0.3 seconds. Figure 35-19 shows the button without animation, and Figure 35-20 shows the button at the moment 0.3 seconds after the mouse moved over it. It’s just not possible to show the smooth animation and intermediate looks in a print medium.
Things you can do with a Timeline are listed in the following table.
Depending on the type of the Timeline class, some more properties may be available. For example, with OoubleAniJllation you can specify the following additional properties.
lnstead of having a property trigger, you can define an event trigger to start the animation. The next example creates an animation for the funny face you know from the previous chapter, where the eye moves as soon as a Click lt event from a button is fired. This example also demonstrates that you can start the animation both from XAML~ code behind.
It shows the running application of the animated face example.
Inside the Window element a DockPanel element is defined to arrange the funny face and the buttons. Grid containing the Canvas element is docked on-top. Bottom-docking is configured with a StackPanel element that contains four buttons. The first two buttons are used to animate the eye from code behind; the last two buttons are used to animate the ere from XAML.
The animation is defined within the <DockPanel. Triggers> section. Instead of a property trigger, an event trigger is used. The first event trigger is fired as soon as the Click event occurs with the button startButtonXAML defined by the RoutedEvent and SourceName properties: The trigger action is defined by the BeginStoryboard element that starts the containing Storyboard. Beginstoryboard has a name defined, because this is needed to control the storyboard with pause, continue, and stop actions. The Storyboard element contains two animations. The first animation changes the . Canvas. Left position value of the eye; the second animation changes the Canvas. Top value. Both . animations have different time values that make the eye movement very interesting using the defined repeated behavior.
The second event trigger is fired as soon as the Click event of the stopButtonXAML button occurs. Here, the storyboard is stopped with the StopStoryboard element, which references the started
Instead of starting and stopping the animation directly from event triggers in XAML, you can easily control the animation from code behind. The buttons startAnimationButton and stopAnimationButton have the event handlers OnStartAnimation and OnStopAnimation associated with them. Within the event handlers, the animation is started with the Begin () method and stopped with the Stop () method. With the Begin () method the second parameter is set to true to allow you to control the animation with a stop request.
Now, you can start the application and watch the eye move as soon as one of the Start buttons is clicked.
The Storyboard class inherits from the base class Timeline but can contain multiple timelines. The Storyboard class can be used to control timelines. The following table describes the methods of
the Storyboard class.
The.EventTrigger class makes it possible.to define actions when events occur. The following table describes the properties of this class.
Trigger actions that you can put within an EventTrigger are listed in the following table. You’ve seen the BeginStoryboard and StopStoryboard actions in the example, but the following table shows some others.