WPF Korea +_+ :: Control Flip Animation

'flip'에 해당되는 글 1건

2008/07/27 Control Flip Animation

WPF2008/07/27 13:20

Control Flip Animation

이번 시간에는 아래 동영상과 같이 두 개의 Control이 서로 Flip되는 Animation을 구현 해보도록 하겠습니다.

먼저 다음과 같이 UI를 구성했습니다.

Image Control의 ART.jpg와 LMS.jpg는 사용자가 임의로 다른 이미지를 입력하거나 Image Control이외의 컨트롤을 사용하셔도 됩니다. 이번 예제에서는 Layout은 크게 중요하지 않으며 중요한 것은 Flip을 적용시킬 객체에 미리 이름을 지정하는 것입니다. 그럼 계속해서 코드를 보겠습니다.

public void FlipLayout(UIElement Src, UIElement Des)
{

if(Src == null || Des == null) return;

Storyboard FlipStoryBoard = new Storyboard();
Storyboard.SetTargetProperty(FlipStoryBoard, new
PropertyPath("(UIElement.RenderTransform).(ScaleTransform.ScaleY)"));

Src.RenderTransformOrigin = new Point(0.5, 0.5);
Des.RenderTransformOrigin = new Point(0.5, 0.5);

Src.RenderTransform = new ScaleTransform(1,1);
Des.RenderTransform = new ScaleTransform(1,0);

DoubleAnimation OutAnimation = new DoubleAnimation(1,0,TimeSpan.FromMilliseconds(200));
DoubleAnimation InAnimation = new DoubleAnimation(0, 1, TimeSpan.FromMilliseconds(200));
InAnimation.BeginTime = TimeSpan.FromMilliseconds(200);

Storyboard.SetTargetName(OutAnimation, (Src as FrameworkElement).Name);
Storyboard.SetTargetName(InAnimation, (Des as FrameworkElement).Name);

FlipStoryBoard.Children.Add(OutAnimation);
FlipStoryBoard.Children.Add(InAnimation);

FlipStoryBoard.Begin(this);

}

C#으로 작성된 Flip 함수 입니다. XAML로 도 충분히 구현이 가능하지만, Parameter를 통한 동적인 효과를 제공하기 위해 C#으로 구현해 보았습니다. FlipLayout함수의 Src는 현재 화면에 표시되고 있는 객체고(뒤로 숨을 객체), Des가 표시할 객체입니다. FlipStoryboard의 TargetProperty를 ScaleTransform.ScaleY로 지정하여 상대적인 세로 크기가 변화 하도록 설정하고, 원점을 객체의 중앙으로 설정했습니다. 그리고 DoubleAnimation을 사용하여 Src의 크기가 원점을 기준으로 1에서 0까지 작아지도록 했고 Des의 크기가 0에서 1까지 커지도록 했습니다. 중요한 것은 InAnimation의 Begintime을 설정 한 것인데요, 이로 인해 Src 객체가 완전히 사라지고 난 뒤 Des가 등장합니다. 단순히 세로 크기만 조절하고 그타이밍만 조절하는 것 뿐인데도 회전하며 내용이 바뀌는 것과 같은 연출 할 수 있습니다.

bool Firsts = true;
private void Button_Click(object sender, RoutedEventArgs e)
{

if (!Firsts)
FlipLayout(First, Second);
else
FlipLayout(Second, First);

Firsts = !Firsts;
}