停止动画而不重置到起始位置 wpf

Question

我在按钮样式中有以下样式，用于刷新按钮 - 当用户将鼠标悬停在按钮上时，按钮上的图像（在本例中为圆形箭头）旋转：

<Style x:Key="RefreshButton" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid Name="buttonContent">
                    <Image Source="/View/Images/Retry Green2.png" x:Name="Picture" RenderTransformOrigin="0.5,0.5">
                        <Image.RenderTransform>
                            <RotateTransform x:Name="AnimatedRotateTransform" Angle="0" />
                        </Image.RenderTransform>
                        <Image.Triggers>
                            <EventTrigger RoutedEvent="MouseEnter">
                                <BeginStoryboard Name="Spinner">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="AnimatedRotateTransform"
                                                         Storyboard.TargetProperty="Angle" 
                                                         From="0" To="360" Duration="0:0:1"
                                                         RepeatBehavior="Forever"
                                             />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="MouseLeave">
                                <StopStoryboard BeginStoryboardName="Spinner"/>
                            </EventTrigger>
                        </Image.Triggers>
                    </Image>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="RenderTransform" TargetName="buttonContent">
                            <Setter.Value>
                                <TranslateTransform X="0" Y="2"/>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

当用户将鼠标移离按钮时，它停止旋转，这很好，但它也会在零旋转时恢复到原始位置（当用户单击按钮时会发生同样的情况）。有没有办法在样式中改变行为，使其停止旋转并保持在新的旋转方向，无论是当用户将鼠标移开还是单击按钮时并在第二个 RenderTransform 中向下变换两个点？

如果用户再次将鼠标悬停在按钮上，动画应该从停止的地方继续。

我知道这是一件非常小的事情，但它是一个不会消失的小问题，每次我使用这个模板时，我都会再次尝试解决问题但没有成功。我忍不住想我错过了什么。我发现的所有相关问题都与动画根本不停止有关，这对我没有帮助 - 事实证明缩小搜索范围非常困难。

Answer 1

我相信你正在寻找这个：

https://docs.microsoft.com/en-us/dotnet/api/system.windows.media.animation.doubleanimation.isadditive?view=net-5.0

添加到您的 DoubleAnimation。

编辑：加上用 PauseStoryBoard 替换 StopStoryBoard 应该可以解决问题。最终的 xaml 在 Image.Triggers 节点中应该如下所示：

<Image.Triggers>
    <EventTrigger RoutedEvent="MouseEnter">
        <BeginStoryboard Name="Spinner">
            <Storyboard>
                <DoubleAnimation Storyboard.TargetName="AnimatedRotateTransform"
                                    Storyboard.TargetProperty="Angle"
                                    IsAdditive="true"
                                    From="0" To="360" Duration="0:0:1"
                                    RepeatBehavior="Forever"
                        />
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
    <EventTrigger RoutedEvent="MouseLeave">
        <PauseStoryboard BeginStoryboardName="Spinner"/>
    </EventTrigger>
</Image.Triggers>

停止动画而不重置到起始位置 wpf

Stop Animation without resetting to start position wpf

wpf

animation

triggers

rendertransform