WPF останавливает и переворачивает анимацию раскадровки при запуске новой анимации

Question

У меня есть 2 DataTrigger, который анимирует цвет фона кнопки (с реверсом), эта часть работает нормально.

Проблема состоит в том, что когда два триггера срабатывают в перекрывающееся время, первый сработавший триггер не меняет цвет, а когда второй триггер останавливается, он меняет цвет на тот, который был цветом, когда предыдущая анимация остановилась.

Что я должен делать?

Это пример кода:

<DataTrigger Binding="{Binding IsUp}" Value="True">
    <DataTrigger.EnterActions>
        <StopStoryboard BeginStoryboardName="isDownStoryBoard"/>
            <BeginStoryboard Name="isUpStoryBoard">
                <Storyboard>
                    <ColorAnimation Storyboard.TargetProperty="Background.GradientStops[0].Color" To="#b4e391" Duration="0:0:1" AutoReverse="True" RepeatBehavior="2x" />
                    <ColorAnimation Storyboard.TargetProperty="Background.GradientStops[1].Color" To="#61c419" Duration="0:0:1" AutoReverse="True" RepeatBehavior="2x" />
                    <ColorAnimation Storyboard.TargetProperty="Background.GradientStops[2].Color" To="#b4e391" Duration="0:0:1" AutoReverse="True" RepeatBehavior="2x" />
                    <ColorAnimation Storyboard.TargetProperty="Background.GradientStops[3].Color" To="#b4e391" Duration="0:0:1" AutoReverse="True" RepeatBehavior="2x" />                           
            </Storyboard>                                                                                                                                     
        </BeginStoryboard>                                                                                                                                    
    </DataTrigger.EnterActions>                                                                                                                                                                                   
</DataTrigger>                                                                                                                                                

<DataTrigger Binding="{Binding IsDown}" Value="True">                                                                                                         
    <DataTrigger.EnterActions>
        <StopStoryboard BeginStoryboardName="isUpStoryBoard"/>
            <BeginStoryboard Name="isDownStoryBoard">                                                                                                                                     
                <Storyboard>                                                                                                                                      
                    <ColorAnimation Storyboard.TargetProperty="Background.GradientStops[0].Color" To="#efc5ca" Duration="0:0:1" AutoReverse="True" RepeatBehavior="2x" />
                    <ColorAnimation Storyboard.TargetProperty="Background.GradientStops[1].Color" To="#d24b5a" Duration="0:0:1" AutoReverse="True" RepeatBehavior="2x" />
                    <ColorAnimation Storyboard.TargetProperty="Background.GradientStops[2].Color" To="#ba2737" Duration="0:0:1" AutoReverse="True" RepeatBehavior="2x" />
                    <ColorAnimation Storyboard.TargetProperty="Background.GradientStops[3].Color" To="#f18e99" Duration="0:0:1" AutoReverse="True" RepeatBehavior="2x" />
            </Storyboard>
        </BeginStoryboard>
    </DataTrigger.EnterActions>     
</DataTrigger>   

Answer 1

E сть StopStoryboard Класс, который вы можете использовать, чтобы остановить бег Storyboard с, но нет ReverseStoryboard учебный класс. Тем не менее, вы можете просто создать еще один Storyboard это работает в обратном направлении к вашему первоначальному, который вы запускаете, когда вы останавливаете оригинальный. Вы можете использовать StopStoryboard Класс как это (со связанной страницы в MSDN):

<!-- Begin the Storyboard -->
<EventTrigger RoutedEvent="Button.Click" SourceName="BeginButton">
  <BeginStoryboard Name="MyBeginStoryboard">
    <Storyboard >
      <DoubleAnimation 
        Storyboard.TargetName="myRectangle" 
        Storyboard.TargetProperty="Width" 
        Duration="0:0:5" From="100" To="500" />
    </Storyboard>
  </BeginStoryboard>
</EventTrigger>

...

<!-- Stop the Storyboard -->
<EventTrigger RoutedEvent="Button.Click" SourceName="StopButton">
  <StopStoryboard BeginStoryboardName="MyBeginStoryboard" />
</EventTrigger>

Также, пожалуйста, смотрите Timeline.FillBehavior Свойство, которое вы можете установить на Storyboard which Получает или задает значение, которое указывает, как ведет себя временная шкала после того, как она достигает конца своего активного периода. Вы можете установить его на FillBehavior.HoldEnd Перечень, чтобы получить Storyboard чтобы сохранить его последнее значение, когда он заканчивается.