PahtAnimation路径动画:
PointAnimationUsingPath使用路径坐标动画效果
关注点:
1 PointAnimationUsingPath 类:对两个或更多个目标值之间的 Point 属性值进行动画处理,通过使用 PathGeometry 指定这些目标值。 此动画可用于沿着路径移动可视对象。
- 设置一个线性形状Path及一个几何圆的形状Path
<Canvas HorizontalAlignment="Left" Width="340" Height="240" >
<!-- This Path is only to show the path that the animated object will follow. -->
<Path VerticalAlignment="Top" Margin="15,15,15,15"
Data="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100"
Stroke="Black" StrokeThickness="2"
Stretch="None" />
<Path Fill="Blue" Margin="15,15,15,15">
<Path.Data>
<!-- Describes an ellipse. -->
<EllipseGeometry x:Name="MyAnimatedEllipseGeometry"
Center="10,100" RadiusX="15" RadiusY="15" />
</Path.Data>
</Path>
</Canvas>
- 针对几何圆使用路径坐标动画PointAnimationUsingPath,此处需PointAnimationUsingPath.PathGeometry确定路径路线
<!-- Create a button to restart the animation. -->
<Button Width="80" HorizontalAlignment="Left" >Start Animation
<!-- Trigger and StoryBoard to initiate the animation when the button is clicked. -->
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard Name="MyBeginStoryboard">
<Storyboard>
<!-- Animates the ellipse along the path. -->
<PointAnimationUsingPath
Storyboard.TargetName="MyAnimatedEllipseGeometry"
Storyboard.TargetProperty="Center"
Duration="0:0:5"
RepeatBehavior="Forever" AutoReverse="True" >
<PointAnimationUsingPath.PathGeometry>
<PathGeometry Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" />
</PointAnimationUsingPath.PathGeometry>
</PointAnimationUsingPath>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</StackPanel>
DoubleAnimationUsingPathExample使用路径浮点值动画
同理针对矩形使用路径浮点值动画,不过动画对象为矩形的平移转换器的X、Y值。
<!-- Trigger and StoryBoard to initiate the animation when the button is clicked. -->
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard Name="MyBeginStoryboard">
<Storyboard>
<!-- Animates the rectangle horizotally along the path. -->
<DoubleAnimationUsingPath
Storyboard.TargetName="MyAnimatedTransform"
Storyboard.TargetProperty="X"
Source="X"
Duration="0:0:5"
RepeatBehavior="Forever" AutoReverse="True" >
<DoubleAnimationUsingPath.PathGeometry>
<PathGeometry Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" />
</DoubleAnimationUsingPath.PathGeometry>
</DoubleAnimationUsingPath>
<!-- Animates the rectangle vertically along the path. -->
<DoubleAnimationUsingPath
Storyboard.TargetName="MyAnimatedTransform"
Storyboard.TargetProperty="Y"
Source="Y"
Duration="0:0:5"
RepeatBehavior="Forever" AutoReverse="True" >
<DoubleAnimationUsingPath.PathGeometry>
<PathGeometry Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" />
</DoubleAnimationUsingPath.PathGeometry>
</DoubleAnimationUsingPath>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
RotateAnimationUsingPathExample使用路径的旋转动画
要使矩形沿着路径运行,同时矩形的旋转角度跟随路线切线。
- 设计有矩形形状,且实例化有矩形的旋转及平移转换器。
<!-- This geometry renders the rectangle that is animated across the screen. -->
<Path Fill="Blue" Margin="0,0,15,15">
<Path.Data>
<RectangleGeometry x:Name="MyAnimatedRectGeometry" Rect="0,0 30 30" >
<RectangleGeometry.Transform>
<TransformGroup>
<RotateTransform x:Name="MyRotateTransform" Angle="0" CenterX="15" CenterY="15" />
<TranslateTransform x:Name="MyTranslateTransform" X="10" Y="100" />
</TransformGroup>
</RectangleGeometry.Transform>
</RectangleGeometry>
</Path.Data>
</Path>
针对矩形的旋转角度值DoubleAnimationUsingPath及平移转换器的X、YDoubleAnimationUsingPath动画:
<!-- Trigger and StoryBoard to initiate the animation when the button is clicked. -->
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard Name="MyBeginStoryboard">
<Storyboard>
<!-- Animates the angle along the path. -->
<DoubleAnimationUsingPath
Storyboard.TargetName="MyRotateTransform"
Storyboard.TargetProperty="Angle"
Source="Angle"
Duration="0:0:5"
RepeatBehavior="Forever" AutoReverse="True" >
<DoubleAnimationUsingPath.PathGeometry>
<PathGeometry Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" />
</DoubleAnimationUsingPath.PathGeometry>
</DoubleAnimationUsingPath>
<!-- Animates the rectangle horizotally along the path. -->
<DoubleAnimationUsingPath
Storyboard.TargetName="MyTranslateTransform"
Storyboard.TargetProperty="X"
Source="X"
Duration="0:0:5"
RepeatBehavior="Forever" AutoReverse="True" >
<DoubleAnimationUsingPath.PathGeometry>
<PathGeometry Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" />
</DoubleAnimationUsingPath.PathGeometry>
</DoubleAnimationUsingPath>
<!-- Animates the rectangle vertically along the path. -->
<DoubleAnimationUsingPath
Storyboard.TargetName="MyTranslateTransform"
Storyboard.TargetProperty="Y"
Source="Y"
Duration="0:0:5"
RepeatBehavior="Forever" AutoReverse="True" >
<DoubleAnimationUsingPath.PathGeometry>
<PathGeometry Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" />
</DoubleAnimationUsingPath.PathGeometry>
</DoubleAnimationUsingPath>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
MatrixAnimationUsingPathExample使用路径的Matrix动画效果
1、 MatrixAnimationUsingPath.DoesRotateWithTangent 属性:获取或设置一个值,该值指示对象是否沿路径的切线旋转。
- 图中并未设置Matrix动画值,默认为沿路径平移
- 当DoesRotateWithTangent=”True“时,矩形方框在平移时,会沿路径的线的角度旋转。
<!-- This button starts an animation that follows the tangent
of the path because DoesRotateWithTangent is set to "True".-->
<Button Width="300" HorizontalAlignment="Left" >
Start Animation with DoesRotateWithTangent="True"
<!-- Trigger and StoryBoard to initiate the animation when the button is clicked. -->
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<!-- Animates the button along the path following the tangent of the path. -->
<MatrixAnimationUsingPath
Storyboard.TargetName="myMatrixTransform"
Storyboard.TargetProperty="Matrix"
DoesRotateWithTangent="True"
Duration="0:0:5"
RepeatBehavior="Forever" AutoReverse="True" >
<MatrixAnimationUsingPath.PathGeometry>
<PathGeometry Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" />
</MatrixAnimationUsingPath.PathGeometry>
</MatrixAnimationUsingPath>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。