Остановить анимацию без сброса в исходное положение wpf

У меня есть следующий стиль для кнопки, которая используется для кнопки обновления - когда пользователь наводит указатель мыши на кнопку, изображение на ней (в данном случае круговая стрелка) вращается:

<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?

Анимация должна продолжиться с того места, где она остановилась, если пользователь наведет указатель мыши на кнопку еще раз.

Я знаю, что это действительно мелочь, но это мелочь, которая не исчезнет, ​​и каждый раз, когда я использую этот шаблон, я безуспешно пытаюсь решить проблему. Я не могу не думать, что я что-то упускаю. Мне не помогает тот факт, что все связанные с этим проблемы, которые я обнаруживаю, связаны с тем, что анимация вообще не останавливается - сузить поиск оказалось очень сложно.


animation wpf triggers rendertransform
person High Plains Grifter    schedule 06.01.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я считаю, что вы ищете это:

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

Чтобы добавить в ваш DoubleAnimation.

EDIT: это в сочетании с заменой StopStoryBoard на PauseStoryBoard должно решить проблему. Окончательный 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>
person o_w    schedule 07.01.2021
comment
Я вижу, что это поможет продолжить анимацию с ненулевой начальной точки, но вращение все равно возвращается к нулю, как только мышь покидает кнопку. - person High Plains Grifter; 07.01.2021
comment
Нет, неважно — в других поисках я обнаружил, что мне следует использовать PauseStoryboard вместо StopStoryboard — тогда все работает нормально! - person High Plains Grifter; 07.01.2021