Silverlight3 - Animation Easing 1부(Animation Easing의 구조와 이론)

Silverlight 2009. 7. 22. 11:32

안녕하세요. 승미입니다.

이번 글에서는 Silverlight 3에서 애니메이션 파트에 새롭게 추가된 Animation Easing에 대해서 알아보겠습니다.
Animation Easing은 총 3부로 되어 있습니다.

1부 - 이론 ( Animation Easing의 구조와 이론 )
2부 - Blend에서 사용하기 ( Animation Easing을 Blend에서 사용하기 )
3부 - 커스텀 Animation Easing 제작

Animation Easing이란?
Animation Easing은 기존의 단순한 From/To 애니메이션에 수학적인 연산을 추가해 새로운 애니메이션 효과를 만드는 것을 의미합니다. 예를 들어 기존의 애니메이션에 Bounce Easing를 적용하면 마치 물리적 현상에 의해 공이 튀는 듯한 스프링 효과를 느낄 수 있습니다.
Silverlight 3에서는 기본적으로 총 11개의 Animation Easing이 제공되며, 각 Animation Easing의 자세한 설명은 마지막에 하도록 하겠습니다.

Animation Easing 데모
먼저 설명에 앞서 Bounce Easing을 적용한 예제를 살펴 보겠습니다.

위 데모는 원의 Y좌표를 증가시켜 원을 이동시키는 애니메이션에 Bounce Easing을 적용시켜 마치 공이 땅에서 튕기는 듯한 느낌을 줍니다. 이 글에서는 위의 데모를 어떻게 제작하는지 설명하도록 하겠습니다.

Animation Easing의 클래스 구조

Animation Easing의 기본 클래스 구조는 위와 같습니다. 먼저 Animation Easing의 형태를 띄기 위해서는 IEasingFunction 인터페이스를 구현하거나 IEasingFunction을 어느정도 구현해 놓은 EasingFunctionBase 추상 클래스를 상속받아 구현하면 됩니다.
MS에서는 가장 최하위에 BackEase, BounceEase, CircleEase, CubicEase 클래스들을 EasingFunctionBase를 상속 받아 구현한 것을 확인할 수 있습니다.
이와 비슷하게 커스텀 Animation Easing을 작성할때 EasingFunctionBase 클래스를 상속받아 구현하시면 됩니다. 이 부분은 Animation Easing 3부(커스텀 Animation Easing 작성하기)에서 자세히 다루는 부분이니 가볍게 읽고 넘어가시면 됩니다.

Animation Easing 사용하기
Animation Easing을 알아보기 위해 먼저 다음과 같이 간단한 원을 그리고 원이 밑으로 떨어지는 애니메이션을 제작하겠습니다.

XAML 코드는 다음과 같습니다.

            <Ellipse.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Ellipse.RenderTransform>

            <Ellipse.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FF0100FF" Offset="0"/>
                    <GradientStop Color="#FF908FFF" Offset="1"/>
                </LinearGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
    </Canvas>
</UserControl>

위 예제는 기존에 Silverlight 2에서 사용하던 애니메이션으로 5초동안 원을 밑으로 이동시키는 역할을 합니다.
이제 여기에 Bounce Easing을 적용해보도록 하겠습니다. 결과는 다음과 같습니다.

XAML 코드는 다음과 같습니다.

                <DoubleAnimation.EasingFunction>
                    <BounceEase EasingMode="EaseOut" Bounces="6"/>
                </DoubleAnimation.EasingFunction>

            </DoubleAnimation>
        </Storyboard>
    </UserControl.Resources>

위 예제에 <BounceEase/> 엘리먼트를 추가해 BounceEase 효과를 주었습니다. 그리고 Bounces를 6으로 설정함으로써 총 6번 튕기는 효과를 주었습니다. 그리고 EasingMode에 "EaseOut"을 주었습니다.
여기서 Bounces는 BounceEase의 특수한 프로퍼티이며 이처럼 각 Animation Easing은 자신만의 고유한 프로퍼티 값을 가지고 있습니다. 그리고 EasingMode는 모든 Animation Easing에 공통된 프로퍼티로 자세한 설명은 다음과 같습니다.

EasingMode는 총 3가지 값을 가질 수 있으며 다음과 같은 특성을 가집니다.
  - EaseIn      : Easing Function에서 구현한 수학 연산을 그대로 수행합니다.
  - EaseOut    : Easing Function에서 구현한 수학 연산을 반대로 수행합니다.
  - EaseInOut : Easing Function에서 구현한 수학 연산을 반절은 그대로 나머지 반절은 반대로 수행합니다.

다음 데모는 EasingMode에 따라 애니메이션이 어떻게 작동하는지 보여줍니다.

EaseIn

EaseOut

EaseInOut

다른 Animation Easing 사용하기
여기서는 BounceEase 효과가 아닌 ElasticEase 효과를 적용해 보겠습니다.

XAML 코드는 다음과 같습니다.

단순히 BounceEase를 ElasticEase로 변경함으로써 전혀 다른 효과가 나타나는 것을 확인할 수 있습니다. 이런 방법으로 여러가지 Animation Easing을 적용하실 수 있습니다.

기본적으로 제공되는 Animation Easing
앞서 설명한 것처럼 Silverlight 3에서는 총 11가지의 Animation Easing을 기본적으로 제공합니다. 이 부분은 MSDN에서 제공된 자료를 토대로 작성했습니다. 각 Animation Easing은 다음 그래프와 같이 애니메이션을 변경합니다.
Animation Easing 이름을 클릭하시면 MSDN 페이지로 연결되며 자세한 내용을 보실 수 있습니다.

BackEase

BackEase EasingMode graphs.