다음을 통해 공유


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

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

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

다음 예제에서 StoryboardSolidColorBrush의 색에 애니메이션 효과를 주는 데 사용됩니다. 스토리보드는 단추를 클릭할 때 트리거됩니다. 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으로 설정

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

<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

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

참고 항목