방법: Storyboard를 사용하여 애니메이션 효과를 적용한 후 속성 설정

아티클
05/04/2023

경우에 따라 애니메이션 효과를 적용한 속성의 값을 변경할 수 없는 것처럼 나타납니다.

SolidColorBrush의 색에 애니메이션 효과 적용

다음 예제에서 Storyboard는 SolidColorBrush의 색에 애니메이션 효과를 주는 데 사용됩니다. 스토리보드는 단추를 클릭할 때 트리거됩니다. Completed 이벤트는 ColorAnimation이 완료될 때 프로그램에 알림이 표시되도록 처리됩니다.

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

브러시 색 변경

ColorAnimation이 완료되면 프로그램에서 브러시의 색을 파란색으로 변경하려고 시도합니다.

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

이전 코드는 아무 것도 수행하지 않는 것처럼 보입니다. 브러시는 브러시에 애니메이션 효과를 준 ColorAnimation에 의해 적용된 값인 노란색으로 유지됩니다. 기본 속성 값(기본 값)은 실제로 파란색으로 변경됩니다. 그러나 ColorAnimation이 여전히 기본 값을 재정의하므로 유효 값 또는 현재 값은 노란색으로 유지됩니다. 기본 값이 다시 유효 값이 되도록 하려면 애니메이션이 속성에 영향을 주는 것을 중지해야 합니다. 스토리보드 애니메이션에는 세 가지 방법이 있습니다.

애니메이션의 FillBehavior 속성을 Stop으로 설정
전체 Storyboard를 제거합니다.
개별 속성에서 애니메이션을 제거합니다.

애니메이션의 FillBehavior 속성을 Stop으로 설정

FillBehavior를 Stop으로 설정하면 애니메이션의 활성 기간이 끝나면 대상 속성에 영향을 주지 않도록 할 수 있습니다.

<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

전체 스토리보드 제거

RemoveStoryboard 트리거 또는 Storyboard.Remove 메서드를 사용하여 스토리보드 애니메이션이 대상 속성에 영향을 주지 않도록 할 수 있습니다. 이 접근 방식과 FillBehavior 속성 설정의 차이점은 언제든지 스토리보드를 제거할 수 있지만 애니메이션의 활성 기간이 끝나야 FillBehavior 속성이 효과가 있다는 것입니다.

<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

개별 속성에서 애니메이션 제거

애니메이션이 속성에 영향을 주지 않도록 하는 또 다른 방법은 애니메이션 효과를 주는 개체의 BeginAnimation(DependencyProperty, AnimationTimeline) 메서드를 사용하는 것입니다. 애니메이션 효과를 줄 속성을 첫 번째 매개 변수로, null을 두 번째 매개 변수로 지정합니다.

<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

이 기술은 스토리보드가 아닌 애니메이션에도 작동합니다.