Sunday, November 20, 2011

Creating Simple Animation in WPF


Creating animation in WPF is very simple. In this post I will explain how to create simple animation in WPF.

WPF animates object by applying animation to their individual properties. For example, Button can be animated by changing Width, Height, Color, Opacity properties etc. Property must be dependency property if you want to apply animation on it.

Below are majorly used different types of Animation in WPF
  1. Double Animation
  2. Color Animation
  3. Point Animation
  4. Decimal Animation
  5. Integer Animation


Let’s start with simple example.

XAML
<Grid>
<Rectangle Height="100" Width="100"
            Fill="Red"
            Name="MyRectangle">
    <Rectangle.Triggers>
        <EventTrigger RoutedEvent="MouseEnter">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                        Storyboard.TargetName="MyRectangle"
                        Storyboard.TargetProperty="Width"
                        From="100" To="200"
                        Duration="0:0:1" />
                    <DoubleAnimation
                        Storyboard.TargetName="MyRectangle"
                        Storyboard.TargetProperty="Height"
                        From="100" To="200"
                        Duration="0:0:1" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="MouseLeave">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                        Storyboard.TargetName="MyRectangle"
                        Storyboard.TargetProperty="Width"
                        To="100"
                        Duration="0:0:1" />
                    <DoubleAnimation
                        Storyboard.TargetName="MyRectangle"
                        Storyboard.TargetProperty="Height"
                        To="100"
                        Duration="0:0:1" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Rectangle.Triggers>
</Rectangle>
</Grid>

video

As shown in above example, Rectangle has two event triggers set with two different routed event one is MouseEnter and another is MouseLeave. So when mouse enters inside rectangle area the MouseEnter trigger will get fired and start animation block which increase height and width of rectangle from 100 to 200. When mouse leave from rectangle area it will fire MouseLeave trigger and start animation which reduce height and width of rectangle to 100.

Let’s have a look on below example which uses RepeatBehavior and AutoReverse property.

<Grid>
<Rectangle Height="100" Width="100"
            Fill="Red"
            Name="MyRectangle">
    <Rectangle.Triggers>
        <EventTrigger RoutedEvent="MouseEnter">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                        Storyboard.TargetName="MyRectangle"
                        Storyboard.TargetProperty="Width"
                        From="100" To="200"
                        AutoReverse="True"
                        RepeatBehavior="Forever"
                        Duration="0:0:1" />
                    <DoubleAnimation
                        Storyboard.TargetName="MyRectangle"
                        Storyboard.TargetProperty="Height"
                        From="100" To="200"
                        AutoReverse="True"
                        RepeatBehavior="Forever"
                        Duration="0:0:1" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Rectangle.Triggers>
</Rectangle>
</Grid>

video


In above example, AutoReverse and RepeatBehavior properties are used. AutoReverse property ensures when animation reach to specified duration it will automatically reverse the animation. RepeatBehavior specifies how many times you want to play animation. In our example we specified to forever mean animation will play forever. We can also specify numbers like “2” if we want to repeat for two times.  

Below are some important properties used in animation -

Property Name
Description
Storyboard.TargetName
Specify the name of an object on which you want to perform animation.
Storyboard.TargetProperty
Specify the dependency property to animate.
Duration
Defines time for animation.
From
Starting value
To
Ending value
RepeatBehavior
Specify how many times animation plays.
AutoReverse
Specify whether animation plays backwards after it reaches to end of duration.


Simple Animation using ColorAnimation

XAML
<Grid>
<Rectangle Height="100" Width="100"
    Name="MyRectangle">
    <Rectangle.Fill>
        <SolidColorBrush x:Name="MyColor" Color="Red" />
    </Rectangle.Fill>
    <Rectangle.Triggers>
        <EventTrigger RoutedEvent="MouseEnter">
            <BeginStoryboard>
                <Storyboard>
                    <ColorAnimation
                        Storyboard.TargetName="MyColor"
                        Storyboard.TargetProperty="Color"
                        From="Red" To="Blue"
                        AutoReverse="True"
                        RepeatBehavior="Forever"
                        Duration="0:0:2" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Rectangle.Triggers>
</Rectangle>
</Grid>

video


In above example, ColorAnimation class is used to animate color inside rectangle. Rectangle has SolidColorBrush named MyColor and the same object is used in animation while MouseEnter on Rectangle.

Hope you liked this article. Please feel free to write feedback/comments in comments section.

See Also - 

No comments:

Post a Comment