路径动画是一种专门用于将对象按照指定的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. Centos_Lvm_Create pv vg lv and mount

    re-scan new disks without restarting CentOS re-scan new disks(/dev/sdc): #ls /sys/class/scsi_host/ h ...

  2. 【Educational Codeforces Round 19】

    这场edu蛮简单的…… 连道数据结构题都没有…… A.随便质因数分解凑一下即可. #include<bits/stdc++.h> #define N 100005 using namesp ...

  3. 12-5 NSSet

    原文:http://rypress.com/tutorials/objective-c/data-types/nsset NSSet NSSet, NSArray, and NSDictionary  ...

  4. PostGIS pgrouting路径分析

    --让数据库支持PostGIS和pgRouting的函数和基础表(安装后第一次使用时执行,以后都不再执行) CREATE EXTENSION postgis; CREATE EXTENSION pgr ...

  5. 使用GitLab进行落地项目的管理,并且自动更新、重启、回滚

      Gitlab 清空项目历史commit,节省空间 http://blog.csdn.net/dounine/article/details/77840416?locationNum=6&f ...

  6. AC日记——Sagheer, the Hausmeister codeforces 812b

    812B - Sagheer, the Hausmeister 思路: 搜索: 代码: #include <cstdio> #include <cstring> #includ ...

  7. 如何实现electron多页面间通信

    如何实现electron多页面间通信 1,业务需求: 总共有两个页面,页面A显示数据,页面B处理数据,主线程Main 2,实现的技术方案: 在主线程中打开页面A和B,B页面不进行显示,主要负责处理从A ...

  8. websocket小荔枝

    关于websocket原理和好处请参考百度,这里只是代码. var ws = new WebSocket('ws://echo.websocket.org/'); ws.onopen = functi ...

  9. LintCode 13. Implement strStr()

    LintCode 13. Implement strStr() 题目描述 对于一个给定的 source 字符串和一个 target 字符串,你应该在 source 字符串中找出 target 字符串出 ...

  10. hdu 1698 Just a Hook(线段树区间修改)

    传送门:Just a Hook Problem Description In the game of DotA, Pudge’s meat hook is actually the most horr ...