WPF中有三种动画类型:线性插值、关键帧和路径动画。这三种动画都是在System.Windows.Media.Animation命名空间中,其中路径动画有三种:MatrixAnimationUsingPath、PointAnimationUsingPath、DoubleAnimationUsingPath。
以DoubleAnimationUsingPath动画类的示例代码:
<Window x:Class="TestDemo.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">
<Window.Resources>
<!--路径资源-->
<PathGeometry x:Key="path">
<PathFigure IsClosed="False" StartPoint="140,20">
<ArcSegment Point="140,20" Size="11,10" SweepDirection="Clockwise"></ArcSegment>
<ArcSegment Point="140,100" Size="11,10" SweepDirection="Clockwise"></ArcSegment>
<ArcSegment Point="140,20" Size="11,10" SweepDirection="Clockwise"></ArcSegment>
<ArcSegment Point="140,150" Size="11,10" SweepDirection="Clockwise"></ArcSegment>
<ArcSegment Point="140,20" Size="11,10" SweepDirection="Clockwise"></ArcSegment>
<ArcSegment Point="140,200" Size="11,10" SweepDirection="Clockwise"></ArcSegment>
<ArcSegment Point="140,20" Size="11,10" SweepDirection="Clockwise"></ArcSegment>
<ArcSegment Point="140,250" Size="11,10" SweepDirection="Clockwise"></ArcSegment>
<ArcSegment Point="140,20" Size="11,10" SweepDirection="Clockwise"></ArcSegment>
</PathFigure>
</PathGeometry>
</Window.Resources>
<!---事件触发器,窗体加载时动画开始,周期6秒,无限循环-->
<Window.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingPath Storyboard.TargetName="image" Storyboard.TargetProperty="(Canvas.Left)"
PathGeometry="{StaticResource path}" Duration="0:0:6" RepeatBehavior="Forever" Source="X"/>
<DoubleAnimationUsingPath Storyboard.TargetName="image" Storyboard.TargetProperty="(Canvas.Top)"
PathGeometry="{StaticResource path}" Duration="0:0:6" RepeatBehavior="Forever" Source="Y"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Window.Triggers>
<Canvas>
<!--动画路径-->
<Path Stroke="Gray" Data="{StaticResource path}"></Path>
<!--动画元素-->
<Image Name="image" Source="G:\Mydemo\TestDemo\TestDemo\Images\timg (11).png" Width="20" />
</Canvas>
</Window>
效果图:
图中的图片会先沿着最小的圆开始顺时针旋转到最大的圆。