WPF中的动画——(五)路径动画

原文: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>

注意这儿有一个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>

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>

这个实现的效果和MatrixAnimationUsingPath类似,但比它用法复杂,很难找到它的使用场景,但由于它的控制维度更多,可能一般用于需要更多的控制的地方吧。

原文地址:https://www.cnblogs.com/lonelyxmas/p/9039105.html

时间: 2024-10-20 17:34:04

WPF中的动画——(五)路径动画的相关文章

WPF动画之路径动画(3)

XAML代码: 1 <Window x:Class="路径动画.MainWindow" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 Title="MainWindow" Height="350"

WPF中的动画——(五)关键帧动画(转)

WPF中的动画——(五)关键帧动画 与 From/To/By 动画类似,关键帧动画以也可以以动画形式显示目标属性值. 和From/To/By 动画不同的是, From/To/By 动画只能控制在两个状态之间变化,而关键帧动画则可以在多个状态之间变化,例如,对于前面那个改变按钮宽度的例子,如果我们要实现如下效果: 在2秒时将宽度从 0变为350 在7秒时将宽度变为50 在9秒的时候将其宽度变为200 虽然我们可以用三个From/To/By 动画组合实现类似效果,但是这样一来麻烦,二来要感知动画完成

WPF中的动画——(五)关键帧动画

与 From/To/By 动画类似,关键帧动画以也可以以动画形式显示目标属性值. 和From/To/By 动画不同的是, From/To/By 动画只能控制在两个状态之间变化,而关键帧动画则可以在多个状态之间变化,例如,对于前面那个改变按钮宽度的例子,如果我们要实现如下效果: 在2秒时将宽度从 0变为350 在7秒时将宽度变为50 在9秒的时候将其宽度变为200 虽然我们可以用三个From/To/By 动画组合实现类似效果,但是这样一来麻烦,二来要感知动画完成事件,不方便在XAML中使用.此时我

WPF中的动画——(一)基本概念

WPF的一个特点就是支持动画,我们可以非常容易的实现漂亮大方的界面.首先,我们来复习一下动画的基本概念.计算机中的动画一般是定格动画,也称之为逐帧动画,它通过每帧不同的图像连续播放,从而欺骗眼和脑产生动画效果.其原理在维基百科上有比较详尽的解释,这里就不多介绍了. 也就是说,我们要产生动画,只需要连续刷新界面即可.例如,我们要实现一个宽度变化的按钮的动画,可以用如下方式来实现: private void MainWindow_Loaded(object sender, RoutedEventAr

【WPF学习】第五十五章 基于路径的动画

基于路径的动画使用PathGeometry对象设置属性.尽管原则上基于路径的动画也能用于修改任何适当数据类型的属性,但当动态改变与位置相关的属性时最有用.实际上,基于路径的动画类主要用于帮助沿着一条路径移动可视化对象. 正如在“[WPF学习]第四十三章 路径和几何图形”学过的,PathGeometry对象描述可包含直线.弧线以及曲线的图形.下图显示的示例具有一个PathGeometry对象,该对象包含两条弧线以及一条将最后定义的点连接到起点的直线段.这样就创建了一条闭合的路线,一个小的矢量图像以

WPF路径动画(动态逆向动画)

WPF 中的Path.Data 不再多介绍,M开始坐标点 C弧度坐标点 L 直线坐标点 <Path x:Name="path0" Data="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" Height="135.32" Stretch="Uniform" Stroke="#FF61E70A" StrokeThickness="2

WPF中的简单水动画

原文 https://stuff.seans.com/2008/08/21/simple-water-animation-in-wpf/ 很多年前(80年代中期),我在一家拥有Silicon Graphics工作站的公司工作.在旨在展示SGI机器高端图形的少数演示中,有一个模拟了一个小线框网格中的波传播.通过更改网格中的点的高度然后让模拟运行来玩游戏非常有趣.并且SGI机器足够快,结果动画只是令人着迷. 在WPF中重新创建这个水模拟似乎是一个很好的方式来学习WPF中的3D图形.(最终结果在这里)

【WPF学习】第五十二章 动画性能

通常,为用户界面应用动画只不过是创建并配置正确的动画和故事板对象.但在其他情况下,特别是同时发生多个动画时,可能需要更加关注性能.特定的效果更可能导致这些问题——例如,那些涉及视频.大位图以及多层透明等的效果通常需要占用更多CPU开销.如果不谨慎实现这类效果,运行它们使可能造成明显抖动,或者会从其他同时运行的应用程序抢占CPU时间. 幸运的是,WPF提供了几个可提供帮助的技巧.接下来的几节将学习降低最大帧率以及缓存计算机显卡中的位图,这两种技术可以减轻CPU的负担. 一.期望的帧率 正如前面所学

WPF中的动画——(三)时间线(TimeLine)

时间线(TimeLine)表示时间段. 它提供的属性可以让控制该时间段的长度.开始时间.重复次数.该时间段内时间进度的快慢等等.在WPF中内置了如下几种TimeLine: AnimationTimeline?:前面已经介绍过,主要用于属性的过渡,这种是最常见的动画. MediaTimeline:用于控制媒体文件播放的时间线. ParallelTimeline:ParallelTimeline?是一种可对其他时间线进行分组的时间线,可用于实现较复杂的动画. Storyboard?:一种特殊的?Pa