Animation 탐색紀 (1편)

애니메이션 객체를 만들기 위해서는 몇 가지의 스텝과 여러 라인의 Markup으로 구성된다. 생각 이상으로 복잡한 부분이 많지만 하나씩 따라서 하면 쉽게 이해될 것이다.

 

첫 번째로 각 오브젝트의 이름을 할당하는 것이다.

 

<TextBlock FontFamily="Arial" FontSize="56" Canvas.Left="25" Canvas.Top="40"

Foreground="Black" Text="Silverlight" x:Name="MyTextBlock">

...

TextBlock>

 

위의 샘플처럼 x:Name 속성을 이용해서 오브젝트의 이름을 할당하면 나중에 자바스크립트를 통해서 참조가 가능하다.

 

두 번째로 이들 오브젝트의 내부에 Triggers>를 넣는다. Element는 각각의 필요한 오브젝트로 대체가 가능한데 예를 들면 Rectangle, TextBlock, Ellipse등등… 용어로 대충 짐작을 할 수가 있을 것인데 Triggers라는 용어를 보아하니 이벤트와 관련이 깊은 듯 하다. 그리고 실제로 이벤트를 일으키는 부분을 추가할 수 있다. 이벤트를 추가할 때는 라는 것과 이 Markup내부에 있는 RoutedEvent라는 속성을 이용한다. 그리고 RouteEvent 속성에 이벤트를 추가할 수 있는데 SilverLight 1.0까지는 object.Loaded만 지원을 한다. 여기서 object는 이 EventTrigger를 포함하고 있는 오브젝트인데 아래의 예에서는 TextBlock이 된다. 지금까지 설명한 내용을 예제로 표현하면 아래와 같다.

 

<TextBlock FontFamily="Arial" FontSize="56" Canvas.Left="25" Canvas.Top="40"

Foreground="Black" Text="Silverlight" x:Name="MyTextBlock">

           <TextBlock.Triggers>

                     <EventTrigger RoutedEvent="TextBlock.Loaded">

                                ...

                     EventTrigger>

           TextBlock.Triggers>

TextBlock>

 

세번째로는 EventTrigger 내부에 Storyboard라는 Markup을 생성해야 한다. 이 Storyboard에 대해서 반드시 두가지의 Markup을 생성해야 하는데 , 이다. 한 개의 Storyboard는 하나 혹은 그 이상의 애니메이션을 가질 수 있다. 마치 이전의 강좌에서 보았던 과 유사한 형태를 가진다.

애니메이션의 타입(Type)은 총 3가지가 있는데 ColorAnimation, DoubleAnimation, PointAnimation이 있다. 다음 번 글에서 나머지 두가지를 알아보고 여기서는 가장 일반적인 DoubleAnimation에 대해서 알아보자.

 

DoubleAnimation

일반적으로 Double이라는 단어는 개발언어에서 Premitive타입으로 소수점 이하의 수치를 활용할 때 사용되어진다. 여기서 Double이라고 붙여진 의미는 애니메이션을 표현할 때 수치로만 표현이 가능하기 때문에 붙여진 것 같다. 

 

애니메이션을 사용할 때 주로 사용하는 속성들은 아래와 같다.

AutoReverse

    애니메이션이 종료되면 되감기와 같은 역할을 한다. 처음에는 From에서 To로 값이 변환되어서 가지만 To까지 값이 변형되었을 경우에는 To부터 From으로 값이 변한다. (true/false)

Duration

    실행되는 시간. (hh:mm:ss)의 형태로 입력을 한다. 아래에 있는 RepeatBehavior에서 시간으로 지정하는 경우와 상당히 관련이 깊다. 예를 들면 Duration에서 00:00:04를 입력하면 하나의 애니메이션을 4초동안 실행을 하는 것이다. 여기에서 RepeatBehavior의 값을 (0.00:00:02)라고 입력을 하게 되면 Duration에서 지정한 속성인 4초동안 실행을 하는 것이 아니라 RepeatBehavior에서 지정한 2초밖에 실행이 되지 않는다. 그리고 Duration의 4초보다 큰 값을 입력한다고 하더라도(예를 들면, 0.00:00:10 – 10초) 실행되는 것은 4초만 실행이 된다. 즉 RepeatBehavior에 입력하는 값은 Duration보다 같거나 작은 값이 되어야 한다.

From

    애니메이션을 위한 시작 값

To

    애니메이션이 끝나는 값

By

    일반적으로 From과 To, From과 By의 형태로 사용되어 진다. By의 경우는 Duration과 밀접한 관계를 가지고 있다. 아래의 예처럼 From에 1.0을 Duration에 10초로 설정하고 By의 값을 10.0으로 하면 1초동안만 실행이 된다. 즉, From의 1.0에서 Alpha값의 최소값인 0.0까지 가는데 걸리는 시간이 Duration에서 설정한 10초가 아니라 Duration/By의 값만큼의 시간만 실행이 된다. By에 5.0으로 입력하면 몇 초동안 실행될까? 당연 2초동안만 실행된다. 참고로 By와 To를 같이 설정하면 By의 값은 무시가 된다. 아래의 예에서는 To와 By를 같이 사용했는데 이 경우 By의 값은 무시되고 10초 동안 From에서 To까지 실행되게 된다.

RepeatBehavior

    반복에 대한 속성을 지정하는 것이다. 지정하는 형식으로는 시간([days.]hh:mm:ss[.fractionalSecond])만 실행하기, 몇 번 반복할지에 대한 반복 횟수(iterationsx), 영원히 반복하기(forever)가 있다. 여기서 반복 횟수를 10번 반복하고 싶은 경우에는 10x락 입력해야 한다. 반드시 반복횟수+x의 문자열 형태를 유지해야 제대로 실행이 된다. 그리고 이 속성은 에도 적용이 가능한데 만약 에 이 값을 적용하고 에도 값을 적용했을 경우 다양한 패턴을 보여준다. 에 2x라고 입력하고 에서 2x라고 입력을 하면 총 4번이 반복된다. 즉, 에 입력된 값과 에 입력된 값을 곱해서 반복횟수를 결정한다. 그럼 에 반복횟수, 에 시간 설정 형태로 입력을 하면 에 설정된 시간 반큼 2번 반복을 하고, 반대로 입력을 하게 되면 에 입력된 시간만큼만 실행되고 반복적으로 실행이 되지 않는다. 즉 상위 레벨에 설정된 Markup이 우선 순위를 가지는 것이다.

Storyboard.TargetName

    애니메이션을 적용할 오브젝트 이름을 적는다. 때문에 위에서 이름 지정에 대해서 한 번 설명을 했었다.

Storyboard.TargetProperty

    애니메이션이 적용될 오브젝트의 속성을 적는다. 예를 들면 Rectangle의 Fill가 이에 해당한다. 혹시 속성에 [.]와 같은 문자가 포함된다면 ‘(‘, ’)’을 이용해서 묶어 준다. 예를 들면 Canvas.Left의 경우는 (Canvas.Left)와 같은 형태로 입력을 한다.

BeginTime

    시작 시간에 대한 설정이다. 아래의 예에서는 3초라는 값을 입력했는데 이벤트가 즉시 실행되고 나서 3초동안은 아무런 변화를 보이지 않다가 3초후부터 Alpah값이 증가하는 것을 볼 수 있다.

 

<Canvas

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

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Height="160" Width="160" Background="#FFFFFFFF">

        <Rectangle

          x:Name="MyAnimatedRectangle"

          Width="100"

          Height="100"

          Fill="Blue"

          MouseLeftButtonDown="startAnimation">

               <Rectangle.Triggers>

                       <EventTrigger RoutedEvent="Rectangle.Loaded">

                              <BeginStoryboard>

                                      <Storyboard x:Name="myStoryboard" RepeatBehavior="2x">

                                             <DoubleAnimation

                                               Storyboard.TargetName="MyAnimatedRectangle"

                                               Storyboard.TargetProperty="Opacity"

                                               From="0.0"

                                               To="1.0"

                                               By="10.0"

                                               Duration="0:0:10"

                                               AutoReverse="False"

                                               RepeatBehavior="0.00:00:10"

                                               BeginTime="00:00:03"

                                               />

                                      Storyboard>

                              BeginStoryboard>

                       EventTrigger>

               Rectangle.Triggers>

        Rectangle>

Canvas>

 

도움말이나 현재 내가 참고로 하고 있는 책에서는 각 속성에 대해서 자세한 예나 설명이 부족한 상황이다. 내가 영어가 쪼매 딸리거나 머리가 나빠서 바로 이해를 못하는 부분도 많은 것 같지만 각 속성에 대한 샘플이 부족한 상황이다. 때문에 생각보다 애니메이션의 각각 속성에 대해서 좀 더 자세하게 글을 적을려고 노력을 하였다. 아직 많은 애니메이션에 관련된 속성들이 남아 있다. 여력이 되는 한 각각 속성에 대해서 하나씩 예를 들어서 파헤쳐 볼 생각이다.

 

또한 샘플을 하나씩 실행시켜봐야만 정확한 이해가 가능하다. 애니메이션이란 특성 때문인지 동적인 부분에 대해서이미지로 표현하기가 힘들다. 직접 실행해 보면서 위에서 설명한 각각의 속성 값들을 하나씩 바꿔보면 아!~ 하면서 뭔가 느끼는 바가 있을 것이다. 그리고 Blend를 이용하면 원하지 않는 속성들이 추가되는데 속성에 대해서 하나씩 파헤쳐 볼 때는 가급적 VS 2008 베타를 이용하는 편이 좋다. 각 속성에 대해서 어느 정도 익숙해 지고 난 후에 Blend를 이용하면서 더 많은 속성을 알아가는 것도 좋을 것 같다. 어짜피 Blend라는 녀석은 디자이너를 위한 툴에 가깝기 때문이라는 개인적인 생각을 덧붙여 본다.

 

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