2D Animations with WPF
So, here is the catch; it is really easy to create animations with WPF, all you have to do is to create your objects and let storyboard handle the rest.
Lets give it a try;
First of all create a WPF applications in Visual Studio, then in the XAML window of Window1.xaml paste the following code
<Window x:Class="RichContent.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="RichContent" Height="557" Width="730">
<Canvas>
<Path Name="MyPath" Width="800" Height="800"
StrokeThickness="20" StrokeDashArray="0.5,2"
StrokeDashCap="Round" >
<Path.Data>
<CombinedGeometry GeometryCombineMode="Union">
<CombinedGeometry.Geometry1>
<EllipseGeometry x:Name="MyEllipseGeometry" Center="200,200" RadiusX="150" RadiusY="150" />
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<EllipseGeometry Center="400,200" RadiusX="150" RadiusY="150" />
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</Path.Data>
<Path.Fill>
<VisualBrush>
<VisualBrush.Visual>
<TextBlock Text="Hello World" FontWeight="Bold" Padding="10">
<TextBlock.Background>
<LinearGradientBrush>
<GradientStop Offset="0" Color="Yellow" />
<GradientStop Offset="1" Color="Red" />
</LinearGradientBrush>
</TextBlock.Background>
</TextBlock>
</VisualBrush.Visual>
</VisualBrush>
</Path.Fill>
<Path.Stroke>
<LinearGradientBrush>
<GradientStop Offset="0" Color="Black" />
<GradientStop Offset="1" Color="White" />
</LinearGradientBrush>
</Path.Stroke>
</Path>
</Canvas>
</Window>
|
The Geometry will create 2 circles intersected which will have dashed side strokes,
Now lets add some animation to it; Insert the following triggers into your XAML Code; this will be a double animation and the contours of the geometry should be animated;
<Path.Triggers>
<EventTrigger RoutedEvent="Path.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyPath"
Storyboard.TargetProperty="StrokeDashOffset"
To="20" Duration="0:0:10"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Path.Triggers>
|
And Finally lets add some more animation to the whole Picture as another storyboard
<BeginStoryboard>
<Storyboard>
<PointAnimation
Storyboard.TargetName="MyEllipseGeometry"
Storyboard.TargetProperty="Center"
From="150,100" To="650,200" Duration="0:0:3"
RepeatBehavior="Forever" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
|
You now have a combined shape with 2 simultaneous animations.
