WPF中的动画——（五）路径动画

路径动画是一种专门用于将对象按照指定的Path移动的动画，虽然我们也可以通过控制动画的旋转和偏移实现对象的移动，但路径动画更专业，它的实现更加简洁明了。

路径动画中最常用的是MatrixAnimationUsingPath，它通常用于控制对象的MatrixTransform，一个简单的例子如下： 

1 <Canvas > 2 <Canvas.Resources> 3 <PathGeometry x:Key="path" Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" /> 4 <Storyboard x:Key="pathStoryboard" > 5 <MatrixAnimationUsingPath PathGeometry="{StaticResource path}" 6 Storyboard.TargetName="ButtonMatrixTransform" 7 Storyboard.TargetProperty="Matrix" 8 DoesRotateWithTangent="True" 9 Duration="0:0:5" RepeatBehavior="Forever" > 10 </MatrixAnimationUsingPath> 11 </Storyboard> 12 </Canvas.Resources> 13 14 <Canvas.Triggers> 15 <EventTrigger RoutedEvent="Control.Loaded"> 16 <BeginStoryboard Storyboard="{StaticResource pathStoryboard}" /> 17 </EventTrigger> 18 </Canvas.Triggers> 19 20 <Path Data="{StaticResource path}" Stroke="Black" StrokeThickness="1" /> 21 22 <Button Width="50" Height="20" > 23 <Button.RenderTransform> 24 <MatrixTransform x:Name="ButtonMatrixTransform" /> 25 </Button.RenderTransform> 26 </Button> 27 </Canvas> View Code

注意这儿有一个DoesRotateWithTangent的属性，设置上它后，对象在移动的过程中还能根据路径的坡度旋转，非常有用。

除了MatrixAnimationUsingPath外，另外还有两种路径动画：PointAnimationUsingPath和DoubleAnimationUsingPath。PointAnimationUsingPath用于靠中心点确定位置的形状， 

1 <Canvas > 2 <Canvas.Resources> 3 <PathGeometry x:Key="path" Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" /> 4 <Storyboard x:Key="pathStoryboard" > 5 <PointAnimationUsingPath PathGeometry="{StaticResource path}" 6 Storyboard.TargetName="ellipse" 7 Storyboard.TargetProperty="Center" 8 Duration="0:0:5" RepeatBehavior="Forever" > 9 </PointAnimationUsingPath> 10 </Storyboard> 11 </Canvas.Resources> 12 13 <Canvas.Triggers> 14 <EventTrigger RoutedEvent="Control.Loaded"> 15 <BeginStoryboard Storyboard="{StaticResource pathStoryboard}" /> 16 </EventTrigger> 17 </Canvas.Triggers> 18 19 <Path Data="{StaticResource path}" Stroke="Black" StrokeThickness="1" /> 20 21 <Path Fill="Orange"> 22 <Path.Data> 23 <EllipseGeometry x:Name="ellipse" Center="5,5" RadiusX="12" RadiusY="12"/> 24 </Path.Data> 25 </Path> 26 </Canvas> View Code

 DoubleAnimationUsingPath则是通过X、Y和Angle三个属性联合实现路径的变化，一般在TranslateTransform中使用，如下就是一个简单的例子： 

1 <Canvas > 2 <Canvas.Resources> 3 <PathGeometry x:Key="path" Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" /> 4 <Storyboard x:Key="pathStoryboard" > 5 <DoubleAnimationUsingPath PathGeometry="{StaticResource path}" 6 Storyboard.TargetName="translateTransform" 7 Storyboard.TargetProperty="X" 8 Source="X" 9 Duration="0:0:5" RepeatBehavior="Forever" > 10 </DoubleAnimationUsingPath> 11 <DoubleAnimationUsingPath PathGeometry="{StaticResource path}" 12 Storyboard.TargetName="translateTransform" 13 Storyboard.TargetProperty="Y" 14 Source="Y" 15 Duration="0:0:5" RepeatBehavior="Forever" > 16 </DoubleAnimationUsingPath> 17 </Storyboard> 18 </Canvas.Resources> 19 20 <Canvas.Triggers> 21 <EventTrigger RoutedEvent="Control.Loaded"> 22 <BeginStoryboard Storyboard="{StaticResource pathStoryboard}" /> 23 </EventTrigger> 24 </Canvas.Triggers> 25 26 <Path Data="{StaticResource path}" Stroke="Black" StrokeThickness="1" /> 27 28 <Path Fill="Orange"> 29 <Path.Data> 30 <EllipseGeometry x:Name="ellipse" Center="5,5" RadiusX="12" RadiusY="12"/> 31 </Path.Data> 32 <Path.RenderTransform> 33 <TranslateTransform x:Name="translateTransform" /> 34 </Path.RenderTransform> 35 </Path> 36 </Canvas> View Code

 这个实现的效果和MatrixAnimationUsingPath类似，但比它用法复杂，很难找到它的使用场景，但由于它的控制维度更多，可能一般用于需要更多的控制的地方吧。

 

转载于:https://www.cnblogs.com/TianFang/p/4071954.html

总结

以上是生活随笔为你收集整理的WPF中的动画——（五）路径动画的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。