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

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

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

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

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

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

c# wpf datatrigger coloranimation wpf-animation
person Guy Levin    schedule 04.06.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Существует 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, которое получает или задает значение, указывающее, как ведет себя временная шкала после того, как она достигает конца своего активного периода. Вы можете установить для него значение FillBehavior.HoldEnd перечисление, чтобы Storyboard сохраняло последнее значение, когда оно заканчивается.

person Sheridan    schedule 04.06.2015
comment
Спасибо Шеридан. Это хорошо, но я не знаю, каким было предыдущее состояние, поэтому я хочу, чтобы оно было обращено к тому состоянию, которое было при запуске анимации. - person Guy Levin; 04.06.2015
comment
Извините, но ReverseStoryboard класса нет. Вы всегда можете попробовать программно получить доступ к Storyboard и изменить его свойства, но я бы не рекомендовал этого делать. - person Sheridan; 04.06.2015