Animation 탐색紀 (2편)

이번에는 Animation Type에 대해서 알아보자. 이전에 설명했던 DoubleAnimation이외에 두가지가 더 있다고 했었는데 ColorAnimation과 PointAnimation이었다.

 

우선 ColorAnimation부터 알아보자. ColorAnimation은 단어에서도 느낄 수가 있는데 Color에 대해서만 적용이 된다. 즉, Stroke와 같은 속성에는 적용을 할 수가 없다. 반면에 Color와 같은 유사한 느낌이 나는 속성에도 적용이 가능한데 가령 SolidColorBrush와 같은 속성에도 애니메이션을 적용하는 것이 가능하다.

 

변환을 위해서 From과 To, From과 By를 사용하는 것도 일치한다. 나머지 부분들도 이전에 적었던 내용과 유사하기 때문에 따로 설명하지 않겠다. 대신 Color를 이용하기 때문에 ARGB에 대한 약간의 이해가 필요하다. ColorAnimation은 내부적으로 ARGB의 값들을 변화시켜 애니메이션 효과를 내기 때문에 Red나 Black과 같은 문자로 적더라도 내부적으로는 ARGB의 각각의 값들이 조금씩 변화되는 형태를 취한다. 각각의 값은 0~255까지 값을 가지며 16진수로 표현한다. 즉, 0~FF까지 표현이 가능하다. 참고로 0은 검정, FF는 흰색을 나타낸다. 아래의 예에서는 ARGB와 문자 둘다로 표현을 해 보았다.

 

<Canvas

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

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

        <Rectangle Width="300" Height="150" StrokeThickness="15" x:Name="MyRectangle">

               <Rectangle.Triggers>

                       <EventTrigger RoutedEvent="Rectangle.Loaded">

                              <BeginStoryboard>

                                      <Storyboard>

                                             <ColorAnimation

                                             From="#FFFF0000" To="Black " Duration="0:0:5"

                                             Storyboard.TargetName="MyBrush"

                                             Storyboard.TargetProperty="Color" />

                                      </Storyboard>

                              </BeginStoryboard>

                       </EventTrigger>

               </Rectangle.Triggers>

              

               <Rectangle.Stroke>

                       <SolidColorBrush x:Name="MyBrush" />

               </Rectangle.Stroke>

        </Rectangle>

       

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

        Foreground="Black" Text="Silverlight" />

</Canvas>

 

다음으로 PointAnimation에 대해서 알아보자. PointAnimation도 위의 두가지마 마찬가지로 From과 To, From과 By로 애니메이션을 작성한다. 하지만 From과 To(By)에 입력되는 값들이 위의 두가지와는 약간의 차이를 보인다. PointAnimation의 경우는 컴마(,)로 구분된 두 개의 값을 하나로 해서 각각 From과 To(By)에 할당한다. 아래의 예를 보자.

 

<Canvas

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

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

  Width="400" Height="300">

        <Path Fill="Blue">

               <Path.Data>

 

                       <!-- Describes an ellipse. -->

                       <EllipseGeometry x:Name="MyAnimatedEllipseGeometry"

                        Center="200,100" RadiusX="15" RadiusY="15" />

               </Path.Data>

 

               <Path.Triggers>

                       <EventTrigger RoutedEvent="Path.Loaded">

                              <BeginStoryboard>

                                      <Storyboard>

 

                                             <!-- Animate the center point of the ellipse from 100 X, 300 Y

                 to 400 X, 100 Y over 5 seconds. -->

                                             <PointAnimation

                                               Storyboard.TargetProperty="Center"

                                               Storyboard.TargetName="MyAnimatedEllipseGeometry"

                                               Duration="0:0:1"

                                               From="100,300"

                                               To="400,100"

                                               RepeatBehavior="Forever" />

 

                                      </Storyboard>

                              </BeginStoryboard>

                       </EventTrigger>

               </Path.Triggers>

        </Path>

</Canvas>

 

위의 From과 To를 보면 From=”100,300”에서 To=”400,100”으로 값을 입력한다. 이런 형태로 입력을 할 경우에는 반드시 PointAnimation을 사용해야 한다. 의심이 가면 위의 PointAnimation을 DoubleAnimation으로 변경해서 실행해 보자. 에러가 발생할 것이다. 용도는 주로 도형 객체의 중심점 이동시에 사용한다.

 

 

 

다른 샘플을 통해서 좀 더 사용되는 범위를 확장시켜 보자. 다른 샘플에서 지금까지 보지 못했던 하나의 태그가 있는데 바로 <LinearGradientBrush>이다. 이것은 색상을 Gradient형태로 만들어 준다. 간단한 샘플을 하나 보자.

 

<Canvas

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

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

        <Rectangle Width="200" Height="100" Canvas.Top="200">

               <Rectangle.Fill>

                       <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">

                              <GradientStop Color="Yellow" Offset="0.0" />

                              <GradientStop Color="Red" Offset="0.25" />

                              <GradientStop Color="Blue" Offset="0.75" />

                              <GradientStop Color="LimeGreen" Offset="1.0" />

                       </LinearGradientBrush>

               </Rectangle.Fill>

        </Rectangle>

</Canvas>

 

 

위의 샘플을 실행시키면 위의 그림과 같은 결과를 만들어 낸다. StartPoint와 EndPoint를 자세히 보자. 값을 컴마(,)로 구분해서 입력하고 있다. 즉, 두 개의 값을 하나의 속성에 담고 있다. 그래서 <LinearGradientBrush>도 PointAnimation을 사용하는 것이 가능하다. 그럼 각각의 속성에 대해서 간단히 알아보자.

 

StartPoint와 EndPoint에 들어가는 값에 대해서 아래의 그림으로 자세히 설명하고 있다.

 

 

StartPoint = “0,0”, EndPoint = “1,1”을 입력하면 대각선으로, StartPoint = “0,0”, EndPoint = “1,0”을 입력하면 왼쪽에서 오른쪽으로 Gradient를, 그럼 위에서 아래로 Gradient를 하려면? ^^;

<GradientStop>에 대한 것도 아래의 그림을 참조하자.

 

 

 

위의 그림은 실버라이트 도움말을 참조해서 가져왔다.(MS 미안합니다.)

 

<LinearGradientBrush>에 대해서 알아보았으니 우리가 최종적으로 보려던 소스는 아래와 같다. 조금만 더 변형시키면 Stroke의 색들이 끊어지지 않고 회전하는 형태를 만들수도 있다. 함 만들어 보길 바란다. 조금만 응용을 하면 간단하게 될 것이다.

 

<Canvas

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

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

        <Rectangle Width="300" Height="150" StrokeThickness="15" x:Name="MyRectangle">

               <Rectangle.Triggers>

                       <EventTrigger RoutedEvent="Rectangle.Loaded">

                               <BeginStoryboard>

                                      <Storyboard RepeatBehavior="forever">

                                             <PointAnimation

                                             From="0,0" To="1,0" Duration="0:0:4"

                                             Storyboard.TargetName="MyGradient"

                                             Storyboard.TargetProperty="StartPoint" />

                                             <PointAnimation

                                             From="1,1" To="0,1" Duration="0:0:4"

                                             Storyboard.TargetName="MyGradient"

                                             Storyboard.TargetProperty="EndPoint" />

                                      </Storyboard>

                              </BeginStoryboard>

                       </EventTrigger>

               </Rectangle.Triggers>

               <Rectangle.Stroke>

                       <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" x:Name="MyGradient">

                              <GradientStop Color="Red" Offset="0.0" />

                              <GradientStop Color="Green" Offset="0.5" />

                              <GradientStop Color="Blue" Offset="1.0" />

                       </LinearGradientBrush>

               </Rectangle.Stroke>

        </Rectangle>

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

        Foreground="Black" Text="Silverlight" />

</Canvas>     

 

지금까지 3가지의 Animation타입에 대해서 알아보았다. DoubleAnimation, ColorAnimaion, PointAnimation.

다음에는 조금더 복잡한 Key Frame Animation(키 프레임 애니메이션)에 대해서 알아볼 것이다.

 

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