路徑動畫是一種專門用于將對象按照指定的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中的动画——（五）路径动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。