WPF编程，通过Path类型制作沿路径运动的动画另一种方法。

Posted 2021-02-17 lonelyxmas

原文:WPF编程，通过Path类型制作沿路径运动的动画另一种方法。

版权声明：我不生产代码，我只是代码的搬运工。 https://blog.csdn.net/qq_43307934/article/details/87358989

上一篇文章给了一个这方面的例子，那个文章里是通过后台按钮事件进行动画的开始、停止、继续等。

这里给出的是通过前台XAML来实现。

1、前台

定义路径、定义运动的主体，这里是一圆。

        <Path Stroke="Black"
              StrokeThickness="1"
              Data="M 96 288 C 576 0,0 0,480 288" />

        <Path Fill="Blue">
            <Path.Data>
                <EllipseGeometry x:Name="elips"
                                 Center="90 290"
                                 RadiusX="12"
                                 RadiusY="12" />
            </Path.Data>
        </Path>

2、增加控制按钮

增加四个控制按钮，

增加四个触发动作。

        <StackPanel>
            <Button Width=" 100"
                    Height=" 30"
                    x:Name="Beginbutton"
                    Content="开始"                     
                    Margin="258,0,259,0" />
            <Button Width=" 100"
                    x:Name="Pausepbutton"
                    Height=" 30"
                    Content="暂停"                     
                    Margin="258,0,259,0" />
            <Button Width=" 100"
                    x:Name="Resumebutton"
                    Height=" 30"
                    Content="恢复"                    
                    Margin="258,0,259,0" />
            <Button Width=" 100"
                    x:Name="Stopbutton"
                    Height=" 30"
                    Content="停止"
                    Margin="258,0,259,0" />

            <!-- 触发器及故事板的组合 -->
            <StackPanel.Triggers>
                <!-- 很好翻译了：在按键startButton被点击的时候触发 -->
                <EventTrigger SourceName="Beginbutton"
                              RoutedEvent="Button.Click">
                    <!-- 事件触发以后做什么呢？由故事板来解决，它来产生动画效果。 -->
                    <BeginStoryboard x:Name="MyBeginStoryboard">
                        <Storyboard x:Name="story"
                                    Storyboard.TargetName="elips"
                                    Storyboard.TargetProperty="Center">
                            <PointAnimationUsingPath Duration="0:0:3"
                                                     AutoReverse="True"
                                                     RepeatBehavior="Forever">
                                <PointAnimationUsingPath.PathGeometry>
                                    <PathGeometry Figures="M 96 288 C 576 0,0 0,480 288" 
                                </PointAnimationUsingPath.PathGeometry>
                            </PointAnimationUsingPath>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>

                <!-- 同理可证：pauseButton被点击的时候故事全部暂停 ：PauseStoryboard -->
                <EventTrigger SourceName="Pausepbutton"
                              RoutedEvent="Button.Click">
                    <PauseStoryboard BeginStoryboardName="MyBeginStoryboard">
                    </PauseStoryboard>
                </EventTrigger>
                <!-- 同理可证：pauseButton被点击的时候故事全部重新开始 ：ResumeStoryboard -->
                <EventTrigger RoutedEvent="Button.Click"
                              SourceName="Resumebutton">
                    <ResumeStoryboard BeginStoryboardName="MyBeginStoryboard">
                    </ResumeStoryboard>
                </EventTrigger>
                <!-- 同理可证：pauseButton被点击的时候故事全部重新完全停掉 ：StopStoryboard -->
                <EventTrigger RoutedEvent="Button.Click"
                              SourceName="Stopbutton">
                    <StopStoryboard BeginStoryboardName="MyBeginStoryboard">
                    </StopStoryboard>
                </EventTrigger>
            </StackPanel.Triggers>

        </StackPanel>

?