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

摘要:
基于路径的动画使用PathGeometry对象设置属性。虽然原则上,基于路径的动画也可以用于修改任何适当数据类型的属性,但在动态更改与位置相关的属性时,它最有用。事实上,基于路径的动画类主要用于帮助沿路径移动可视化对象。正如您在“第43章路径和几何体”中所了解的,PathGeometry对象描述可以包含直线、圆弧和曲线。

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

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

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

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

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

<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坐标。

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

  

免责声明:文章转载自《【WPF学习】第五十五章 基于路径的动画》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇界面设计师 Qt Designerionic常用的命令下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

iOS开发核心动画之粒子效果

一. 示意图     绘画出一条线,点击开始有很多粒子绕着线运动,点击重绘消除粒子和线 二. 实现代码     设计思路:自定义一个View来描述控制器的View,在View加载过程中进行初始化,给View添加手势(UIPanGestureRecognizer),将自定义View转成复制层,创建一个粒子层,添加到复制层上,并保存粒子     监...

WPF 任务栏图标闪烁提醒

1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Runtime.InteropServices; 5 using System.Text; 6 using System.Windows; 7 usin...

学习WPF——WPF布局——了解布局容器

WPF布局工作内部原理 WPF渲染布局时主要执行了两个工作:测量和排列 测量阶段,容器遍历所有子元素,并询问子元素所期望的尺寸 排列阶段,容器在合适的位置放置子元素,并设置元素的最终尺寸 这是一个递归的过程,界面中任何一个容器元素都会被遍历到 WPF布局容器的继承机制 DispatcherObject WPF应用程序使用单线程亲和模型(STA...

WPF LiveChart 图表详解

不喜欢看文字版, 点我看视频 本文主要介绍LiveChart.WPF 中的图表的使用方法 类: 数据绑定, 数据显示样式等。 导入LiveChart.Wpf NuGet搜索LiveChart包, 安装LiveChart.Wpf即可。 引用LiveChart.Wpf 在使用的界面当中引用LiveChart.Wpf的类库 xmlns:...

wpf treeview 数据绑定 递归绑定节点

1.先上效果 将所有节点加入ComboBox数据源,在ComboBox中选择时下方Treeview显示该节点下的子节点。 1.xaml文件,将以下代码加入界面合适位置 1     <StackPanel> 2 <StackPanel Margin="10"> 3 <La...

tween.js 插件

1.是什么?    jQueryTween是一款轻量级的jQuery补间动画工具库插件。使用jQueryTween可以制作出各种平滑的动画过渡效果。该插件基于tween.js,旨在简化各种补间动画操作,提供高性能的硬件加速动画。 2.tween的功能 可以制作延时和重复动画。 可以进行多种补间动画 能够为高性能硬件加速动画。换句话说就是在加载图片时的动作...