WPF中的動畫——（五）路徑動畫

本文轉載自查看原文 2014-11-03 19:18 6836 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類似，但比它用法復雜，很難找到它的使用場景，但由於它的控制維度更多，可能一般用於需要更多的控制的地方吧。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 WPF之基於路徑的動畫 WPF中的動畫——（二）From/To/By 動畫 WPF路徑動畫(動態逆向動畫) WPF中的動畫——（五）關鍵幀動畫 WPF 利用路徑動畫做一個環形加載動畫 WPF路徑動畫——C#篇 WPF中的動畫——（一）基本概念 WPF中的動畫——（六）演示圖板 WPF動畫 WPF——動畫