[세티의 실버라이트] 9. 애니메이션(animations) Silverlight2008/06/11 07:30
원글출처: http://silverlight.net/quickstarts/silverlight10/animations.aspx
본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.
(animation)
실버라이트는 애니메이션을 정의하기 위해 마크업을 사용할 수 있습니다. 이번 강좌에서는 실버라이트 애니메이션 애니메이션 생성 과정을 통해 실버라이트의 특징을 살펴볼까 합니다.
먼저 실버라이트 애니메이션을 위한 간단한 샘플이 필요합니다. Ellipse 를 이용하여 간단한 샘플을 만들어 보겠습니다.
위의 코드를 주의깊게 보셔야 합니다. 어느 부분을 주의깊게 보셔야 하냐면 Ellipse의 이름 부분 입니다.
x:Name = "ellipse"
ellipse를 애니메이션화 할 때 이름이 필요합니다. XAML로 정의된 애니메이션이 저 이름을 타겟으로 하기 때문입니다. 이제 우리는 애니메이션을 시작하기 위해 EventTrigger를 생성해야 합니다.
먼저 코드를 가져다 놓고 설명해 보겠습니다.
위의 코드를 한줄 한줄 번역해 보겠습니다.
먼저 <Canvas.Triggers> 가 보입니다.
Triggers의 단어 의미가 '방아쇠' 라고 나오죠? 트리거라는 의미가 '무언가가 무언가를 하기 위해 시작했다.' 라는 의미로 받아들이시면 편합니다.ㅡㅡ; 음 좀 더 쉽게 말해서 총알이 나갈려면 무언가가 총알을 때려야 하지 않습니까? ^^; 그리고 그 무언가로 총알을 때릴려면 우리는 방아쇠를 당겨야 하구요.~ 우리가 총알을 날리기 위해 총의 방아쇠를 당겨야 하듯이 말입니다. 그런 의미에서 Canvas가 무언가를 하기 위해 방아쇠 당길 준비를 하고 있다고 생각합시다.
그 다음으로 <EventTrigger RoutedEvent="Canvas.Loaded">라는 코드가 보입니다.
자~ 총의 방아쇠를 당겨야 하는데 언제 당길까요? 무언가가 가서 총알을 쳐야 겠지요? 그럼 언제 총알을 쳐야할까요? 바로 Canvas가 로드 될 때 입니다.^^*
자 다음 코드는 뭘까요?
오호 <EventTrigger.Action>이라고 되어 있네요? 자아 이 부분은 방아쇠가 당겨졌을 때 총알이 날라가듯 그런 총알과 같은 Action을 기록하는 부분 입니다.
총알의 화약이 폭발하고, 화약의 반발력에 의해 총알이 어디론가 튀어나가고... 가다가 어디 부딪히거나 중력에 의해 땅으로 떨어지거나 하겠죠?? ㅎㅎ 이런 일련의 스토리를 Action은 가지고 있습니다.
그 부분은 어디에 기록하냐구요? 바로 <BeginStoryboard></BeginStoryboard> 입니다.
와~ 얼마나 직관적 입니까? 스토리시작~~!! ㅎㅎ
아무튼 이러한 Storyboard는 하나 이상의 애니메이션을 컨트롤하거나 정의하는데 사용됩니다.
자아~ 애니메이션을 하나 만들어 봅시다.
우리는 간단한 실습을 위해서 DoubleAnimation 엘리먼트를 사용하려고 합니다. DoubleAnimation Class는 두 대상값을 지정하면 그 사이에서 값을 전환하면서 애니메이션을 생성하게 됩니다.
위의 코드도 천천히 해석해 보도록 하겠습니다.
위에 언급한대로 두 점 사이에서 애니메이션이 발생하도록 <DoubleAnimation> 엘리먼트를 <Storyboard> 안에 넣습니다. 그리고 이 Storyboard의 주인공이 될 엘리먼트를 지정합니다. 여기서는 ellipse가 되겠네요.
그래서 stroryboard.TargetName = "ellipse" 라고 합니다.
DoubleAnimation이 두 점 사이의 값을 이용한 애니메이션 발생에 필요한 엘리먼트 이기 때문에 나머지 한 점의 값을 설정합니다. 이미 Ellipse에는 한점(Canvas.Left = "30") 이라는 값이 설정되어 있으므로 <DoubleAnimation>의 Storyboard.TargetProperty 속성값으로 "(Canvas.Left)"를 설정하고 To="300" 을 설정해서 30px 에서 300px 까지 왼쪽에서 오른쪽으로 움직이도록 설정합니다.
그리고 마지막으로 Duration = "0:0:1" 을 설정하게 되는데 이것은 애니메이션되는 Ellipse의 애니메이션 시간을 의미합니다. (약 1초 일 겁니다.^^;)
그럼 이어서 애니메이션의 또 다른 타입에 대해 알아보겠습니다.
실버라이트는 앞에 언급한 DoubleAnimation 처럼 ColorAnimation과 PointAnimation 이라는 것도 지원합니다.
오호~ 두 가지 애니메이션이 뭘 하는 건지 대충 감이 오죠? ^^
바로 색상과 포인트를 지원하는 애니메이션 입니다.
역시 또 코드를 보면서 이해의 폭을 넓혀 가보도록 하겠습니다.
앞의 코드에서 방아쇠 언급하면서 상세하게 코드를 설명했으니 이번엔 대충 보셔도 아하~ 하면서 눈치챌 수 있을 겁니다. 2개의 ColorAnimation 엘리먼트는 역시나 각각의 Ellipse 엘리먼트를 가리키고 있네요.
<ColorAnimation
Storyboard.TargetName="e1_brush"
Storyboard.TargetProperty="Color"
From="Red" To="Blue" Duration="0:0:5" />
해석해 보면 ColorAnimatin 엘리먼트가 가리키는 객체의 이름은 "e1_brush" 이고, 이 ColorAnimation이 가리키는 속성은 Color이며, Red에서 Blue로 5초 동안 변화시켜라.
그럼 이 객체가 가리키는 엘리먼트는 무엇일까요?
<Ellipse.Fill>
<SolidColorBrush x:Name="e1_brush" Color="black"/>
</Ellipse.Fill>
바로 이 코드 입니다. Ellipse.Fill or Ellipse.Shape를 써서 그리고자 하는 형태를 지정하면 될 것이구요~
이 Ellipse의 기본 컬러가 black으로 지정되어 있습니다. 이 코드가 Ellipse 객체에 색상을 채워주는 역할을 합니다. 아마 이 예제를 실행하면 저 black은 너무 순간적이라 체크하기 어려울 것입니다. 저 부분을 green으로 변경하고 Duration 을 1분으로 설정해 보시면 시작할 때 설정된 green과 ColorAnimation에 설정한 From = "red" 에 의해 첫 시작시 색상이 다홍색 으로 보이는 것을 확인할 수 있습니다.
자 두번째 ColorAnimation의 동작은 위와 동일하지만 코드가 약간 다르네요.
<ColorAnimation
Storyboard.TargetName="e2"
Storyboard.TargetProperty="(Fill).(Color)"
From="Red" To="Blue" Duration="0:0:5" />
타겟속성이 아예 Fill의 Color라고 직접적으로 명시되어 있군요.
그럼 Ellipse 엘리먼트는 어떻게 되어 있을까요?
<Ellipse x:Name="e2" Fill="Black"
Height="100" Width="100" Canvas.Left="30" Canvas.Top="130"/>
보시는 것처럼 Ellipse 엘리먼트에 Fill 속성이 있고, 색상이 직접 할당되어 있는 것을 확인할 수 있습니다.
결국 동작은 2가지 타입 동일합니다.
아래는 색상이 변화하는 과정을 이미지로 캡쳐해 본 것 입니다.
음~ 역시 신기합니다.^^
이렇게 우리는 적당한 시간을 주고 객체의 변화를 실감나게 지켜볼 수 있는데요~ 앞에 언급한 Storyboard와 DoubleAnimation 객체는 Timeline 객체 타입 입니다.
아래는 Timeline이 가지는 유용한 속성입니다.
Storyboard.TargetName : 애니메이팅 하기 위한 객체의 이름
Storyboard.TargetProperty : 애니메이팅하기 위한 속성
BeginTime: 이 속성에 단지 "2"라는 숫자만 넣으면 이틀 뒤에 움직입니다. ㅡㅡ; 그래서 하나의 문법을 따라야 하는데 hours:minutes:seconds 라는 룰을 따라야 하고 다음과 같이 표시할 수 있습니다.
"0:0:2"
이렇게 설정하면 2초 뒤에 애니메이션이 시작합니다.
Duration : timeline의 길이를 의미합니다. 즉 애니메이션이 설정된 시간만큼 움직인다는 뜻이죠.
아래의 코드를 복사하여 예제로 만든 xaml 코드에 붙여넣고 직접 실행하고 결과를 확인해 보시기 바랍니다.
그리고 값을 변경해가면서 어떻게 애니메이션이 움직이는지 결과를 눈으로 직접 확인해 보시면 코드를 이해하는데 많은 도움이 될 것 입니다.
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard
Storyboard.TargetName="e1"
Storyboard.TargetProperty="(Canvas.Left)"
BeginTime="0:0:5">
<DoubleAnimation To="300" />
<DoubleAnimation To="300" Storyboard.TargetName="e2"/>
<DoubleAnimation To="80" Storyboard.TargetName="e3" Storyboard.TargetProperty="Width"/>
<DoubleAnimation From="200" To="300" Storyboard.TargetName="e4"/>
<DoubleAnimation To="300" Duration="0:0:5.3" Storyboard.TargetName="e5"/>
<DoubleAnimation FillBehavior="HoldEnd" To="200" Storyboard.TargetName="e6"/>
<DoubleAnimation FillBehavior="Stop" To="200" Storyboard.TargetName="e7"/>
<DoubleAnimation RepeatBehavior="Forever" To="300" Storyboard.TargetName="e8"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Canvas.Triggers>
<Ellipse x:Name="e1" Fill="Black"
Height="20" Width="20" Canvas.Left="30" Canvas.Top="30"/>
<TextBlock Canvas.Left="0" Canvas.Top="30">e1</TextBlock>
<Ellipse x:Name="e2" Fill="Red"
Height="20" Width="20" Canvas.Left="30" Canvas.Top="50"/>
<TextBlock Canvas.Left="0" Canvas.Top="50" Foreground="Red">e2</TextBlock>
<Ellipse x:Name="e3" Fill="Purple"
Height="20" Width="20" Canvas.Left="30" Canvas.Top="70"/>
<TextBlock Canvas.Left="0" Canvas.Top="70" Foreground="Purple">e3</TextBlock>
<Ellipse x:Name="e4" Fill="Blue"
Height="20" Width="20" Canvas.Left="30" Canvas.Top="90"/>
<TextBlock Canvas.Left="0" Canvas.Top="90" Foreground="Blue">e4</TextBlock>
<Ellipse x:Name="e5" Fill="Green"
Height="20" Width="20" Canvas.Left="30" Canvas.Top="110"/>
<TextBlock Canvas.Left="0" Canvas.Top="110" Foreground="Green">e5</TextBlock>
<Ellipse x:Name="e6" Fill="Black"
Height="20" Width="20" Canvas.Left="30" Canvas.Top="130"/>
<TextBlock Canvas.Left="0" Canvas.Top="130" Foreground="Black">e6</TextBlock>
<Ellipse x:Name="e7" Fill="Orange"
Height="20" Width="20" Canvas.Left="30" Canvas.Top="150"/>
<TextBlock Canvas.Left="0" Canvas.Top="150" Foreground="Orange">e7</TextBlock>
<Ellipse x:Name="e8" Fill="Red"
Height="20" Width="20" Canvas.Left="30" Canvas.Top="170"/>
<TextBlock Canvas.Left="0" Canvas.Top="170" Foreground="Red">e8</TextBlock>
</Canvas>
이상 입니다. ^^
'Silverlight' 카테고리의 다른 글
| [세티의 실버라이트] 11. Expression Blend 2.5를 이용한 그리기(1) (0) | 2008/06/29 |
|---|---|
| [세티의 실버라이트] 10. Expression Blend 2.5 설치하기. (0) | 2008/06/25 |
| [세티의 실버라이트] 9. 애니메이션(animations) (0) | 2008/06/11 |
| [세티의 실버라이트] 8. 미디어 (2) | 2008/06/09 |
| [세티의 실버라이트] 7. 텍스트 (0) | 2008/06/04 |
| [세티의 실버라이트] 6. Images (2) | 2008/06/01 |
