WPF路径动画
天方 人气:0WPF动画效果系列
正文
路径动画是一种专门用于将对象按照指定的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实现动画效果之路径动画的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持。
加载全部内容