PointAnimation in WPF

PointAnimation in WPF

An animation updates the value of a property over a period of time. An animation effect can be subtle, such as moving a Shape a few pixels left and right, or dramatic, such as enlarging an object to 200 times its original size while spinning it and changing its color. To create an animation in Windows Presentation Foundation (WPF), you must associate an animation with an object's property value.

Target Values

The PointAnimation class creates a transition between two target values. To set its target values, use its From, To, and By properties. The following table summarizes how the From, To, and By properties may be used together or separately to determine an animation's target values.

From: The animation progresses from the value specified by the From property to the base value of the property being animated or to a previous animation's output value, depending on how the previous animation is configured.

From and  To: The animation progresses from the value specified by the From  property to the value specified by the To property.

<Window x:Class="TestWPF.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="300" Width="300">

<Grid>
    <Canvas>
        <Path Fill="Maroon" Margin="5,5,5,5">
            <Path.Data>
            <!-- Describes an ellipse. -->
                <EllipseGeometry x:Name="AnimatedEllipse" Center="20,40" RadiusX="15" RadiusY="30" />
            </Path.Data>
           
            <Path.Triggers>
                <EventTrigger RoutedEvent="Path.Loaded">
                    <BeginStoryboard Name="BeginStoryboard">
                        <Storyboard>
                            <PointAnimation Storyboard.TargetProperty="Center" Storyboard.TargetName="AnimatedEllipse" Duration="0:0:2" From="50,50" To="450,250" RepeatBehavior="Forever" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Path.Triggers>
        </Path>
    </Canvas>
</Grid>
</Window>

When you debug this application, ellipse start to animate from co-ordinate (50,50) to (450,250) because in this example I used From and To properties. Animation will start from point (50,50) and end with point (450,250).