WPF实现动画效果（六）之路径动画
WPF动画效果系列
WPF实现动画效果（一）之基本概念
WPF实现动画效果（二）之From/To/By 动画
WPF实现动画效果（三）之时间线（TimeLine）
WPF实现动画效果（四）之缓动函数
WPF实现动画效果（五）之关键帧动画
WPF实现动画效果（六）之路径动画
WPF实现动画效果（七）之演示图板
正文
路径动画是一种专门用于将对象按照指定的Path移动的动画，虽然我们也可以通过控制动画的旋转和偏移实现对象的移动，但路径动画更专业，它的实现更加简洁明了。
路径动画中最常用的是MatrixAnimationUsingPath，它通常用于控制对象的MatrixTransform，一个简单的例子如下：
<Canvas >
<Canvas.Resources>
<PathGeometry x:Key="path" Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" />
<Storyboard x:Key="pathStoryboard" >
<MatrixAnimationUsingPath PathGeometry="{StaticResource path}"
Storyboard.TargetName="ButtonMatrixTransform"
Storyboard.TargetProperty="Matrix"
DoesRotateWithTangent="True"
Duration="0:0:5" RepeatBehavior="Forever" >
</MatrixAnimationUsingPath>
</Storyboard>
</Canvas.Resources>
<Canvas.Triggers>
<EventTrigger RoutedEvent="Control.Loaded">
<BeginStoryboard Storyboard="{StaticResource pathStoryboard}" />
</EventTrigger>
</Canvas.Triggers>
<Path Data="{StaticResource path}" Stroke="Black" StrokeThickness="1" />
<Button Width="50" Height="20" >
<Button.RenderTransform>
<MatrixTransform x:Name="ButtonMatrixTransform" />
</Button.RenderTransform>
</Button>
</Canvas>注意这儿有一个DoesRotateWithTangent的属性，设置上它后，对象在移动的过程中还能根据路径的坡度旋转，非常有用。
除了MatrixAnimationUsingPath外，另外还有两种路径动画：PointAnimationUsingPath和DoubleAnimationUsingPath。PointAnimationUsingPath用于靠中心点确定位置的形状，
<Canvas >
<Canvas.Resources>
<PathGeometry x:Key="path" Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" />
<Storyboard x:Key="pathStoryboard" >
<PointAnimationUsingPath PathGeometry="{StaticResource path}"
Storyboard.TargetName="ellipse"
Storyboard.TargetProperty="Center"
Duration="0:0:5" RepeatBehavior="Forever" >
</PointAnimationUsingPath>
</Storyboard>
</Canvas.Resources>
<Canvas.Triggers>
<EventTrigger RoutedEvent="Control.Loaded">
<BeginStoryboard Storyboard="{StaticResource pathStoryboard}" />
</EventTrigger>
</Canvas.Triggers>
<Path Data="{StaticResource path}" Stroke="Black" StrokeThickness="1" />
<Path Fill="Orange">
<Path.Data>
<EllipseGeometry x:Name="ellipse" Center="5,5" RadiusX="12" RadiusY="12"/>
</Path.Data>
</Path>
</Canvas>DoubleAnimationUsingPath则是通过X、Y和Angle三个属性联合实现路径的变化，一般在TranslateTransform中使用，如下就是一个简单的例子：
<Canvas >
<Canvas.Resources>
<PathGeometry x:Key="path" Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" />
<Storyboard x:Key="pathStoryboard" >
<DoubleAnimationUsingPath PathGeometry="{StaticResource path}"
Storyboard.TargetName="translateTransform"
Storyboard.TargetProperty="X"
Source="X"
Duration="0:0:5" RepeatBehavior="Forever" >
</DoubleAnimationUsingPath>
<DoubleAnimationUsingPath PathGeometry="{StaticResource path}"
Storyboard.TargetName="translateTransform"
Storyboard.TargetProperty="Y"
Source="Y"
Duration="0:0:5" RepeatBehavior="Forever" >
</DoubleAnimationUsingPath>
</Storyboard>
</Canvas.Resources>
<Canvas.Triggers>
<EventTrigger RoutedEvent="Control.Loaded">
<BeginStoryboard Storyboard="{StaticResource pathStoryboard}" />
</EventTrigger>
</Canvas.Triggers>
<Path Data="{StaticResource path}" Stroke="Black" StrokeThickness="1" />
<Path Fill="Orange">
<Path.Data>
<EllipseGeometry x:Name="ellipse" Center="5,5" RadiusX="12" RadiusY="12"/>
</Path.Data>
<Path.RenderTransform>
<TranslateTransform x:Name="translateTransform" />
</Path.RenderTransform>
</Path>
</Canvas>到此这篇关于WPF实现动画效果之路径动画的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
