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

更新时间：2022年06月23日 11:15:35 作者：天方

这篇文章介绍了WPF实现动画效果之路径动画，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

WPF动画效果系列

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

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

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

正文

路径动画是一种专门用于将对象按照指定的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#中==、Equals、ReferenceEquals的区别
C#中Equals , == , ReferenceEquals都可以用于判断两个对象的个体是不是相等，本篇文章详解C#中Equals , == , ReferenceEquals都可以用于判断两个对象的个体是不是相等，有兴趣的可以了解一下。
2016-12-12
C#递归算法和排列算法
这篇文章介绍了C#的递归算法和排列算法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-05-05
C#字符串与正则表达式的图文详解
正则表达式是个非常好的工具,它的作用主要是用简单的有规则的表达式来检索和匹配一段字符串,这篇文章主要给大家介绍了关于C#字符串与正则表达式的相关资料,需要的朋友可以参考下
2022-09-09
unity实现按住鼠标选取区域截图
这篇文章主要为大家详细介绍了unity实现按住鼠标选取区域截图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-04-04
c#通过unicode编码判断字符是否为中文示例分享
本文介绍了c#通过unicode编码判断字符是否为中文的示例,在unicode字符串中，中文的范围是在4E00..9FFF:CJK Unified Ideographs。通过对字符的unicode编码进行判断来确定字符是否为中文
2014-01-01
C#窗体程序实现全屏及取消全屏步骤
这篇文章主要介绍了C#窗体程序实现全屏及取消全屏步骤，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-12-12
C#如何将DLL打包到程序中
这篇文章主要介绍了C#如何将DLL打包到程序中问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
C# 日历类功能的实例代码
本文通过实例代码给大家介绍了C# 日历类的相关知识，非常不错，具有参考借鉴价值，需要的朋友参考下吧
2017-06-06
C#读写指定编码格式的文本文件
这篇文章主要为大家详细介绍了C#读写指定编码格式文本文件的方法，感兴趣的小伙伴们可以参考一下
2016-03-03
C#图片按比例缩放的实现代码
这篇文章主要介绍了C#图片按比例缩放的实现代码，有需要的朋友可以参考一下
2014-01-01