AI 助理
备案控制台
开发者社区 大数据 文章 正文

WPF动画教程（PointAnimationUsingPath的使用）

2024-08-06 58
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： WPF动画教程（PointAnimationUsingPath的使用）

PointAnimationUsingPath的介绍

PointAnimationUsingPath 是 WPF 中的一个类，它用于创建一个动画，该动画会沿着指定的路径移动一个点。

关于 PointAnimationUsingPath这些属性比较重要：

属性 类型 说明
PathGeometry PathGeometry 这个属性定义了动画的路径。你可以使用 PathGeometry 类来创建复杂的路径，包括直线、曲线和弧线。
Duration Duration 这个属性定义了动画的持续时间。你可以使用 TimeSpan 类来设置这个属性。
RepeatBehavior RepeatBehavior 这个属性定义了动画的重复行为。例如，你可以设置这个属性为 RepeatBehavior.Forever，这样动画就会无限重复。
AutoReverse Boolean 如果这个属性被设置为 true，那么动画在到达路径的终点后会自动反向播放，回到路径的起点。

PathGeometry的介绍

PathGeometry是 WPF 中的一个类，它表示一组连接的线和曲线，这些线和曲线可以组成复杂的形状。

关于PathGeometry等会我们会接触到的属性为Figures。

Figures属性介绍如下：

属性名 类型 说明
Figures PathFigureCollection 获取或设置描述路径内容的 PathFigure对象的集合。

PathGeometry 的用法示例

使用PathGeometry绘制一条直线：

PathGeometry pathGeometry = new PathGeometry();
PathFigure figure = new PathFigure();
figure.StartPoint = new Point(0, 50);  // 线的起点
LineSegment lineSegment = new LineSegment();
lineSegment.Point = new Point(400, 50);  // 线的终点
figure.Segments.Add(lineSegment);
pathGeometry.Figures.Add(figure);
Path1.Data = pathGeometry;

效果：

使用PathGeometry绘制一个矩形：

PathGeometry pathGeometry = new PathGeometry();
 PathFigure figure = new PathFigure();
 figure.StartPoint = new Point(10, 10);  // 矩形的左上角
 LineSegment line1 = new LineSegment();
 line1.Point = new Point(310, 10);  // 矩形的右上角
 figure.Segments.Add(line1);
 LineSegment line2 = new LineSegment();
 line2.Point = new Point(310, 160);  // 矩形的右下角
 figure.Segments.Add(line2);
 LineSegment line3 = new LineSegment();
 line3.Point = new Point(10, 160);  // 矩形的左下角
 figure.Segments.Add(line3);
 LineSegment line4 = new LineSegment();
 line4.Point = new Point(10, 10);  // 矩形的左上角，闭合矩形
 figure.Segments.Add(line4);
 pathGeometry.Figures.Add(figure);
 Path1.Data = pathGeometry;

效果：

使用PathGeometry绘制一个圆：

PathFigure figure = new PathFigure();
 figure.StartPoint = new Point(150, 50);  // 圆的顶点
 ArcSegment arc1 = new ArcSegment();
 arc1.Point = new Point(150, 150);  // 圆的底点
 arc1.Size = new Size(50, 50);  // 圆的半径
 arc1.SweepDirection = SweepDirection.Clockwise;
 arc1.IsLargeArc = true;  // 表示这是一个大于或等于180度的弧
 figure.Segments.Add(arc1);
 ArcSegment arc2 = new ArcSegment();
 arc2.Point = new Point(150, 50);  // 圆的顶点，闭合圆
 arc2.Size = new Size(50, 50);  // 圆的半径
 arc2.SweepDirection = SweepDirection.Clockwise;
 arc2.IsLargeArc = true;  // 表示这是一个大于或等于180度的弧
 figure.Segments.Add(arc2);
 PathGeometry pathGeometry = new PathGeometry();
 pathGeometry.Figures.Add(figure);
 Path1.Data = pathGeometry;

效果：

本示例中PathGeometry的用法

PathGeometry pathGeometry = new PathGeometry();
PathFigureCollection figures = PathFigureCollection.Parse("M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100");
pathGeometry.Figures = figures;
Path1.Data = pathGeometry;
PathFigureCollection figures = PathFigureCollection.Parse("M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100");

这行代码使用 PathFigureCollection.Parse 方法解析一个包含路径数据的字符串，并返回一个 PathFigureCollection 对象。这个字符串使用的是 SVG 路径数据格式。在这个例子中，字符串 "M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" 表示一个开始于 (10,100) 的路径，然后通过三个贝塞尔曲线段（每个曲线段由两个控制点和一个结束点定义）连接到 (160,100)、(310,100) 和 (10,100)。

效果：

Storyboard的介绍

Storyboard是 WPF 中的一个类，它用于组织和管理一组动画，这些动画可以同时或按照指定的顺序播放。Storyboard 可以用于创建复杂的动画序列，包括并行和顺序动画。

在本示例中，Storyboard 对象被用来存储和控制PointAnimationUsingPath 对象的播放。你可以调用 Storyboard 的 Begin、Pause、Resume 和 Stop 方法来控制动画的播放。

在本示例中会用到的属性：

属性名 类型 说明
Children TimelineCollection 这是一个动画集合，包含了 Storyboard 中的所有动画。

在本示例中会用到的方法：

方法名 说明
Begin(FrameworkElement, Boolean) 将与此 Storyboard 关联的动画应用到其目标并启动它们。
Pause(FrameworkContentElement) 暂停与此 Storyboard关联的指定 FrameworkContentElement 的Clock。
Resume(FrameworkContentElement) 恢复为此 Storyboard创建的 Clock。
Stop(FrameworkContentElement) 停止为此 Storyboard 创建的 Clock。
Storyboard.SetTargetName(DependencyObject, String) 使指定的 Timeline 面向具有指定名称的依赖属性。
Storyboard.SetTargetProperty(DependencyObject, PropertyPath) 使指定的 Timeline 目标成为指定的依赖属性。

示例

xaml：

<Page x:Class="PointAnimationUsingPathDemo.Page1"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:PointAnimationUsingPathDemo"
      mc:Ignorable="d" 
      d:DesignHeight="450" d:DesignWidth="800"
      Title="Page1">
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="StackPanel1">
        <Canvas HorizontalAlignment="Center" Width="340" Height="240"  x:Name="Canvas1">
            <Path VerticalAlignment="Top" Margin="15,15,15,15" 
    Data="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100"
    Stroke="Black" StrokeThickness="2"
    Stretch="None" />
            <Path Fill="Orange" Margin="15,15,15,15">
                <Path.Data>
                    <!-- Describes an ellipse. -->
                    <EllipseGeometry x:Name="MyAnimatedEllipseGeometry"
        Center="10,100" RadiusX="15" RadiusY="15" />
                </Path.Data>
            </Path>
        </Canvas>
        <Button Click="Button_Click_Begin">开始</Button>
        <Button Click="Button_Click_Pause">暂停</Button>
        <Button Click="Button_Click_Resume">继续</Button>
        <Button Click="Button_Click_Stop">停止</Button>
    </StackPanel>
</Page>

效果：

cs：

PathGeometry pathGeometry = new PathGeometry();
  PathFigureCollection figures = PathFigureCollection.Parse("M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100");
  pathGeometry.Figures = figures;

创建一个PathGeometry对象并设置Figures属性。

// 创建和配置 PointAnimationUsingPath
PointAnimationUsingPath pointAnimation = new PointAnimationUsingPath();
pointAnimation.Duration = TimeSpan.FromSeconds(5);
pointAnimation.RepeatBehavior = RepeatBehavior.Forever;
pointAnimation.AutoReverse = true;
pointAnimation.PathGeometry = pathGeometry;

这段代码创建并配置了一个 PointAnimationUsingPath 对象，该对象表示一个沿路径移动的点动画。这个动画将在5秒内沿着指定的路径播放，播放完毕后将反向播放，然后无限次重复。

Storyboard.SetTargetName(pointAnimation, "MyAnimatedEllipseGeometry");

这行代码使用 Storyboard.SetTargetName 方法设置了动画的目标对象。在这个例子中，目标对象的名称是 "MyAnimatedEllipseGeometry"。这意味着动画将应用于名为 "MyAnimatedEllipseGeometry" 的对象。

Storyboard.SetTargetProperty(pointAnimation, new PropertyPath(EllipseGeometry.CenterProperty));

这行代码使用 Storyboard.SetTargetProperty 方法设置了动画的目标属性。在这个例子中，目标属性是 EllipseGeometry.CenterProperty，这是一个 PropertyPath 对象。这意味着动画将改变目标对象的 Center 属性。

创建 Storyboard 并添加动画：

storyboard = new Storyboard();
storyboard.Children.Add(pointAnimation);

开始、暂停、继续、停止动画：

private void Button_Click_Begin(object sender, RoutedEventArgs e)
  {
      storyboard.Begin(this,true);
      
  }
  private void Button_Click_Pause(object sender, RoutedEventArgs e)
  {
      storyboard.Pause(this);
  }
  private void Button_Click_Resume(object sender, RoutedEventArgs e)
  {
      storyboard.Resume(this);
  }
  private void Button_Click_Stop(object sender, RoutedEventArgs e)
  {
      storyboard.Stop(this);
  }
storyboard.Begin(this,true);

Begin方法选择这种重载形式的原因是这样开启的动画是可控制的，如果直接开始动画不受控制，无法暂停、继续、停止。

示例效果

示例效果如下所示：

总结

通过本示例，我们接触了PointAnimationUsingPath类、PathGeometry类和Storyboard类，并使用了它们的一些属性与方法，以后如果遇到沿着特定路径的动画的需求，可以尝试使用这种方法，希望对你有所帮助。

文章标签：
C#
数据格式
存储
关键词：
wpf动画
wpf动画教程
wpf教程
mingupup
目录
相关文章
mingupup
|
4月前
|
C#
WPF中动画教程（DoubleAnimation的基本使用）
WPF中动画教程（DoubleAnimation的基本使用）
mingupup
85 0
小王老师呀
|
3月前
|
算法 C# Windows
不可不知的WPF动画（Animation）
【9月更文挑战第19天】在 WPF（Windows Presentation Foundation）中，动画能为应用程序增添生动性和交互性。主要类型包括线性动画和关键帧动画，可针对依赖属性和自定义属性操作。触发方式有事件触发和自动触发，支持暂停、恢复及停止控制。合理使用这些功能并注意性能优化，可创建引人入胜的用户界面。
小王老师呀
54 7
土木林森
|
4月前
|
C# UED 开发者
WPF与性能优化：掌握这些核心技巧，让你的应用从卡顿到丝滑，彻底告别延迟，实现响应速度质的飞跃——从布局到动画全面剖析与实例演示
【8月更文挑战第31天】本文通过对比优化前后的方法，详细探讨了提升WPF应用响应速度的策略。文章首先分析了常见的性能瓶颈，如复杂的XAML布局、耗时的事件处理、不当的数据绑定及繁重的动画效果。接着，通过具体示例展示了如何简化XAML结构、使用后台线程处理事件、调整数据绑定设置以及利用DirectX优化动画，从而有效提升应用性能。通过这些优化措施，WPF应用将更加流畅，用户体验也将得到显著改善。
土木林森
306 1
土木林森
|
4月前
|
C# UED 开发者
WPF动画大揭秘：掌握动画技巧，让你的界面动起来，告别枯燥与乏味！
【8月更文挑战第31天】在WPF应用开发中，动画能显著提升用户体验，使其更加生动有趣。本文将介绍WPF动画的基础知识和实现方法，包括平移、缩放、旋转等常见类型，并通过示例代码展示如何使用`DoubleAnimation`创建平移动画。此外，还将介绍动画触发器的使用，帮助开发者更好地控制动画效果，提升应用的吸引力。
土木林森
230 0
李杰-@yd
|
7月前
|
C#
WPF —— 动画缩放变换
`ScaleTransform`用于二维x-y坐标系中对象的缩放，可沿X或Y轴调整。在故事板中，通过RenderTransform.ScaleX和ScaleY属性控制缩放。示例代码展示了如何设置按钮的RenderTransformOrigin、Background等属性，并通过LayoutTransform应用ScaleTransform。当鼠标进入按钮时，EventTrigger启动DoubleAnimation实现X和Y轴的缩放动画。最后，展示了如何将动画集成到自定义按钮样式中。
李杰-@yd
192 0
Rick_1/2
|
C#
WPF技术之动画系列-上下运动
本例子展现动画小球上下循环运动
Rick_1/2
228 0
杰克.陈
|
C# 索引
WPF简单模拟QQ登录背景动画
原文:WPF简单模拟QQ登录背景动画 介绍 之所以说是简单模拟,是因为我不知道QQ登录背景动画是怎么实现的.这里是通过一些办法把它简化了,做成了类似的效果 效果图   大体思路 首先把背景看成是一个4行8列的点的阵距,X轴Y轴都是距离70.
杰克.陈
1276 0
杰克.陈
|
C#
WPF中的PathAnimation（路径动画）
原文:WPF中的PathAnimation（路径动画）                                   WPF中的PathAnimation（路径动画）                                                               周...
杰克.陈
1439 0
杰克.陈
|
API C# 索引
WPF中的动画——（一）基本概念
原文:WPF中的动画——（一）基本概念 WPF的一个特点就是支持动画，我们可以非常容易的实现漂亮大方的界面。首先，我们来复习一下动画的基本概念。计算机中的动画一般是定格动画，也称之为逐帧动画，它通过每帧不同的图像连续播放，从而欺骗眼和脑产生动画效果。
杰克.陈
1082 0
杰克.陈
|
C# 测试技术
WPF中的动画——（二）From/To/By 动画
原文:WPF中的动画——（二）From/To/By 动画 我们所实现的的动画中，很大一部分是让一个属性在起始值和结束值之间变化，例如，我在前文中实现的改变宽度的动画：     var widthAnimation = new DoubleAnimation()    {        From = 0,        To = 320,        Duration = TimeSpan.
杰克.陈
1011 0