WPF中的PathAnimation（路径动画）

原文:WPF中的PathAnimation（路径动画）

WPF中的PathAnimation（路径动画）
周银辉

在WPF中我们可以指定元素按照某一路径运动而形成动画，这称之为路径动画，在SDK中你会发现以[Type]AnimationUsingPath这种形式命名的类，它们就是用来创建路径动画的，其中[Type]表示一系列类型比如double,point等，这与DoubleAnimation等的命名方式一致。
为对路径动画有一个大体上的认识，你可以粘贴下面的代码到XamlPad：

<Window

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

x:Name="Window"

Title="Window1"

Width="640" Height="480">

<Window.Resources>

<DoubleAnimationUsingPath.PathGeometry>

</DoubleAnimationUsingPath.PathGeometry>

</DoubleAnimationUsingPath>

<DoubleAnimationUsingPath.PathGeometry>

</DoubleAnimationUsingPath.PathGeometry>

</DoubleAnimationUsingPath>

</Storyboard>

</Window.Resources>

<Window.Triggers>

</EventTrigger>

</Window.Triggers>

<Button.RenderTransform>

</TransformGroup>

</Button.RenderTransform>

</Button>

</Grid>

</Window>

你可以得到如图所示的一个窗体：

窗体上的按钮沿着曲线来回的运动（按钮的中心始终与曲线相切）。

1，使用Microsoft Expression Blend工具为我们自动生成路径动画
打造路径动画的最简单的方式是使用 Microsoft Expression Blend工具来自动生成，当然这自然会失去灵活性。
第一步：创建动画对象（比如上图中的那个Button）

第二步：创建动画路径（比如一条曲线，一个圆）

记得将路径的逻辑树层次上调整得比刚才那个按钮低

第三步：将路径转化为MotionPath
选中逻辑树上的[Path]对象，单击菜单栏的Object，选择Path子项，在选择Convert To MotionPath，则会弹出如下窗口：
其要求你选择MotionPath的目标，也就是路径动画的目标，我们这里选择我们的button按钮
单击OK，其会自动为你生成Timeline（此后的操作就与打造普通Timeline 的操作一样了，其实此时该路径动画已经生成，你可以单击Timeline录制旁边的“播放”按钮来观看效果了，或直接F5）

2，使用代码来打造更灵活的路径动画
我更喜欢使用手写代码的方式来做更多的事情，这让事情变得更容易控制，同时也更具有灵活性。
以DoubleAnimationUsingPath为例，我们逐步讲解一下如何使用代码来打造上面的示例。
为了让对象沿着曲线运动，我们通过改变一个TranslateTransform的X与Y值来做到，并将该TranslateTransform指定给按钮的RenderTransform。
假设我们动画中的路径（也就是示例中的那条曲线）为path1，动画的对象为border1，如果你有过编写WPF动画代码的经验，那么你可以很轻松地编写出以下代码：

DoubleAnimationUsingPath animationX = new DoubleAnimationUsingPath();

animationX.PathGeometry = this.path1.Data.GetFlattenedPathGeometry();

animationX.Source = PathAnimationSource.X;

animationX.Duration = new Duration(TimeSpan.FromSeconds(2));

DoubleAnimationUsingPath animationY = new DoubleAnimationUsingPath();

animationY.PathGeometry = this.path1.Data.GetFlattenedPathGeometry();

animationY.Source = PathAnimationSource.Y;

animationY.Duration = animationX.Duration;

其中

animationX.PathGeometry = this.path1.Data.GetFlattenedPathGeometry();

指定了我们的animationX所遵照的路径为path1

animationX.Source = PathAnimationSource.X;

指定了animationX将遵照路径的X值的变化而变化，其中PathAnimationSource枚举存在三个值，分别是X，Y与Angle，在沿着路径旋转的动画中将会用到Angle值。
将代码补充完整后如下：

TranslateTransform translate = new TranslateTransform();

this.border1.RenderTransform = translate;

NameScope.SetNameScope(this, new NameScope());

this.RegisterName("translate", translate);

DoubleAnimationUsingPath animationX = new DoubleAnimationUsingPath();

animationX.PathGeometry = this.path1.Data.GetFlattenedPathGeometry();

animationX.Source = PathAnimationSource.X;

animationX.Duration = new Duration(TimeSpan.FromSeconds(2));

DoubleAnimationUsingPath animationY = new DoubleAnimationUsingPath();

animationY.PathGeometry = this.path1.Data.GetFlattenedPathGeometry();

animationY.Source = PathAnimationSource.Y;

animationY.Duration = animationX.Duration;

Storyboard story = new Storyboard();

story.RepeatBehavior = RepeatBehavior.Forever;

story.AutoReverse = true;

story.Children.Add(animationX);

story.Children.Add(animationY);

Storyboard.SetTargetName(animationX, "translate");

Storyboard.SetTargetName(animationY, "translate");

Storyboard.SetTargetProperty(animationX, new PropertyPath(TranslateTransform.XProperty));

Storyboard.SetTargetProperty(animationY, new PropertyPath(TranslateTransform.YProperty));

story.Begin(this);

到此为止，我们可以说已经打造了一个路径动画，效果如下图

但不难发现，图中方块运动的路径与曲线并为完全重合，而是存在X与Y方向上的平移。这是一个很让人头疼的问题，但是我发现，只要在动画播放之前，将方块的中心位置设置为与动画所在容器的（0，0）位置向重合，那么该问题就可以被避免。
修改后的代码：

Canvas.SetTop(this.border1, -this.border1.ActualHeight / 2);

Canvas.SetLeft(this.border1, -this.border1.ActualWidth / 2);

TranslateTransform translate = new TranslateTransform();

this.border1.RenderTransform = translate;

NameScope.SetNameScope(this, new NameScope());

this.RegisterName("translate", translate);

DoubleAnimationUsingPath animationX = new DoubleAnimationUsingPath();

animationX.PathGeometry = this.path1.Data.GetFlattenedPathGeometry();

animationX.Source = PathAnimationSource.X;

animationX.Duration = new Duration(TimeSpan.FromSeconds(2));

DoubleAnimationUsingPath animationY = new DoubleAnimationUsingPath();

animationY.PathGeometry = this.path1.Data.GetFlattenedPathGeometry();

animationY.Source = PathAnimationSource.Y;

animationY.Duration = animationX.Duration;

Storyboard story = new Storyboard();

story.RepeatBehavior = RepeatBehavior.Forever;

story.AutoReverse = true;

story.Children.Add(animationX);

story.Children.Add(animationY);

Storyboard.SetTargetName(animationX, "translate");

Storyboard.SetTargetName(animationY, "translate");

Storyboard.SetTargetProperty(animationX, new PropertyPath(TranslateTransform.XProperty));

Storyboard.SetTargetProperty(animationY, new PropertyPath(TranslateTransform.YProperty));

story.Begin(this);

然后，运行效果如下：

刚才已经提到，PathAnimationSource枚举拥有第三个值Angle，它是用来使我们的动画对象沿着路径旋转的，旋转对象与移动类似，但需要注意的是：
（1）旋转时对象的中心点始终与路径相切，那么你需要注意旋转时对象的中心在哪，比如上面的方块的中心点在其长宽的50%处，那么我们设置其RenderTransformOrigin为（0.5,0.5）

this.border1.RenderTransformOrigin = new Point(0.5, 0.5);

（2）如果我们在旋转的同时在进行其他动作，比如平移，那么我们需要注意动作叠加的顺序，先旋转再平移与先平移再旋转的效果是不同的（你可以参考WPF中的MatrixTransform），这在编码时体现在向TransformGroup中添加元素时的顺序

TranslateTransform translate = new TranslateTransform();

RotateTransform rotate = new RotateTransform();

TransformGroup group = new TransformGroup();

group.Children.Add(rotate);//先旋转

group.Children.Add(translate);//再平移

this.border1.RenderTransform = group;

补充完整后的代码：

Canvas.SetTop(this.border1, -this.border1.ActualHeight / 2);

Canvas.SetLeft(this.border1, -this.border1.ActualWidth / 2);

this.border1.RenderTransformOrigin = new Point(0.5, 0.5);

TranslateTransform translate = new TranslateTransform();

RotateTransform rotate = new RotateTransform();

TransformGroup group = new TransformGroup();

group.Children.Add(rotate);//先旋转

group.Children.Add(translate);//再平移

this.border1.RenderTransform = group;

NameScope.SetNameScope(this, new NameScope());

this.RegisterName("translate", translate);

this.RegisterName("rotate", rotate);

DoubleAnimationUsingPath animationX = new DoubleAnimationUsingPath();

animationX.PathGeometry = this.path1.Data.GetFlattenedPathGeometry();

animationX.Source = PathAnimationSource.X;

animationX.Duration = new Duration(TimeSpan.FromSeconds(2));

DoubleAnimationUsingPath animationY = new DoubleAnimationUsingPath();

animationY.PathGeometry = this.path1.Data.GetFlattenedPathGeometry();

animationY.Source = PathAnimationSource.Y;

animationY.Duration = animationX.Duration;

DoubleAnimationUsingPath animationAngle = new DoubleAnimationUsingPath();

animationAngle.PathGeometry = this.path1.Data.GetFlattenedPathGeometry();

animationAngle.Source = PathAnimationSource.Angle;

animationAngle.Duration = animationX.Duration;

Storyboard story = new Storyboard();

story.RepeatBehavior = RepeatBehavior.Forever;

story.AutoReverse = true;

story.Children.Add(animationX);

story.Children.Add(animationY);

story.Children.Add(animationAngle);

Storyboard.SetTargetName(animationX, "translate");

Storyboard.SetTargetName(animationY, "translate");

Storyboard.SetTargetName(animationAngle, "rotate");

Storyboard.SetTargetProperty(animationX, new PropertyPath(TranslateTransform.XProperty));

Storyboard.SetTargetProperty(animationY, new PropertyPath(TranslateTransform.YProperty));

Storyboard.SetTargetProperty(animationAngle, new PropertyPath(RotateTransform.AngleProperty));

story.Begin(this);

效果图如下：

关于路径动画，先介绍到这里，不过其实实现上面的的动画更为常用的方式是使用MatrixAnimationUsingPath，可以参考以下代码：

Canvas.SetLeft(this.border1, -this.border1.ActualWidth / 2);

Canvas.SetTop(this.border1, -this.border1.ActualHeight / 2);

this.border1.RenderTransformOrigin = new Point(0.5, 0.5);

MatrixTransform matrix = new MatrixTransform();

this.border1.RenderTransform = matrix;

NameScope.SetNameScope(this, new NameScope());

this.RegisterName("matrix", matrix);

MatrixAnimationUsingPath matrixAnimation = new MatrixAnimationUsingPath();

matrixAnimation.PathGeometry = this.path1.Data.GetFlattenedPathGeometry();

matrixAnimation.Duration = new Duration(TimeSpan.FromSeconds(2));

matrixAnimation.RepeatBehavior = RepeatBehavior.Forever;

matrixAnimation.AutoReverse = true;

matrixAnimation.IsOffsetCumulative = !matrixAnimation.AutoReverse;

matrixAnimation.DoesRotateWithTangent = true;//旋转

Storyboard story = new Storyboard();

story.Children.Add(matrixAnimation);

Storyboard.SetTargetName(matrixAnimation, "matrix");

Storyboard.SetTargetProperty(matrixAnimation, new PropertyPath(MatrixTransform.MatrixProperty));

story.Begin(this);

下载Demo：http://files.cnblogs.com/zhouyinhui/PathAnimationDemo.rar

WPF中的PathAnimation（路径动画）的更多相关文章

PowerPoint 2013中创建自定义路径动画的方法
1.在幻灯片中选择对象,在“动画”选项卡的“高级动画”组中单击“添加动画”按钮,在打开的下拉列表中选择“自定义路径”选项,如图1所示. 图1 选择“自定义路径”选项 2.此时鼠标指针变为十字形,在幻灯 ...
[原][osgEarth]在osgearth中添加相机路径动画
在osg中添加相机动画路径请参考:http://www.cnblogs.com/lyggqm/p/8075277.html 这里的代码是在osgearth中添加相机动画路径漫游器: #include ...
WPF中的简单水动画
原文 https://stuff.seans.com/2008/08/21/simple-water-animation-in-wpf/ 很多年前(80年代中期),我在一家拥有Silicon Grap ...
在 WPF 中使用 Path 路径
在 WPF 中总会修改 Button 的 Style,比如一个自定义的 Close 按钮.刚入门的可能会用一张 PNG 格式的图片来做这个按钮的 Icon,但这个是不优雅的.而且你要改的时候还得去操作 ...
wpf 中 Ellipse 对象对动画性能的影响
vs2019 .NetFramework 4.8 win10-64 1909 接手一个wpf项目,某窗口中包含大量的 Shape 对象(线,矩形,圆形等). 这些内容要匀速的向左平移,类似于游戏&qu ...
示例：WPF中自定义StoryBoarService在代码中封装StoryBoard、Animation用于简化动画编写
原文:示例:WPF中自定义StoryBoarService在代码中封装StoryBoard.Animation用于简化动画编写一.目的:通过对StoryBoard和Animation的封装来简化动画 ...
《深入浅出WPF》笔记——绘画与动画
<深入浅出WPF>笔记——绘画与动画本篇将记录一下如何在WPF中绘画和设计动画,这方面一直都不是VS的强项,然而它有一套利器Blend:这方面也不是我的优势,幸好我有博客园,能记录一 ...
WPF中图形表示语法详解（Path之Data属性语法）ZZ
大可山 [MSN:a3news(AT)hotmail.com] http://www.zpxp.com 萝卜鼠在线图形图像处理 ------------------------------------ ...
WPF中图形表示语法详解（Path之Data属性语法）
原文 http://blog.csdn.net/johnsuna/article/details/1885597 老规矩,看图说话. 先看显示效果:(图1) XAML(代码A):<Page xm ...

随机推荐

php实现表示数值的字符串（is_numeric($s)）
php实现表示数值的字符串(is_numeric($s)) 一.总结 is_numeric($s) 二.php实现表示数值的字符串题目描述请实现一个函数用来判断字符串是否表示数值(包括整数和小数) ...
Django日志器的使用
Logging Mudel A quick logging primer Django uses Python’s builtin logging module to perform system l ...
hosts 持续更新 - laod
https://laod.cn/hosts/2017-google-hosts.html 2017 Google hosts 持续更新[更新于:2017-08-22] 4,347 2,367,079 ...
net的微服务架构
net的微服务架构眼下,做互联网应用,最火的架构是微服务,最热的研发管理就是DevOps, 没有之一.微服务.DevOps已经被大量应用,它们已经像传说中的那样,可以无所不能.特来电云平台,通过近两 ...
Net程序调试
Net程序调试前言作为一个.net开发工程师,不管是在写桌面程序.服务程序或web程序,在开发阶段,我们必须非常熟悉vs的动态调试技能,当然web程序可能还需要调试前端的脚本或样式,这不在本文的讨 ...
Android菜鸟的成长笔记（26）——普通广播与有序广播
BroadcastReceiver是Android系统的四大组件之一,BroadcastReceiver是一个全局的系统级监听器,它拥有自己的独立进程. 我们来写一个最简单的广播接收过程先在mani ...
雷观(十):管理自己的任务列表(TodoList)很重要
由幼年,到青年,再到成年,你会发现自己有越来越多的事情要做.参加工作后,很可能要在多个战线上同时忙碌. 最常见的有,工作(可能会加班加点).爱情(不少人忙着恋爱,需要花费很多心思).个人娱乐(玩游戏看 ...
Android中获取当前位置的使用步骤
在Android中得到当前位置的步骤 1.在AndroidManifest.xml中声明权限 android.permission.ACCESS_FINE_LOCATION(或者android.per ...
51nod1673 树有几多愁 - 贪心策略 + 虚树 + 状压dp
传送门题目大意: 给一颗重新编号,叶子节点的值定义为他到根节点编号的最小值,求所有叶子节点值的乘积的最大值. 题目分析: 为什么我觉得这道题最难的是贪心啊..首先要想到在一条链上,深度大的编号要小 ...
第二十一篇:基于WDM模型的AVStream驱动架构研究
基于WDM模型的AVStream驱动架构研这篇论文2006年早就发表, 与当时开发这个驱动正好几乎相同的时间. 近期实际项目须要, 又回过头来将AVStre ...

WPF中的PathAnimation（路径动画）

WPF中的PathAnimation（路径动画）的更多相关文章

随机推荐

热门专题