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

  基于路径的动画使用PathGeometry对象设置属性。尽管原则上基于路径的动画也能用于修改任何适当数据类型的属性,但当动态改变与位置相关的属性时最有用。实际上,基于路径的动画类主要用于帮助沿着一条路径移动可视化对象。

  正如在“【WPF学习】第四十三章 路径和几何图形”学过的,PathGeometry对象描述可包含直线、弧线以及曲线的图形。下图显示的示例具有一个PathGeometry对象,该对象包含两条弧线以及一条将最后定义的点连接到起点的直线段。这样就创建了一条闭合的路线,一个小的矢量图像以恒定不变的速度在这条路径上运动。

  下图显示的示例具有一个PathGeometry对象,该对象包含两条弧线以及一条将最后定义的点连接到起点的直线段。这样就创建了一条闭合的路线,一个小的矢量图像以恒定不变的速度在这一条路径上运动。

  创建这个示例很容易。第一步是构建希望使用的路径。在这个示例中,路径被定义为资源:

<Window.Resources>
        <PathGeometry x:Key="path">
            <PathFigure IsClosed="True">
                <ArcSegment Point="100,200" Size="15,10" SweepDirection="Clockwise"></ArcSegment>
                <ArcSegment Point="400,50" Size="5,5" ></ArcSegment>
            </PathFigure>
        </PathGeometry>
</Window.Resources>

  这个示例显示了路径,当然这不是必须的。这样可以清晰地看到图像沿着定义的路径运动。为显示路径,只需要添加一个使用上面定义的集合图形的Path元素:

<Path Stroke="Red" StrokeThickness="1" Data="{StaticResource path}" Canvas.Top="10" Canvas.Left="10">
</Path>

  Path元素被放置到Canvas面板上,另外,希望沿着该路径运动的Image元素也被放在Canvas面板上:

<Image Name="image">
            <Image.Source>
                <DrawingImage>
                    <DrawingImage.Drawing>
                        <GeometryDrawing Brush="LightSteelBlue">
                            <GeometryDrawing.Geometry>
                                <GeometryGroup>
                                    <EllipseGeometry Center="10,10" RadiusX="9" RadiusY="4" />
                                    <EllipseGeometry Center="10,10" RadiusX="4" RadiusY="9" />
                                </GeometryGroup>
                            </GeometryDrawing.Geometry>
                            <GeometryDrawing.Pen>
                                <Pen Thickness="1" Brush="Black" />
                            </GeometryDrawing.Pen>
                        </GeometryDrawing>
                    </DrawingImage.Drawing>
                </DrawingImage>
            </Image.Source>
        </Image>

  最后创建移动图像的动画。为移动图像,需要调整Canvas.Left和Canvas.Top属性。DoubleAnimationUsingPath动画类可完成该任务,但需要两个动画——一个用于处理Canvas.Left属性,另一个用于处理Canvas.Top属性。下面是完整的故事板:

<Storyboard>
        <DoubleAnimationUsingPath Storyboard.TargetName="image"
                                      Storyboard.TargetProperty="(Canvas.Left)"
                                     PathGeometry="{StaticResource path}"
                                      Duration="0:0:5" RepeatBehavior="Forever" Source="X" />
         <DoubleAnimationUsingPath Storyboard.TargetName="image"
                                      Storyboard.TargetProperty="(Canvas.Top)"
                                     PathGeometry="{StaticResource path}"
                                      Duration="0:0:5" RepeatBehavior="Forever" Source="Y" />
</Storyboard>

  正如可能看到的,当创建基于路径的动画时,不是提供开始值和结束值,而是通过PathGeometry属性指定希望使用的PathGeometry对象。一些基于路径的动画类,如PointAnimationUsingPath类,可同时为目标属性应用X和Y组件。但DoubleAnimationUsingPath类不具备这一能力,因为它只能设置双精度值。结果,还需要将Source属性设置为X或Y,以指示是使用路径的X坐标还是Y坐标。

  尽管基于路径的动画可使用包含贝塞尔曲线的路径,但它与上一章介绍的关键样条动画区别很大。在关键样条动画中,贝塞尔曲线描述动画进度和时间之间的关系,从而可以创建变速动画。但在基于路径的动画中,由直线和曲线的集合构成的路径决定了将用于动画属性的值。

  

原文地址:https://www.cnblogs.com/Peter-Luo/p/12421938.html

时间: 2024-07-30 00:41:32

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

【WPF学习】第二十四章 基于范围的控件

原文:[WPF学习]第二十四章 基于范围的控件 WPF提供了三个使用范围概念的控件.这些控件使用在特定最小值和最大值之间的数值.这些控件--ScrollBar.ProgressBar以及Slider--都继承自RangeBase类(该类又继承自Control类).尽管它们使用相同的抽象概念(范围),但工作方式却又很大的区别. 下表显示了RangeBase类定义的属性: 表 RangeBase类的属性 通常不比直接使用ScrollBar控件.更高级的ScrollViewer控件(封装了两个Scro

【WPF学习】第二十九章 元素绑定——将元素绑定到一起

原文:[WPF学习]第二十九章 元素绑定--将元素绑定到一起 数据banding的最简单情形是,源对象时WPF元素而且源属性是依赖性属性.前面章节解释过,依赖项属性具有内置的更改通知支持.因此,当在源对象中改变依赖项属性的值时,会立即更新目标对象中的绑定属性.这正是我们所需要的行为--而且不必为此构建任何额外的基础结构. 为理解如何将一个元素绑定到另一个元素,下面创建一个简单的示例.该示例窗口包含了两个控件:一个Slider控件和一个具有单行文本的TextBlock控件.如果向右拖动滑动条上的滑

【WPF学习】第十四章 事件路由

原文:[WPF学习]第十四章 事件路由 由上一章可知,WPF中的许多控件都是内容控件,而内容控件可包含任何类型以及大量的嵌套内容.例如,可构建包含图形的按钮,创建混合了文本和图片内容的标签,或者为了实现滚动或折叠的显示效果而在特定容器中放置内容.设置可以多次重复嵌套,直至达到你所希望的层次深度.如下所示: <Window x:Class="RouteEvent.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2

【WPF学习】第十九章 控件类

原文:[WPF学习]第十九章 控件类 WPF窗口充满了各种元素,但这些元素中只有一部分是控件.在WPF领域,控件通常被描述为与用户交互的元素--能接收焦点并接受键盘或鼠标输入的元素.明显的例子包括文本框和按钮.然而,这个区别有时有些模糊.将工具提示视为控件,因为它根据用户鼠标的移动显示或消失.将标签视为控件,因为它支持记忆码(mnemonics,将焦点转移到相关控件快捷键). 所有控件都继承自System.Windows.Control类,该类添加了一小部分基本的基础结构: 设置控件内容对齐方式

【WPF学习】第二十六章 Application类——应用程序的生命周期

原文:[WPF学习]第二十六章 Application类--应用程序的生命周期 在WPF中,应用程序会经历简单的生命周期.在应用程序启动后,将立即创建应用程序对象,在应用程序运行时触发各种应用程序事件,你可以选择监视其中的某些事件.最后,当释放应用程序对象时,应用程序将结束. 一.创建Application对象 使用Application类的最简单方式是手动创建它.下面的示例演示了最小的程序:在应用程序入口(Main()方法)处创建名为MainWindow的窗口,并启动一个新的应用程序: 在本质

【WPF学习】第十五章 WPF事件

前两章学习了WPF事件的工作原理,现在分析一下在代码中可以处理的各类事件.尽管每个元素都提供了许多事件,但最重要的事件通常包括以下5类: 生命周期事件:在元素被初始化.加载或卸载时发生这些事件. 鼠标事件:这些事件是鼠标动作的结果. 键盘事件:这些事件是键盘动作(如按下键盘上的键)的结果. 手写笔事件:这些事件是使用类似钢笔的手写笔的结果.在平板电脑上用手写笔代替鼠标. 多点触控事件:这些事件是一根或多根手指在多点触控屏上触摸的结果.尽在Windows7中支持这些事件. 一.生命周期事件 当首次

【WPF学习】第二十五章 日期控件

WPF包含两个日期控件:Calender和DatePicker.这两个控件都被设计为允许用户选择日期. Calendar控件显示日期,在与Windows操作系统中看到的日历(例如,当配置系统日期时看到的日历)相似.该控件每次显示一个月份,允许从一个月份跳到另一个月份(通过单击箭头按钮),或跳到某个特定的月份(通过单击月份的标题头查看一年中的月份,然后单击月份). DatePicker控件需要的空间更少.它模范简单的文本框,该文本框以长日期格式或短日期格式保存日期字符串.DatePicker控件提

【WPF学习】第十二章 属性验证

在定义任何类型的属性时,都需要面对错误设置属性的可能性.对于传统的.NET属性,可尝试在属性设置器中捕获这类问题.但对于依赖项属性而言,这种方法不合适,因为可能通过WPF属性系统使用SetValue()方法直接设置属性. 作为代替,WPF提供了两种方法来阻止非法值: ValidateValueCallback:该回调函数可接受或拒绝新值.通常,该回调函数用于捕获违反属性约束的明显错误.可作为DependencyProperty.Register()方法的一个参数提供该回调函数. CoerceVa

【WPF学习】第十六章 键盘输入

当用户按下键盘上的一个键时,就会发生一系列事件.下表根据他们的发生顺序列出了这些事件: 表 所有元素的键盘事件(按顺序) 键盘处理永远不会像上面看到的这么简单.一些控件可能会挂起这些事件中的某些事件,从而可执行自己更特殊的键盘处理.最明显的例子是TextBox控件,它挂起了TextInput事件.对于一些按键,TextBox控件还挂起了KeyDown事件,如方向键.对于此类情形,通常仍可使用隧道路由事件(PreviewTextInput和PreviewKeyDown事件). TextBox控件还