路径动画是一种专门用于将对象按照指定的Path移动的动画,虽然我们也可以通过控制动画的旋转和偏移实现对象的移动,但路径动画更专业,它的实现更加简洁明了。

路径动画中最常用的是MatrixAnimationUsingPath,它通常用于控制对象的MatrixTransform,一个简单的例子如下:

     <Canvas >
<Canvas.Resources>
<PathGeometry x:Key="path" Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" />
<Storyboard x:Key="pathStoryboard" >
<MatrixAnimationUsingPath PathGeometry="{StaticResource path}"
Storyboard.TargetName="ButtonMatrixTransform"
Storyboard.TargetProperty="Matrix"
DoesRotateWithTangent="True"
Duration="0:0:5" RepeatBehavior="Forever" >
</MatrixAnimationUsingPath>
</Storyboard>
</Canvas.Resources> <Canvas.Triggers>
<EventTrigger RoutedEvent="Control.Loaded">
<BeginStoryboard Storyboard="{StaticResource pathStoryboard}" />
</EventTrigger>
</Canvas.Triggers> <Path Data="{StaticResource path}" Stroke="Black" StrokeThickness="1" /> <Button Width="50" Height="20" >
<Button.RenderTransform>
<MatrixTransform x:Name="ButtonMatrixTransform" />
</Button.RenderTransform>
</Button>
</Canvas>

注意这儿有一个DoesRotateWithTangent的属性,设置上它后,对象在移动的过程中还能根据路径的坡度旋转,非常有用。

除了MatrixAnimationUsingPath外,另外还有两种路径动画:PointAnimationUsingPath和DoubleAnimationUsingPath。PointAnimationUsingPath用于靠中心点确定位置的形状,

     <Canvas >
<Canvas.Resources>
<PathGeometry x:Key="path" Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" />
<Storyboard x:Key="pathStoryboard" >
<PointAnimationUsingPath PathGeometry="{StaticResource path}"
Storyboard.TargetName="ellipse"
Storyboard.TargetProperty="Center"
Duration="0:0:5" RepeatBehavior="Forever" >
</PointAnimationUsingPath>
</Storyboard>
</Canvas.Resources> <Canvas.Triggers>
<EventTrigger RoutedEvent="Control.Loaded">
<BeginStoryboard Storyboard="{StaticResource pathStoryboard}" />
</EventTrigger>
</Canvas.Triggers> <Path Data="{StaticResource path}" Stroke="Black" StrokeThickness="1" /> <Path Fill="Orange">
<Path.Data>
<EllipseGeometry x:Name="ellipse" Center="5,5" RadiusX="12" RadiusY="12"/>
</Path.Data>
</Path>
</Canvas>

DoubleAnimationUsingPath则是通过X、Y和Angle三个属性联合实现路径的变化,一般在TranslateTransform中使用,如下就是一个简单的例子:

     <Canvas >
<Canvas.Resources>
<PathGeometry x:Key="path" Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" />
<Storyboard x:Key="pathStoryboard" >
<DoubleAnimationUsingPath PathGeometry="{StaticResource path}"
Storyboard.TargetName="translateTransform"
Storyboard.TargetProperty="X"
Source="X"
Duration="0:0:5" RepeatBehavior="Forever" >
</DoubleAnimationUsingPath>
<DoubleAnimationUsingPath PathGeometry="{StaticResource path}"
Storyboard.TargetName="translateTransform"
Storyboard.TargetProperty="Y"
Source="Y"
Duration="0:0:5" RepeatBehavior="Forever" >
</DoubleAnimationUsingPath>
</Storyboard>
</Canvas.Resources> <Canvas.Triggers>
<EventTrigger RoutedEvent="Control.Loaded">
<BeginStoryboard Storyboard="{StaticResource pathStoryboard}" />
</EventTrigger>
</Canvas.Triggers> <Path Data="{StaticResource path}" Stroke="Black" StrokeThickness="1" /> <Path Fill="Orange">
<Path.Data>
<EllipseGeometry x:Name="ellipse" Center="5,5" RadiusX="12" RadiusY="12"/>
</Path.Data>
<Path.RenderTransform>
<TranslateTransform x:Name="translateTransform" />
</Path.RenderTransform>
</Path>
</Canvas>

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

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

  1. WPF中的PathAnimation(路径动画)

    原文:WPF中的PathAnimation(路径动画) WPF中的PathAnimation(路径动画)                                                 ...

  2. WPF中自动增加行(动画)的TextBox

    原文:WPF中自动增加行(动画)的TextBox WPF中自动增加行(动画)的TextBox WPF中的Textbox控件是可以自动换行的,只要设置TextWrapping属性为"Wrap& ...

  3. WPF动画之路径动画(3)

    XAML代码: <Window x:Class="路径动画.MainWindow" xmlns="http://schemas.microsoft.com/winf ...

  4. WPF中使用RenderTransformOrigin来控制动画的起点

    Render :渲染:Transform:动画:Origin:起点 RenderTransformOrigin:渲染动画的起点 取值为一个坐标的形式  取值范围: 0,0 到 1,1 0,0:表示左上 ...

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

    与 From/To/By 动画类似,关键帧动画以也可以以动画形式显示目标属性值. 和From/To/By 动画不同的是, From/To/By 动画只能控制在两个状态之间变化,而关键帧动画则可以在多个 ...

  6. (转载)WPF中的动画——(一)基本概念

    http://www.cnblogs.com/TianFang/p/4050845.html WPF的一个特点就是支持动画,我们可以非常容易的实现漂亮大方的界面.首先,我们来复习一下动画的基本概念.计 ...

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

    WPF的一个特点就是支持动画,我们可以非常容易的实现漂亮大方的界面.首先,我们来复习一下动画的基本概念.计算机中的动画一般是定格动画,也称之为逐帧动画,它通过每帧不同的图像连续播放,从而欺骗眼和脑产生 ...

  8. WPF 中图片的加载 ,使用统一资源标识符 (URI)

    在wpf中,设置图片路径有2种方法: 1.xaml文件中,指定路径 <Button Name=" HorizontalAlignment="Right" Verti ...

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

    WPF 中的Path.Data 不再多介绍,M开始坐标点 C弧度坐标点 L 直线坐标点 <Path x:Name="path0" Data="M 10,100 C ...

随机推荐

  1. monkey测试===通过monkey测试检查app内存泄漏和cpu占用

    最近一直在研究monkey测试.网上资料很多,但都是一个抄一个的.原创的很少 我把检查app内存泄漏的情况梳理一下: 参考资料: Monkey测试策略:https://testerhome.com/t ...

  2. 64_l4

    libnormaliz-devel-3.1.4-2.fc26.i686.rpm 23-May-2017 00:24 31214 libnormaliz-devel-3.1.4-2.fc26.x86_6 ...

  3. HDU 6109 数据分割 并查集,SET

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6109 题意:中文题面 解法:每次都贪心地尝试将尽量多的条件放进当前这组,遇到第一个与已有条件冲突时,就 ...

  4. canvas写的地铁地图

    更新: 18-9-21:填了个坑,更新了canvas绘制过程. 根据的是百度提供的坐标,canvas的坐标是大的坐标在后面,所以跟实际生活方向相反. 所以canvas里的北方在下方,实际生活中北方在上 ...

  5. javascript方法--call()

    关于call方法,以前经常看到这个方法,但是也没怎么用心去学习,后来觉得不行,所以知识在一点一点补~ 今天对自己学习call方法做一下总结 其实,学了call方法,会发现call跟apply其实是很像 ...

  6. java生成缩略图,旋转,水印,截图

    转自:http://rensanning.iteye.com/blog/1545708 感谢,方便自己查看

  7. Flask 通过扩展来实现登录验证

    1. flask扩展 说明: flask的扩展类似于python中的装饰器,和Django中的process_request的方法也类似 测试代码 from flask import Flask,se ...

  8. Bootstrap框架的简介

    一.Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包. 它支持响应式布局, ...

  9. 【转载】PDB命令行调试Python代码

    转载自这里. (博主按:PDB调试python代码和用GDB调试c++代码很类似) 你有多少次陷入不得不更改别人代码的境地?如果你是一个开发团队的一员,那么你遇到上述境地的次数比你想要的还要多.然而, ...

  10. lr_Vugen界面图