Animations in WPF

Animations in WPF

Animations in WPF are not like the cartoons that you see on TV or in the movies. In WPF an animation is a mechanism that changes the value of a dependency property over time. Animations can be used to add dramatic and appealing effects to a user interface provided that one resists the ever present temptation to overuse them. Animation is a deep topic, implemented in WPF with well over 150 classes. This post will only scratch the surface.

The example here expands on the example in my last post. In this XAML only example RenderTransforms are animated to produce quirky mouse over effects. This is what is displayed before the mouse cursor is moved over any of the images.

anim_tools

The Style for the bell image applies a RotateTransform with its origin approximately at the bell’s handle. By default it rotates the image zero degrees, so nothing is changed. However event triggers launch a Storyboard that animates the RotateTransform making the bell look like it is being rung.

<Storyboard x:Key="ringStoryboard">
  <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Angle"
    To="10" Duration="0:0:0.2"/>
  <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Angle"
    To="0" BeginTime="0:0:0.2" Duration="0:0:0.2"/>
</Storyboard>
<Style x:Key="bellImage" TargetType ="{x:Type Image}">
  <Setter Property="RenderTransformOrigin" Value="0.6,0.2"/>
  <Setter Property="RenderTransform">
    <Setter.Value>
        <RotateTransform/>
    </Setter.Value>
  </Setter> 
  <Style.Triggers>
    <EventTrigger RoutedEvent="Image.MouseEnter">
        <EventTrigger.Actions>
            <BeginStoryboard Storyboard="{StaticResource ringStoryboard}" />
        </EventTrigger.Actions>
    </EventTrigger>
    <EventTrigger RoutedEvent="Image.MouseLeave">
        <EventTrigger.Actions>
            <BeginStoryboard Storyboard="{StaticResource ringStoryboard}" />
        </EventTrigger.Actions>
    </EventTrigger>
  </Style.Triggers>
</Style>

A few things need to be explained at this point. Storyboard is simply a class that wraps one or more animations. More importantly a Storyboard can be wrapped by a BeginStoryboard. BeginStoryboard inherits from TriggerAction, so it can be set as the action of any event or property trigger. The animation classes are not TriggerActions, so they cannot be directly set as a trigger’s action.

The animations in this Storyboard are altering the Angle property of the RotateTransform. Angle is type Double, so the class DoubleAnimation must be used to animate it. There are other animation classes for use with other data types, e.g. Int32Animation. Consult MSDN.

The first DoubleAnimation changes Angle to a value of 10 (To=”10″) over a period of 0.2 seconds (Duration=”0:0:0.2″). It changes it to 10 from whatever its present value is. Angle’s default value is 0, so that is its starting point. The second animation begins at 0.2 seconds (BeginTime=”0:0:0.2″), i.e. after the first has completed. It animates Angle back to 0 over a period of 0.2 seconds. You must download the example code and try this yourself to see the result. Just open anim.xaml in your favorite XAML editor. The zip file contains the needed images but the paths will likely be different on your machine. Just change the image paths and run the XAML.

For the tools image a ScaleTransform is animated to make the image appear to grow when the mouse cursor is moved over it. It shrinks back to normal size when the mouse cursor is moved away. Here a PropertyTrigger is used instead of EventTriggers just to demonstrate its use. EventTriggers could have been used here to achieve the same effect. Likewise a PropertyTrigger could have been used on the bell.

<Style x:Key="toolsImage" TargetType ="{x:Type Image}">
  <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
  <Setter Property="RenderTransform">
    <Setter.Value>
        <ScaleTransform/>
    </Setter.Value>
  </Setter> 
  <Style.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
        <Trigger.EnterActions>
            <BeginStoryboard Storyboard="{StaticResource expandStoryboard}" />
        </Trigger.EnterActions>
        <Trigger.ExitActions>
            <BeginStoryboard Storyboard="{StaticResource shrinkStoryboard}" />
        </Trigger.ExitActions>
    </Trigger>
  </Style.Triggers>
</Style>

The pencil image also uses a ScaleTransform except that the RenderTransformOrigin is set to approximately where the pencil tip is. This makes the pencil seem to grow lengthwise instead of uniformly in two dimensions as the tools did. The thumb image uses a SkewTransform to make it appear that a “thumbs-up” is being given. The animation for the hourglass is more complex, so I’ll explain it in a future post. In the mean time you can see what it does by running the XAML example.

The images used in this example were provided by the kind folks at VistaICO.com. Source code for this example may be downloaded here.

Advertisements

1 Response to “Animations in WPF”


  1. 1 Atomaffe June 16, 2009 at 8:37 am

    Thanks for your example. Really helped me.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




April 2009
M T W T F S S
« Mar    
 12345
6789101112
13141516171819
20212223242526
27282930  
I am a part of all that I have met;
Yet all exprience is an arch whitherthro'
Gleams that untravell'd world, whose margin fades
For ever and for ever when I move.
How dull it is to pause, to make an end,
To rust unburnish'd, not to shine in use!
Alfred, Lord Tennyson

%d bloggers like this: