WPF의 애니메이션

wpf는 애니메이션이 어느 시점에 변화할지 결정하는 타이밍 시스템이 내장되어 개발자가 쉽게 애니메이션을 제작할 수 있다. 애니메이션을 적용할 땐 개체의 속성에 대하여 애니메이션 효과를 준다. 예를 들어 요소의 크기가 점점 변하는 애니메이션을 만들고 싶다면 요소의 Width 또는 Height 속성에 애니메이션 효과를 준다.

속성에 애니메이션을 주려면 3가지 조건을 충족해야 한다.

1. 해당 속성이 종속성 속성(dependency property)이어야 한다.
2. DependencyObject를 상속받고 Ianimatable 인터페이스를 구현하는 클래스의 속성이어야 한다.
3. 호환 가능한 애니메이션 타입이 있어야한다.(WPF가 제공하지 않는 경우 직접 만들 수 있다)

예제 1 DoubleAnimation을 활용한 페이드 인 페이드 아웃

1.DoubleAnimation 만들기

요소가 점점 사라지거나 다시 보이도록 하려면 요소의 Opacity(불투명도) 속성을 조절한다. Opacity는 Double 형식이므로 Double값을 생성하는 DoubleAnimation을 사용합니다. DoubleAnimation은 두 double 값 간의 전환을 만들며, From속성 값에서 시작하여 To속성 값으로 변화합니다.

<!-- Xaml에서 DoubleAnimation 만들기 -->
<DoubleAnimation From="1.0" To="0.0"/>

// 코드에서 DoubleAnimation 만들기
DoubleAnimation da = new DoubleAnimation();
da.From = 1.0;
da.To = 0.0;

From 속성 값에서 To 속성 값으로 변화하는데 시간이 얼마나 걸릴지 지정합니다.

<DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" />

myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));

5초에 걸쳐 투명하게 되는 애니메이션입니다.

다시 원래대로 돌아올지, 애니메이션이 반복적으로 재생될지 설정합니다.

<DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever"/>

myDoubleAnimation.AutoReverse = true;
myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;

2. Storyboard 만들기

개체에 애니메이션을 적용하려면 Storyboard를 만들고 TargetName 및 TargetProperty를 지정해서 어느 개채의 어떤 속성에 애니메이션을 적용할지 설정합니다.

Storyboard를 만들고 애니메이션을 그 자식으로 추가

<!-- Xaml에서 Storyboard를 만들고 자식으로 DoubleAnimation을 추가 -->
<Storyboard>
    <DoubleAnimation
        From="1.0" To="0.0" Duration="0:0:1"
        AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>

// 코드에서 Storyboard 변수를 선언하고 자식으로 DoubleAnimation 추가
private Storyboard myStoryboard;
myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);

myRectangle이라는 개체를 타겟으로 설정하고 해당 개체의 Opacity 속성을 타겟 속성으로 설정합니다.

<Storyboard>
    <DoubleAnimation
        Storyboard.TargetName="MyRectangle"
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:1"
        AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>

Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.OpacityProperty));​

3. Storyboard를 트리거에 연결

이제 해당 Storyboard를 언제 시작할지 설정해야 합니다.

BeginStoryboard 개체를 만들고 스토리보드를 자식으로 설정합니다.
<BeginStoryboard>
  <Storyboard>
    <DoubleAnimation
      Storyboard.TargetName="MyRectangle"
      Storyboard.TargetProperty="Opacity"
      From="1.0" To="0.0" Duration="0:0:5"
      AutoReverse="True" RepeatBehavior="Forever" />
  </Storyboard>
</BeginStoryboard>

<Rectangle
  Name="MyRectangle"
  Width="100"
  Height="100"
  Fill="Blue">
  <Rectangle.Triggers>
    <!-- Animates the rectangle's opacity. -->
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation
            Storyboard.TargetName="MyRectangle"
            Storyboard.TargetProperty="Opacity"
            From="1.0" To="0.0" Duration="0:0:5"
            AutoReverse="True" RepeatBehavior="Forever" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>