안녕하세요. 정말 오랜만의 포스팅입니다. 계속 바쁘다 핑계를 대고 있지만 사실은.. 게을러서 자꾸 포스팅이 늦어지고 있네요.. 죄송합니다 ㅜ_ㅜㅋ
이번 시간에는 실제 실무에서도 접할 수 있을 법한 내용이므로 한번쯤 따라 해보시는 것을 권장합니다.
예제에서는 아래 그림과 같이 화면 중앙에 빨간색 사각형을 마우스를 클릭했을 때 색이 노란색으로 바뀌고, Animation이 완료된 후 파란색으로 바뀌는 효과를 구현해보겠습니다.
|
<Window x:Class="WPFKorea.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF Korea - whatisthat.co.kr" Height="300" Width="300"> <Rectangle Width="150" Height="150"> <Rectangle.Fill> <SolidColorBrush x:Name="BackgroundBrush" Color="Red" /> </Rectangle.Fill> <Rectangle.Triggers> <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown"> <BeginStoryboard> <Storyboard> <ColorAnimation Storyboard.TargetName="BackgroundBrush" Storyboard.TargetProperty="Color" From="Red" To="Yellow" Completed="ColorAnimation_Completed"/> </Storyboard> </BeginStoryboard> </EventTrigger> </Rectangle.Triggers> </Rectangle> </Window> |
|
private void ColorAnimation_Completed(object sender, EventArgs e) { BackgroundBrush.Color = Colors.Blue; } |
실행 결과를 한번 볼까요? 그냥 보기에는 문제가 없는 코드처럼 보입니다. 하지만, 코드를 실행 해보면 아래 동영상처럼 클릭할 때 마다 빨강에서 노랑으로 변할 뿐 파랑으로 변하지는 않습니다. 마치 Completed 부분의 Code가 아무런 작업도 하지 않는 것처럼 보이는데, 이유는 Animation이 원래 속성의 기본값을 재정의 하기 때문입니다. 간단하게 설명하면 BackgroundBrush.Color 의 기본 공간이 Animation에서 사용하는 공간과 다르다고 생각 하시면 됩니다. 위 예제에서 실제 Color속성의 공간에는 파란색이 저장되지만, 화면에 보여질 때 사용하는 Color속성은 Animation에서 사용하는 공간을 참조하기 때문입니다. Animation이 시작되면 그 즉시 해당 속성에 대한 참조 위치가 변경 되기 때문에 Animation이 끝난 뒤에 속성을 변경하려고 해도 적용되지 않는 것처럼 보이는 것인데요. 원래의 속성이 기준 값이 되도록 하려면 Animation이 속성에 영향을 주지 않도록 구현 해야 합니다.
WPF에서는 아래와 같이 Animation이 속성에 영향을 주지 않도록 하는 3가지 방법을 제공 하고 있으며, 하나하나 살펴보도록 하겠습니다.
- Animation의 FillBehavior속성을 Stop으로 설정한다.
- Storyboard에서 Target객체를 제거.
- 개별 Animation속성을 제거한다.
[Animation의 FillBehavior속성을 Stop으로 설정]
|
<ColorAnimation Storyboard.TargetName="BackgroundBrush" Storyboard.TargetProperty="Color" From="Red" To="Yellow" FillBehavior="Stop" Completed="ColorAnimation_Completed"/> |
FillBehavior속성이 Stop이 되면 Animation이 완료된 시점부터는 대상 속성에 영향을 주지 않기 때문에, 코드가 정상적으로 작동하는 것을 확인 할 수 있습니다. FillBehavior를 사용하는 방법은 Animation이 완료된 시점에서만 사용 할 수 있습니다.
[Storyboard에서 Target객체를 제거]
|
<Window x:Class="WPFKorea.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF Korea - whatisthat.co.kr" Height="300" Width="300"> <Rectangle Width="150" Height="150" x:Name="Rectangle"> <Rectangle.Fill> <SolidColorBrush x:Name="BackgroundBrush" Color="Red" /> </Rectangle.Fill> <Rectangle.Triggers> <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown"> <BeginStoryboard> <Storyboard x:Name="Storyboard"> <ColorAnimation Storyboard.TargetName="BackgroundBrush" Storyboard.TargetProperty="Color" From="Red" To="Yellow" FillBehavior="Stop" Completed="ColorAnimation_Completed"/> </Storyboard> </BeginStoryboard> </EventTrigger> </Rectangle.Triggers> </Rectangle> </Window> |
|
private void ColorAnimation_Completed(object sender, EventArgs e) { Storyboard.Remove(Rectangle); BackgroundBrush.Color = Colors.Blue; } |
Sotryboard에서 Target객체를 제거하는 방법은 Animation완료 시가 아니더라도 언제라도 사용할 수 있습니다.
[개별 Animation속성을 제거 ]
|
<Window x:Class="WPFKorea.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF Korea - whatisthat.co.kr" Height="300" Width="300"> <Rectangle Width="150" Height="150" x:Name="Rectangle"> <Rectangle.Fill> <SolidColorBrush x:Name="BackgroundBrush" Color="Red" /> </Rectangle.Fill> <Rectangle.Triggers> <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown"> <BeginStoryboard> <Storyboard x:Name="Storyboard"> <ColorAnimation Storyboard.TargetName="BackgroundBrush" Storyboard.TargetProperty="Color" From="Red" To="Yellow" FillBehavior="Stop" Completed="ColorAnimation_Completed"/> </Storyboard> </BeginStoryboard> </EventTrigger> </Rectangle.Triggers> </Rectangle> </Window> |
|
private void ColorAnimation_Completed(object sender, EventArgs e) { Rectangle.BeginAnimation(SolidColorBrush.ColorProperty, null); BackgroundBrush.Color = Colors.Blue; } |
이 방법은 BeginAnimation 메서드를 사용하여 속성과 연결된 Animation을 Null로 할당하여 Animation과 Property간의 연결을 중단하는 방법입니다.
위 3가지 예제의 결과는 모두 같은 결과를 나타내며 결과는 아래와 같습니다.
02_SFC_ANIMATION.zip
