Instrukcje: ustawianie właściwości po animowaniu jej za pomocą scenorysu

Artykuł
12/19/2024

W niektórych przypadkach może się wydawać, że nie można zmienić wartości właściwości po tym, jak została animowana.

Animowanie koloru pędzla SolidColorBrush

W poniższym przykładzie Storyboard służy do animowania koloru SolidColorBrush. Scenorys jest wyzwalany po kliknięciu przycisku. Zdarzenie Completed jest obsługiwane tak, aby program został powiadomiony, kiedy ColorAnimation się zakończy.

<Button
  Content="Animate and Then Set Example 1">
  <Button.Background>
    <SolidColorBrush x:Name="Button1BackgroundBrush"
      Color="Red" />
  </Button.Background>
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard>
        <Storyboard>
          <ColorAnimation
            Storyboard.TargetName="Button1BackgroundBrush"
            Storyboard.TargetProperty="Color"
            From="Red" To="Yellow" Duration="0:0:5"
            FillBehavior="HoldEnd"
            Completed="setButton1BackgroundBrushColor" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>

Zmienianie koloru pędzla

Po zakończeniu ColorAnimation program próbuje zmienić kolor pędzla na niebieski.

private void setButton1BackgroundBrushColor(object sender, EventArgs e)
{

    // Does not appear to have any effect:
    // the brush remains yellow.
    Button1BackgroundBrush.Color = Colors.Blue;
}

Private Sub setButton1BackgroundBrushColor(ByVal sender As Object, ByVal e As EventArgs)

    ' Does not appear to have any effect:
    ' the brush remains yellow.
    Button1BackgroundBrush.Color = Colors.Blue
End Sub

Poprzedni kod nie wydaje się nic robić: pędzel pozostaje żółty, co jest wartością nadaną przez ColorAnimation, która animuje pędzel. Wartość właściwości bazowej (wartość podstawowa) jest rzeczywiście zmieniana na niebieską. Jednak efektywna lub bieżąca wartość pozostaje żółta, ponieważ ColorAnimation nadal zastępuje wartość podstawową. Jeśli chcesz, aby wartość podstawowa stała się ponownie efektywną wartością, musisz zatrzymać animację, aby nie wpływała na właściwość. Istnieją trzy sposoby, aby to zrobić za pomocą animacji scenorysu:

Ustaw właściwość FillBehavior animacji na Stop
Usuń cały storyboard.
Usuń animację z właściwości indywidualnej.

Ustaw właściwość FillBehavior animacji na Stop

Ustawiając FillBehavior na Stop, informujesz animację o zatrzymaniu wpływu na jej właściwość docelową po osiągnięciu końca aktywnego okresu.

<Button
  Content="Animate and Then Set Example 2">
  <Button.Background>
    <SolidColorBrush x:Name="Button2BackgroundBrush"
      Color="Red" />
  </Button.Background>
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard>
        <Storyboard>
          <ColorAnimation
            Storyboard.TargetName="Button2BackgroundBrush"
            Storyboard.TargetProperty="Color"
            From="Red" To="Yellow" Duration="0:0:5"
            FillBehavior="Stop"
            Completed="setButton2BackgroundBrushColor" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>

private void setButton2BackgroundBrushColor(object sender, EventArgs e)
{

    // This appears to work:
    // the brush changes to blue.
    Button2BackgroundBrush.Color = Colors.Blue;
}

Private Sub setButton2BackgroundBrushColor(ByVal sender As Object, ByVal e As EventArgs)

    ' This appears to work:
    ' the brush changes to blue.
    Button2BackgroundBrush.Color = Colors.Blue
End Sub

Usuń cały scenorys

Używając wyzwalacza RemoveStoryboard lub metody Storyboard.Remove, informujesz animacje scenorysu, aby przestały wpływać na swoje właściwości docelowe. Różnica między tym podejściem a ustawieniem właściwości FillBehavior polega na tym, że można usunąć scenorys w dowolnym momencie, podczas gdy właściwość FillBehavior ma wpływ tylko wtedy, gdy animacja osiągnie koniec aktywnego okresu.

<Button
  Name="Button3"
  Content="Animate and Then Set Example 3">
  <Button.Background>
    <SolidColorBrush x:Name="Button3BackgroundBrush"
      Color="Red" />
  </Button.Background>
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard Name="MyBeginStoryboard">
        <Storyboard x:Name="MyStoryboard">
          <ColorAnimation
            Storyboard.TargetName="Button3BackgroundBrush"
            Storyboard.TargetProperty="Color"
            From="Red" To="Yellow" Duration="0:0:5"
            FillBehavior="HoldEnd"
            Completed="setButton3BackgroundBrushColor" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>

private void setButton3BackgroundBrushColor(object sender, EventArgs e)
{

     // This appears to work:
    // the brush changes to blue.
    MyStoryboard.Remove(Button3);
    Button3BackgroundBrush.Color = Colors.Blue;
}

Private Sub setButton3BackgroundBrushColor(ByVal sender As Object, ByVal e As EventArgs)

     ' This appears to work:
    ' the brush changes to blue.
    MyStoryboard.Remove(Button3)
    Button3BackgroundBrush.Color = Colors.Blue
End Sub

Usuń animację z pojedynczej właściwości

Inną techniką, aby uniemożliwić animacji wpływanie na właściwość, jest użycie metody BeginAnimation(DependencyProperty, AnimationTimeline) obiektu animowanego. Określ właściwość, która jest animowana jako pierwszy parametr, a null jako drugą.

<Button
  Name="Button4"
  Content="Animate and Then Set Example 4">
  <Button.Background>
    <SolidColorBrush x:Name="Button4BackgroundBrush"
      Color="Red" />
  </Button.Background>
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard>
        <Storyboard>
          <ColorAnimation
            Storyboard.TargetName="Button4BackgroundBrush"
            Storyboard.TargetProperty="Color"
            From="Red" To="Yellow" Duration="0:0:5"
            FillBehavior="HoldEnd"
            Completed="setButton4BackgroundBrushColor" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>

private void setButton4BackgroundBrushColor(object sender, EventArgs e)
{

     // This appears to work:
    // the brush changes to blue.
    Button4BackgroundBrush.BeginAnimation(SolidColorBrush.ColorProperty, null);
    Button4BackgroundBrush.Color = Colors.Blue;
}

Private Sub setButton4BackgroundBrushColor(ByVal sender As Object, ByVal e As EventArgs)

     ' This appears to work:
    ' the brush changes to blue.
    Button4BackgroundBrush.BeginAnimation(SolidColorBrush.ColorProperty, Nothing)
    Button4BackgroundBrush.Color = Colors.Blue
End Sub

Ta technika działa również w przypadku animacji innych niż storyboard.

Udostępnij za pośrednictwem