13WPF---路径动画_wpf路径动画-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_58563355/article/details/128300510

本文通过具体示例介绍了如何使用DoubleAnimationUsingPath、PointAnimationUsingPath及MatrixAnimationUsingPath等技术实现沿路径动画的效果，展示了不同属性动画的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习目标

1.类型名称+AnimationUsingPath

DoubleAnimationUsingPath

PointAnimationUsingPath

    <Window.Resources>
        <Storyboard x:Key="sb">
            <!--X轴-->
            <!--Source:从Path路径中取什么值-->
            <DoubleAnimationUsingPath Duration="0:0:5"
                                      Storyboard.TargetName="tt"                                     
                                      Storyboard.TargetProperty="X"
                                      Source="X">
                <DoubleAnimationUsingPath.PathGeometry>
                    <PathGeometry Figures="M 0,0 60 100 A100 50 0 0 1 400 150"/>
                </DoubleAnimationUsingPath.PathGeometry>
            </DoubleAnimationUsingPath>
            <!--Y轴-->
            <DoubleAnimationUsingPath Duration="0:0:5"
                                      Storyboard.TargetName="tt"                                     
                                      Storyboard.TargetProperty="Y"
                                      Source="Y">
                <DoubleAnimationUsingPath.PathGeometry>
                    <PathGeometry Figures="M 0,0 60 100 A100 50 0 0 1 400 150"/>
                </DoubleAnimationUsingPath.PathGeometry>
            </DoubleAnimationUsingPath>
            <!--路径方向-->
            <DoubleAnimationUsingPath Duration="0:0:5"
                                      Storyboard.TargetName="rt"
                                      Storyboard.TargetProperty="Angle"
                                      Source="Angle">
                <DoubleAnimationUsingPath.PathGeometry>
                    <PathGeometry Figures="M 0,0 60 100 A100 50 0 0 1 400 150"/>
                </DoubleAnimationUsingPath.PathGeometry>
            </DoubleAnimationUsingPath>

            <PointAnimationUsingPath Duration="0:0:5"
                                     Storyboard.TargetName="ellipse"
                                     Storyboard.TargetProperty="Center">
                <PointAnimationUsingPath.PathGeometry>
                    <PathGeometry Figures="M 0,0 60 100 A100 50 0 0 1 400 150"/>
                </PointAnimationUsingPath.PathGeometry>
            </PointAnimationUsingPath>
                                     
        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="Button.Click" SourceName="btn">
              <BeginStoryboard Storyboard="{StaticResource sb}"/>
        </EventTrigger>
    </Window.Triggers>
    <Grid>
        <Path Data="M 0,0 60 100 A100 50 0 0 1 400 150"  Stroke="Blue" StrokeThickness="2"/>
        <StackPanel>
            <Border Width="50" Height="50" Background="Red" HorizontalAlignment="Left">
                <Border.RenderTransform>
                    <TransformGroup> 
                        <RotateTransform x:Name="rt" Angle="0"/>
                        <TranslateTransform x:Name="tt" X="0" Y="0"/>
                    </TransformGroup>
                </Border.RenderTransform>
            </Border>
        </StackPanel>
        <Path Fill="Green">
            <Path.Data>
                <EllipseGeometry Center="0,0" RadiusX="50" RadiusY="30" x:Name="ellipse"/>
            </Path.Data>
        </Path>
        <Button Content="执行动画" VerticalAlignment="Bottom" Height="30" Name="btn"/>
    </Grid>

MatrixAnimationUsingPath

    <Window.Resources>
        <Storyboard x:Key="sb">
            <!--X轴-->
            <!--Source:从Path路径中取什么值--><!--
            <DoubleAnimationUsingPath Duration="0:0:5"
                                      Storyboard.TargetName="tt"                                     
                                      Storyboard.TargetProperty="X"
                                      Source="X">
                <DoubleAnimationUsingPath.PathGeometry>
                    <PathGeometry Figures="M 0,0 60 100 A100 50 0 0 1 400 150"/>
                </DoubleAnimationUsingPath.PathGeometry>
            </DoubleAnimationUsingPath>
            --><!--Y轴--><!--
            <DoubleAnimationUsingPath Duration="0:0:5"
                                      Storyboard.TargetName="tt"                                     
                                      Storyboard.TargetProperty="Y"
                                      Source="Y">
                <DoubleAnimationUsingPath.PathGeometry>
                    <PathGeometry Figures="M 0,0 60 100 A100 50 0 0 1 400 150"/>
                </DoubleAnimationUsingPath.PathGeometry>
            </DoubleAnimationUsingPath>
            --><!--路径方向--><!--
            <DoubleAnimationUsingPath Duration="0:0:5"
                                      Storyboard.TargetName="rt"
                                      Storyboard.TargetProperty="Angle"
                                      Source="Angle">
                <DoubleAnimationUsingPath.PathGeometry>
                    <PathGeometry Figures="M 0,0 60 100 A100 50 0 0 1 400 150"/>
                </DoubleAnimationUsingPath.PathGeometry>
            </DoubleAnimationUsingPath>

            <PointAnimationUsingPath Duration="0:0:5"
                                     Storyboard.TargetName="ellipse"
                                     Storyboard.TargetProperty="Center">
                <PointAnimationUsingPath.PathGeometry>
                    <PathGeometry Figures="M 0,0 60 100 A100 50 0 0 1 400 150"/>
                </PointAnimationUsingPath.PathGeometry>
            </PointAnimationUsingPath>-->
            
            <!--DoesRotateWithTangent是否允许旋转-->
            <MatrixAnimationUsingPath Storyboard.TargetName="mt"
                                      Duration="0:0:5"
                                      Storyboard.TargetProperty="Matrix"
                                      DoesRotateWithTangent="True">
                <MatrixAnimationUsingPath.PathGeometry>
                    <PathGeometry Figures="M 0,0 60 100 A100 50 0 0 1 400 150"/>
                </MatrixAnimationUsingPath.PathGeometry>
            </MatrixAnimationUsingPath>
        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="Button.Click" SourceName="btn">
              <BeginStoryboard Storyboard="{StaticResource sb}"/>
        </EventTrigger>
    </Window.Triggers>
    <Grid>
        <Path Data="M 0,0 60 100 A100 50 0 0 1 400 150"  Stroke="Blue" StrokeThickness="2"/>
        <StackPanel>
            <Border Width="50" Height="50" Background="Red" HorizontalAlignment="Left">
                <Border.RenderTransform>
                    <TransformGroup> 
                        <!--<RotateTransform x:Name="rt" Angle="0"/>
                        <TranslateTransform x:Name="tt" X="0" Y="0"/>-->
                        <MatrixTransform x:Name="mt"/>
                    </TransformGroup>
                </Border.RenderTransform>
            </Border>
        </StackPanel>
        <Path Fill="Green">
            <Path.Data>
                <EllipseGeometry Center="0,0" RadiusX="50" RadiusY="30" x:Name="ellipse"/>
            </Path.Data>
        </Path>
        <Button Content="执行动画" VerticalAlignment="Bottom" Height="30" Name="btn"/>
    </Grid>

效果