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).
