Animation 탐색紀 (3편)

KeyFrame 에니메이션에 대해서 알아보자.

 

지금까지 애니메이션을 구현할 때에는 시작값과 끝값으로만 표현을 했었다. 하지만 모든 애니메이션이 하나의 값(시작과 끝이라고 설정되는 값을 하나의 값으로 본다)만 사용해서 표현할 경우 심각한 표현의 장애를 가지게 된다. 따라서 좀 더 유연하면서도 복잡한 애니메이션을 구현할 때 Key Frame을 사용한다. 여기서 복잡한 이란 뜻은 시작값과 끝값만으로는 표현이 안되는 예를 들면 각 시간대별로 이동 속도를 다르게 표현하고 싶다거나 점점 속도가 빨라지는 애니메이션등과 같은 역동적인 애니메이션을 구현할 때 사용한다. 즉 시작값과 끝값만으로는 단지 하나의 단순한 애니메이션만을 표현할 수 있기 때문이다. 아마도 플래쉬를 조금이라도 사용해본 사용자들은 Key Frame에 대해서 어느정도 면식이 있을 것이다. 하지만 내가 아직 플래쉬를 사용해 본 경험이 없어서 뭐라고 딱히 비교해서 설명하기가 무척 곤란하다. ^^;;

 

우리가 알고 있는 애니메이션은 총 3가지. DoubleAnimation, ColorAnimation, PointAnimation 모두가 Key Frame 애니메이션을 구현할 수 있다. 단지 이름만 조금 바뀔 뿐인데, 예를 들면 DoubleAnimation을 표현하기 위해서는 DoubleAnimationUsingKeyFrames로 바뀐다. 즉, 마지막에 UsingKeyFrames라는 구문만 추가하면 된다. 그리고 이러한 구문은 Storyboard내에서 복수개 사용이 가능하다. 각 요소(xxxxxxUsingKeyFrames)의 내부에는 반드시 두가지의 속성을 정의해야 하는데 KeyTime과 Value이다. 각각의 속성에 대해서 간단히 설명하겠다.

 

KeyTime

    애니메이션이 실행되는 시간(시작과 끝값과는 다르다. 특정한 형태가 실행되길 원하는 시간이다.)

    예를 들면 4초동안만 실행되길 원한다면 KeyTime=”0:0:4”로 표현한다.

Value

    위에서 설정한 KeyTime의 시간동안 특정 값이 얼마정도 변했으면 할 경우에 설정하는 값이다.

 

말로만 풀면 알기 어렵기 때문에 예를 보자.

00: <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0" />

        01: <LinearDoubleKeyFrame Value="350" KeyTime="0:0:2" />

        02: <LinearDoubleKeyFrame Value="50" KeyTime="0:0:7" />

    03: <LinearDoubleKeyFrame Value="200" KeyTime="0:0:8" />

위의 예에서 1라인을 보면 2초동안 350정도 값이 변하도록 할 경우, 2라인을 보면 2초에서 7초의 사이인 5초동안 50의 값이 변형되도록 설정하였다. 즉, 위의 애니메이션의 경우 최초에 2초동안 350정도의 값이 변형되기 때문에 상당히 빠른 속도로 물체가 이동을 한다. 그리고 350에서 50까지의 거리를 5초동안 이동을 하기 때문에 움직임이 느리다. 마지막의 경우는 50에서 200으로 약 150의 거리를 1초동안 이동해야 하기 때문에 빠르게 물체가 움직인다. 이처럼 물체의 이동 속도 및 변형 속도를 자유자재로 변형시키고자 할 경우에 Key Frame 애니메이션을 사용하는 것이다.

 

이들 값을 설정하는 경우에 같이 사용되는 속성이 있다. Linear, Discrete, Spline이다. 즉 조합을 해 보면 총 9가지의 패턴이 발생을 한다. 3가지의 애니메이션 효과(Double, Color, Point) 그리고 3가지의 KeyFrame효과(Linear, Discrete, Spline)의 조합으로 총 9가지가 발생하는 것이다.

 

Linear

    값들이 선형으로 보간된다. 복잡한 수식보다 간단하게 설명하면 실행시키고자 하는 범위에서 값이 일정하게 변화하는 것을 말한다. 위의 예에서 보면 0라인에서 시작해서 1라인으로 변형될 때 2초동안 350이라는 변화를 보이는데 이 때 이동되는 속도가 일정하다. 0부터 350지점까지 이동할 때 갑자기 속도가 증가하거나 줄거나 하는 변화는 없다. 즉 이러한 형태를 선형변환이라고 한다. x축이 시간이고 y축이 이동거리라면 하나의 선으로만 표현되는 형태이다. 기울기가 일정하니 당연히 이동 속도도 일정한 것이다.

Discrete

    특정 위치로 이동시키는 것일 말한다. 여기서 말하는 위치는 각 애니메이션에서 의미하는 바가 다르다.

        <DiscreteDoubleKeyFrame Value="400" KeyTime="0:0:3" />

    위와 같이 사용할 경우 3초가 되었을 때 400이라는 위치로 이동하라는 뜻이다. 즉 값자기 물체가 사라졌다가 3초가 되었을 때 400이라는 위치에서 새로이 시작을 한다.

Spline

    <SplineDoubleKeyFrame KeyTime="00:00:02" Value="266" KeySpline="0,0 1,1"/>

                                               (1,1)

(0,0)

    스플라이인의 경우는 선의 기울기를 변화시켜서 속도의 변화를 가져온다. 현재 위의 그림의 경우는 기울기의 변화가 없기 때문에 일정한 속도고 300까지 이동을 한다. 하지만 KeySpline이라는 속성에 조금의 변화를 주게 되면 기울기가 변한다.

    <SplineDoubleKeyFrame KeyTime="00:00:02" Value="300" KeySpline="0,0 0.8,0"/>

                                               (0.8,0)

(0,0)

    위와 같이 설정을 하면 객체가 천천히 움직이다가 갑자기 빨리 움직인다. 처음에는 기울기의 경사가 완만하다가 서서히 기울기의 경사가 급해지는 것과 움직임이 일치하는 것을 볼 수 있다. KeySpline에 설정되는 값의 범위는 X,Y 둘다 0.0~1.0까지 이다. 따라서 아래와 같이 설정을 하면 각각의 최대치에 따른 변화의 끝을 볼 수 가 있다.

(0,1)

                                                 (1,0)

    <SplineDoubleKeyFrame KeyTime="00:00:02" Value="300" KeySpline="1,0 0,1"/>

(1,0)

                                                 (0,1)

    <SplineDoubleKeyFrame KeyTime="00:00:02" Value="300" KeySpline="0,1 1,0"/>

 

각각의 특징에 따라서 Value와 KeyTime에 설정되는 값의 효과도 서로 조금씩 영향을 미치게 된다. 특히 KeyTime에서 겹쳐서 발생할 경우에 무엇에 우선순위를 둘 것인가 하는 것이다. 특히 Discrete가 들어간 부분인데

                <LinearDoubleKeyFrame Value="500" KeyTime="0:0:4" />

                <DiscreteDoubleKeyFrame Value="400" KeyTime="0:0:3" />

위와 같은 경우 3초가 되는 시점에 400이란 곳으로 이동을 하라는 것이다. 그런데 Linear와 서로 연결이 될 경우 어떤 현상이 발생할까? 그리고 아래의 경우는 어떤 현상이 발생할까?

                <LinearDoubleKeyFrame Value="500" KeyTime="0:0:2" />

                <DiscreteDoubleKeyFrame Value="400" KeyTime="0:0:4" />

생각보다 Discrete란 녀석을 잘 활용하면 조금더 역동적인 효과를 낼 수 있지만 잘못 활용할 경우 Linear나 Spline과 서로 충돌이 발생해서 생각지 않은 결과를 만들어 낼 수가 있기 때문에 조심하길 바란다. 그리고 각자가 충분히 테스트를 해 본다면 그다지 어렵지 않게 KeyFrame을 적용할 수가 있을 것이다. 마지막으로 전체 소스를 남긴다. 출저는 MS도움말 파일(Silverlight 1.0 - Development with JavaScript.chm)이다.

 

<Canvas

  xmlns="http://schemas.microsoft.com/client/2007"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  Width="400" Height="300">

  <Rectangle Fill="Blue"

    Width="50" Height="50">

    <Rectangle.RenderTransform>

      <TranslateTransform

        x:Name="MyAnimatedTranslateTransform"

        X="0" Y="0" />

    </Rectangle.RenderTransform>

    <Rectangle.Triggers>

      <EventTrigger RoutedEvent="Rectangle.Loaded">

        <BeginStoryboard>

          <Storyboard>

            <DoubleAnimationUsingKeyFrames

              Storyboard.TargetName="MyAnimatedTranslateTransform"

              Storyboard.TargetProperty="X"

              Duration="0:0:10">

                <LinearDoubleKeyFrame Value="500" KeyTime="0:0:2" />

                <DiscreteDoubleKeyFrame Value="400" KeyTime="0:0:4" />

                <SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.0" Value="0" KeyTime="0:0:6" />

            </DoubleAnimationUsingKeyFrames>

          </Storyboard>

        </BeginStoryboard>

      </EventTrigger>

    </Rectangle.Triggers>

  </Rectangle>

</Canvas>

 

다음에는 애니메이션의 마지막으로 자바스크립트와 연동을 시켜서 애니메이션을 만들어 보자.

 

참고도서 : Essential SilverLight (O'REILLY), SilverLight 1.0 - Development with JavaScript.chm