C# WPF 路径动画

一、前言WPF（Windows Presentation Foundation）是微软所提供的一个用于构建 Windows 桌面应用程序的框架。WPF 的动画功能非常强大，可以通过代码或 XAML 来实现各种各样的动画效果。本文将主要讲解 WPF 中的路径动画，包括基本使用、动画类型、动画属性等内容。

二、基本使用路径动画是一种可以让 UI 元素沿着指定路径运动的动画效果。在 WPF 中，我们可以通过设置 PathGeometry 来定义路径，然后再将其应用到动画中。在代码中创建 PathGeometry 简单的方法如下所示：

csharpPathGeometry pathGeometry = new PathGeometry();
PathFigure pathFigure = new PathFigure();
pathFigure.StartPoint = new Point(0,0);
LineSegment lineSegment = new LineSegment(new Point(100,100), true);
pathFigure.Segments.Add(lineSegment);
pathGeometry.Figures.Add(pathFigure);

上述代码创建了一个简单的路径，起始点为坐标 (0,0)，终点为坐标 (100,100)。

接下来，我们需要创建动画并将路径应用到动画中。路径动画可以通过 System.Windows.Media.Animation.PathAnimationUsingPath 类来实现，代码如下所示：

csharpPathAnimationUsingPath pathAnimation = new PathAnimationUsingPath();
pathAnimation.PathGeometry = pathGeometry;
pathAnimation.Duration = TimeSpan.FromSeconds(3);

上述代码创建了一个动画对象，并将路径和动画时长设置为了上一步创建的路径和3 秒。

最后，我们需要将动画应用到 UI 元素上，比如 Rectangle。

csharpRectangle rectangle = new Rectangle();
rectangle.Width =50;
rectangle.Height =50;
rectangle.Fill = Brushes.Red;
Canvas.SetLeft(rectangle,0);
Canvas.SetTop(rectangle,0);
canvas.Children.Add(rectangle);

rectangle.BeginAnimation(Canvas.LeftProperty, pathAnimation);
rectangle.BeginAnimation(Canvas.TopProperty, pathAnimation);

上述代码创建了一个红色矩形，并将其添加到 Canvas 上。然后，我们将动画应用到矩形的左边和顶部属性上。这样，矩形就会沿着路径运动。运行应用程序，效果如下图所示：

![路径动画示例图]( />
图1：路径动画示例图由图1 可以看出，矩形沿着一条直线运动，从左上角移动到右下角。

三、动画类型WPF 中的路径动画共有三种类型，分别是：

1. PathAnimationUsingPath通过 PathGeometry 来定义路径的基本路径动画。
2. DoubleAnimationUsingPath通过绑定一个 Double 类型的属性到 PathGeometry 上，使 UI 元素沿路径运动的动画。
3. PointAnimationUsingPath通过绑定一个 Point 类型的属性到 PathGeometry 上，使 UI 元素沿路径运动的动画。

在实际应用中，我们可以根据需要选择不同的类型。特别是后面两种，它们可以通过把一个 Double 或 Point 类型的属性与动画关联，来实现更加灵活的路径动画效果。

下面我们就来分别讲解这三种动画类型的具体使用方法。

1. PathAnimationUsingPathPathAnimationUsingPath 动画类型的使用方法已经在上面的代码中介绍过了。这里再使用一个示例来说明如何使路径动画沿着圆形运动。

csharpPathGeometry pathGeometry = new PathGeometry();
PathFigure pathFigure = new PathFigure();
pathFigure.StartPoint = new Point(0, -50);
ArcSegment arcSegment = new ArcSegment(new Point(0,50), new Size(50,50),0, false, SweepDirection.Clockwise, true);
pathFigure.Segments.Add(arcSegment);
pathGeometry.Figures.Add(pathFigure);

PathAnimationUsingPath pathAnimation = new PathAnimationUsingPath();
pathAnimation.PathGeometry = pathGeometry;
pathAnimation.Duration = TimeSpan.FromSeconds(3);
pathAnimation.Source = PathAnimationSource.X;

rectangle.BeginAnimation(Canvas.LeftProperty, pathAnimation);
rectangle.BeginAnimation(Canvas.TopProperty, pathAnimation);

上述代码创建了一个圆形路径，并将其应用到动画中。我们将动画应用到矩形的左边属性上，这样矩形就会沿着圆形运动。运行应用程序，效果如下图所示：

![圆形路径动画示例图]( />
图2：圆形路径动画示例图可以看出，矩形沿着圆形运动，形成了有趣的动画效果。

2. DoubleAnimationUsingPathDoubleAnimationUsingPath 动画类型通过将一个 Double 类型的属性绑定到路径动画上，使 UI 元素沿路径运动。下面是一个简单的示例，演示如何使一个矩形沿着弧形路径运动。

csharpPathGeometry pathGeometry = new PathGeometry();
PathFigure pathFigure = new PathFigure();
pathFigure.StartPoint = new Point(50,0);
ArcSegment arcSegment = new ArcSegment(new Point(0,50), new Size(50,50),0, false, SweepDirection.Clockwise, true);
pathFigure.Segments.Add(arcSegment);
pathGeometry.Figures.Add(pathFigure);

DoubleAnimationUsingPath doubleAnimation = new DoubleAnimationUsingPath();
doubleAnimation.PathGeometry = pathGeometry;
doubleAnimation.Duration = TimeSpan.FromSeconds(3);
doubleAnimation.Source = PathAnimationSource.Angle;

rectangle.BeginAnimation(Canvas.LeftProperty, doubleAnimation);

上述代码创建了一个弧形路径，并将其应用到路径动画上。我们将动画应用到矩形的左边属性上，然后在演示中使用了一个 Button 来控制动画的开始和暂停。运行应用程序，效果如下图所示：

![弧形路径动画示例图]( />
图3：弧形路径动画示例图可以看出，矩形沿着弧形路径运动。更改 DoubleAnimationUsingPath 的 Source 属性值，可以使动画按照不同的方式运动。

3. PointAnimationUsingPathPointAnimationUsingPath 动画类型通过将一个 Point 类型的属性绑定到路径动画上，使 UI 元素沿路径运动。下面是一个简单的示例，演示如何使一个矩形沿着 S 形路径运动。

csharpPathGeometry pathGeometry = new PathGeometry();
PathFigure pathFigure = new PathFigure();
pathFigure.StartPoint = new Point(50,0);
BezierSegment bezierSegment = new BezierSegment(new Point(50,50), new Point(0,50), new Point(0,0), true);
pathFigure.Segments.Add(bezierSegment);
pathGeometry.Figures.Add(pathFigure);

PointAnimationUsingPath pointAnimation = new PointAnimationUsingPath();
pointAnimation.PathGeometry = pathGeometry;
pointAnimation.Duration = TimeSpan.FromSeconds(3);

rectangle.BeginAnimation(Canvas.LeftProperty, pointAnimation);
rectangle.BeginAnimation(Canvas.TopProperty, pointAnimation);

上述代码创建了一个 S 形路径，并将其应用到路径动画上。我们将动画应用到矩形的左边和顶部属性上。运行应用程序，效果如下图所示：

![S 形路径动画示例图]( />
图4：S 形路径动画示例图可以看出，矩形沿着 S 形路径运动。更改 PointAnimationUsingPath 的 Source 属性值，可以使动画按照不同的方式运动。

四、动画属性在 WPF 中，路径动画有一些非常有用的属性，可以用来控制动画的速度、方向等信息。下面是这些属性的详细说明。

1. RepeatBehavior：动画的重复行为。例如，可以设置为一次、一直重复、重复 n 次等。
示例代码：

csharpdoubleAnimation.RepeatBehavior = RepeatBehavior.Forever; //无限循环doubleAnimation.RepeatBehavior = new RepeatBehavior(3); //循环3 次

2. AutoReverse：是否在动画完成后反向运行。
示例代码：

csharpdoubleAnimation.AutoReverse = true; // 动画完成后反向运行

3. AccelerationRatio：动画加速度的百分比，默认值为0.0。
示例代码：

csharpdoubleAnimation.AccelerationRatio =0.5; // 加速度为50%

4. DecelerationRatio：动画减速度的百分比，默认值为0.0。
示例代码：

csharpdoubleAnimation.DecelerationRatio =0.5; // 减速度为50%

5. IsAdditive：是否为加性动画。加性动画可以将多个动画组合在一起，从而形成更复杂的效果。
示例代码：

csharpdoubleAnimation.IsAdditive = true;

6. IsCumulative：是否为累加动画。累加动画可以将动画的效果一直累积下去。
示例代码：

csharpdoubleAnimation.IsCumulative = true;

7. PathAnimationSource：PathAnimationUsingPath 类型的动画中的动画源。可以设置为 PathAnimationSource.Angle 表示使用角度作为动画源，设置为 PathAnimationSource.X 表示使用水平坐标作为动画源，设置为 PathAnimationSource.Y 表示使用垂直坐标作为动画源。
示例代码：

csharpdoubleAnimation.Source = PathAnimationSource.Angle;

除了上述属性以外，WPF 中的路径动画还支持几乎所有的标准动画属性，包括 Duration、From、To、By 等。这些属性在使用时与常规动画没有什么区别。

五、总结本文主要介绍了 WPF 中的路径动画，包括基本使用、动画类型、动画属性等内容。在实际应用中，我们可以根据需要选择合适的路径动画类型，并使用属性来控制动画的效果。通过使用路径动画，可以为 WPF 应用程序增加更加丰富的动画效果，提高程序的用户体验。