WPF中的動畫——(五)路徑動畫
阿新 • • 發佈:2018-05-15
hid height TP ima 簡單的 .html ani xtra 很難 原文: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"View Code/> 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> 1314 <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>
註意這兒有一個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類似,但比它用法復雜,很難找到它的使用場景,但由於它的控制維度更多,可能一般用於需要更多的控制的地方吧。
WPF中的動畫——(五)路徑動畫