WPF中的动画——（五）路径动画
2021-04-10 19:25
标签：ota transform fill pat 通过 triggers src target tran 路径动画是一种专门用于将对象按照指定的Path移动的动画，虽然我们也可以通过控制动画的旋转和偏移实现对象的移动，但路径动画更专业，它的实现更加简洁明了。 路径动画中最常用的是MatrixAnimationUsingPath，它通常用于控制对象的MatrixTransform，一个简单的例子如下： 注意这儿有一个DoesRotateWithTangent的属性，设置上它后，对象在移动的过程中还能根据路径的坡度旋转，非常有用。 除了MatrixAnimationUsingPath外，另外还有两种路径动画：PointAnimationUsingPath和DoubleAnimationUsingPath。PointAnimationUsingPath用于靠中心点确定位置的形状， DoubleAnimationUsingPath则是通过X、Y和Angle三个属性联合实现路径的变化，一般在TranslateTransform中使用，如下就是一个简单的例子： 这个实现的效果和MatrixAnimationUsingPath类似，但比它用法复杂，很难找到它的使用场景，但由于它的控制维度更多，可能一般用于需要更多的控制的地方吧。 WPF中的动画——（五）路径动画 标签：ota transform fill pat 通过 triggers src target tran 原文地址：https://www.cnblogs.com/lonelyxmas/p/9039105.html
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>
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>
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>