脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → C#教程 → WPF路径动画

WPF实现动画效果（六）之路径动画

 更新时间：2022年06月23日 11:15:35   作者：天方  
这篇文章介绍了WPF实现动画效果之路径动画，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

WPF动画效果系列

WPF实现动画效果（一）之基本概念

WPF实现动画效果（二）之From/To/By 动画

WPF实现动画效果（三）之时间线（TimeLine）

WPF实现动画效果（四）之缓动函数

WPF实现动画效果（五）之关键帧动画

WPF实现动画效果（六）之路径动画

WPF实现动画效果（七）之演示图板

正文

路径动画是一种专门用于将对象按照指定的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>

到此这篇关于WPF实现动画效果之路径动画的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • C#精确计算年龄的方法分析

    C#精确计算年龄的方法分析

    这篇文章主要介绍了C#精确计算年龄的方法,实例分析了C#计算时间的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • C#使用Stack＜T＞进行堆栈设计的实现

    C#使用Stack＜T＞进行堆栈设计的实现

    堆栈代表了一个后进先出的对象集合,当您需要对各项进行后进先出的访问时,则使用堆栈,本文主要介绍了C#使用Stack＜T＞类进行堆栈设计的实现,文中通过示例代码介绍的非常详细,感兴趣的可以了解一下
    2024-03-03
  • C#实现根据给出的相对地址获取网站绝对地址的方法

    C#实现根据给出的相对地址获取网站绝对地址的方法

    这篇文章主要介绍了C#实现根据给出的相对地址获取网站绝对地址的方法,涉及C#URL及字符串操作的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • C#支付宝新版支付请求接口调用

    C#支付宝新版支付请求接口调用

    这篇文章主要为大家详细介绍了C#支付宝新版支付请求接口调用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-07-07
  • c# 抓取Web网页数据分析

    c# 抓取Web网页数据分析

    通过程序自动的读取其它网站网页显示的信息，类似于爬虫程序。比方说我们有一个系统，要提取BaiDu网站上歌曲搜索排名。分析系统在根据得到的数据进行数据分析。为业务提供参考数据。
    2008-11-11
  • C#使用Parallel类进行多线程编程实例

    C#使用Parallel类进行多线程编程实例

    这篇文章主要介绍了C#使用Parallel类进行多线程编程的方法,实例分析了Parallel类的相关使用技巧,需要的朋友可以参考下
    2015-06-06
  • C# 从 UTF-8 流中读取字符串的正确方法及代码详解

    C# 从 UTF-8 流中读取字符串的正确方法及代码详解

    在本篇文章里小编给大家整理的是一篇关于C# 从 UTF-8 流中读取字符串的正确方法的知识点内容，有兴趣的朋友们可以学习参考下。
    2021-11-11
  • 基于WPF实现步骤控件的示例代码

    基于WPF实现步骤控件的示例代码

    这篇文章主要为大家详细介绍了WPF实现简单的步骤控件，文中的示例代码讲解详细，对我们学习或工作有一定帮助，感兴趣的小伙伴可以了解一下
    2023-01-01
  • C#读写Config配置文件案例

    C#读写Config配置文件案例

    这篇文章介绍了C#读写Config配置文件的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-04-04
  • C#使用Shader实现夜幕降临倒计时的效果

    C#使用Shader实现夜幕降临倒计时的效果

    这篇文章主要介绍了C#使用Shader实现夜幕降临倒计时的效果，非常不错具有参考借鉴价值，需要的朋友可以参考下
    2016-10-10

最新评论