방법: Storyboard를 사용하여 애니메이션 효과를 적용한 후 속성 설정
경우에 따라서는 애니메이션 효과를 적용한 후에는 속성 값을 변경할 수 없는 것처럼 보일 수 있습니다.
예제
다음 예제에서는 Storyboard를 사용하여 SolidColorBrush의 색에 애니메이션 효과를 적용합니다. Storyboard는 단추를 클릭할 때 트리거됩니다. 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 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
private void setButton1BackgroundBrushColor(object sender, EventArgs e)
{
// Does not appear to have any effect:
// the brush remains yellow.
Button1BackgroundBrush.Color = Colors.Blue;
}
앞의 코드는 아무 작업도 하지 않는 것처럼 보입니다. 브러시는 브러시에 애니메이션 효과를 적용하는 ColorAnimation에서 제공된 값인 노란색으로 유지됩니다. 기본 속성 값(기준 값)은 실제로 파란색으로 변경됩니다. 하지만 ColorAnimation이 여전히 기준 값을 재정의하므로 유효 또는 현재 값은 노란색으로 남아 있습니다. 기준 값이 다시 유효 값이 되도록 하려면 애니메이션이 속성에 영향을 주지 않도록 해야 합니다. Storyboard 애니메이션에서 이렇게 하는 방법에는 세 가지가 있습니다.
애니메이션의 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 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
private void setButton2BackgroundBrushColor(object sender, EventArgs e)
{
// This appears to work:
// the brush changes to blue.
Button2BackgroundBrush.Color = Colors.Blue;
}
전체 Storyboard 제거
RemoveStoryboard 트리거 또는 Storyboard.Remove 메서드를 사용하면 Storyboard 애니메이션이 대상 속성에 영향을 주는 것이 중지됩니다. 이 방법과 FillBehavior 속성을 설정하는 방법의 차이는 이 방법의 경우 Storyboard를 언제라도 제거할 수 있지만 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 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
private void setButton3BackgroundBrushColor(object sender, EventArgs e)
{
// This appears to work:
// the brush changes to blue.
MyStoryboard.Remove(Button3);
Button3BackgroundBrush.Color = Colors.Blue;
}
개별 속성에서 애니메이션 제거
애니메이션이 속성을 영향을 주는 것을 중지하는 또 다른 방법은 애니메이션 효과가 적용되는 개체의 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 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
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;
}
이 방법은 비 Storyboard 애니메이션에서도 작동합니다.