한 걸음 한 걸음 애니메이션을 배우다[1]: Silverlight에서Animation의 응용

1. Animation 소개
애니메이션은 다음 이미지와 약간 다른 일련의 이미지를 빠르게 재생하는 환각이다.대뇌는 이 그림이 변화하는 장면이라고 느낀다.영화에서 카메라가 매초 많은 사진(프레임)을 촬영하면 이런 환각을 형성할 수 있다.프로젝터로 이 프레임들을 재생할 때 관중들은 영화를 볼 수 있다.Silverlight에서는 객체의 개별 속성에 애니메이션을 적용하여 객체를 애니메이션 처리할 수 있습니다.예를 들어, UIElement을 확대하려면 Width 및 Height 속성에 애니메이션을 적용해야 합니다.UIElement을 시야에서 사라지게 하려면 Opacity 속성을 애니메이션으로 처리할 수 있습니다.Silverlight의 여러 객체에 대한 속성을 애니메이션으로 처리할 수 있습니다.
설명: Silverlight에서는 값 유형이 Double, Color 또는 Point인 속성에 대해서만 간단한 애니메이션 작업을 수행할 수 있습니다.또한 ObjectAnimationUsingKeyFrames를 사용하여 다른 유형의 속성을 애니메이션 처리할 수 있지만, 이것은 하나의 값에서 다른 값으로 이동하는 이산 내삽을 사용해야 하며, 대부분의 사람들은 이것이 진정한 애니메이션이 아니라고 생각한다.
2. Animation 예: 페이지 내 오브젝트 페이드 효과
이 예제에서는 Double Animation(Double 값을 생성하는 애니메이션 유형)을 사용하여 Rectangle의 Opacity 속성을 애니메이션 처리합니다.따라서 Rectangle은 점차 시야에 들어와 시야에서 사라진다.
[1] Rectangle 요소를 만듭니다.

<StackPanel>

<Rectangle MouseLeftButtonDown="Mouse_Clicked"

x:Name="MyAnimatedRectangle"

Width="100" Height="100" Fill="Blue" />

</StackPanel>

【2】 DoubleAnimation을 만듭니다.
Opacity 속성의 유형이 Double이므로 Double 값을 생성하는 애니메이션이 필요합니다.Double Animation은 바로 이런 애니메이션이다.두 Double 값 사이의 변환을 만들 수 있습니다.DoubleAnimation의 시작 값을 지정하려면 해당 From 속성을 설정합니다.종료 값을 지정하려면 To 속성을 설정합니다.

<DoubleAnimation From="1.0" To="0.0" Duration="0:0:1"

AutoReverse="True" RepeatBehavior="Forever"/>

여기서 Duration은 시작 값에서 대상 값으로 변환하는 데 필요한 시간을 나타냅니다.AutoReverse는 애니메이션이 반복된다는 것을 설명하고 RepeatBehavior는 애니메이션이 기한 없이 반복된다는 것을 가리킨다.
【3】 Storyboard 객체 만들기:

<Storyboard>

<DoubleAnimation From="1.0" To="0.0" Duration="0:0:1"

AutoReverse="True" RepeatBehavior="Forever" />

</Storyboard>

위 코드는 Storyboard를 만들고 애니메이션을 안에 넣었습니다.그런 다음 TargetName 추가 속성을 사용하여 애니메이션을 처리할 객체를 지정합니다.다음 코드에서 DoubleAnimation의 대상 이름 myAnimatedRectangle을 지정합니다. 이것은 애니메이션 처리를 할 대상의 이름입니다.

<Storyboard>

<DoubleAnimation

Storyboard.TargetName="MyAnimatedRectangle"

From="1.0" To="0.0" Duration="0:0:1"

AutoReverse="True" RepeatBehavior="Forever" />

</Storyboard>

마지막으로 TargetProperty 추가 속성을 사용하여 애니메이션을 처리할 속성을 지정합니다.다음 코드에서 애니메이션은 Rectangle용 Opacity 속성으로 구성됩니다.

<Storyboard>

<DoubleAnimation

Storyboard.TargetName="MyAnimatedRectangle"

Storyboard.TargetProperty="Opacity"

From="1.0" To="0.0" Duration="0:0:1"

AutoReverse="True" RepeatBehavior="Forever" />

</Storyboard>

【4】 Storyboard를 이벤트와 연결
다음에 애니메이션을 언제 시작할지 지정해야 합니다.이벤트를 사용하여 이 작업을 수행할 수 있습니다.
1. 프레젠테이션 도판을 하나의 자원으로 삼는다.Storyboard를 자원 블록에 넣으면 이 Storyboard를 코드에서 쉽게 인용하여 시작, 정지, 정지, 계속 등의 작업을 수행할 수 있습니다.다음 표시는 StackPanel 객체 리소스 블록에 선언된 Storyboard를 표시합니다.애니메이션 처리를 원하는 객체와 동일한 역할 영역에 있는 한 Storyboard를 임의의 리소스 블록에 선언할 수 있습니다.다음 코드와 같이 하십시오.

<StackPanel>

<StackPanel.Resources>

<!-- Animates the rectangle's opacity. -->

<Storyboard x:Name="myStoryboard">

<DoubleAnimation

Storyboard.TargetName="MyAnimatedRectangle"

Storyboard.TargetProperty="Opacity"

From="1.0" To="0.0" Duration="0:0:1"

AutoReverse="True" RepeatBehavior="Forever" />

</Storyboard>

</StackPanel.Resources>

<Rectangle

x:Name="MyAnimatedRectangle"

Width="100" Height="100" Fill="Blue" />

</StackPanel>

2. 이벤트를 요소에 첨부합니다.사용자가 대상을 눌렀을 때 발생하는 MouseLeftButtonDown, 대상을 처음 불러올 때 발생하는 Loaded 이벤트와 같은 다양한 이벤트를 사용하여 애니메이션을 시작할 수 있습니다.이벤트에 대한 자세한 내용은 Silverlight의 이벤트 개요를 참조하십시오.이 예에서 MouseLeftButtonDown 이벤트는 Rectangle에 추가되어 사용자가 직사각형을 눌렀을 때 이 이벤트를 일으킬 수 있습니다.

<Rectangle MouseLeftButtonDown="Mouse_Clicked"

x:Name="MyAnimatedRectangle"

Width="100" Height="100" Fill="Blue" />

3. 이벤트 프로세서에서 애니메이션을 제어한다.Storyboard는 Storyboard 애니메이션의 재생을 제어할 수 있는 여러 가지 방법을 제공합니다. Begin, Stop, Pause, Resume를 포함합니다.이 예에서는 사각형을 클릭하고 MouseLeftButtonDown 이벤트를 일으킬 때 애니메이션을 시작하는 Begin 방법을 사용합니다.

// When the user clicks the Rectangle, the animation begins.

private void Mouse_Clicked(object sender, MouseEventArgs e)

{

myStoryboard.Begin();

}

【5】 마지막으로 전체 실행 코드:

  <UserControl x:Class="animation_ovw_intro.Page"

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

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

Width="400" Height="300">

<StackPanel>

<StackPanel.Resources>

<!-- Animates the rectangle's opacity. -->

<Storyboard x:Name="myStoryboard">

<DoubleAnimation

Storyboard.TargetName="MyAnimatedRectangle"

Storyboard.TargetProperty="Opacity"

From="1.0" To="0.0" Duration="0:0:1"

AutoReverse="True"

RepeatBehavior="Forever" />

</Storyboard>

</StackPanel.Resources>

<TextBlock Margin="10">Click on the rectangle to start the animation.</TextBlock>

<Rectangle MouseLeftButtonDown="Mouse_Clicked"

x:Name="MyAnimatedRectangle"

Width="100" Height="100" Fill="Blue" />

</StackPanel>

</UserControl>

// 

private void Mouse_Clicked(object sender, MouseEventArgs e)

{

myStoryboard.Begin();

}

참조 자료: MSDN