Storyboard (Animation in Silverlight)

Storyboard : System.Windows.Media.Animation.Timeline 의 파생 클래스.
Timeline을 사용하여, Animation을 제어.

Animation 만들기
Animation : 조금씩 변하는 여러개의 이미지를 빠르게 순환시켜 만드는 일종의 착시 효과.
Silverlight에서는 값이 Double, Color, Point 형식인 속성에만 Animation을 적용할 수 있다.
다른 형식의 속성에 Animation을 적용할 수도 있지만, 이 작업은 불연속 보간을 사용하여 수행 되므로 진정한 의미의 Animation으로 간주되지 않는다(ObjectAnimationUsingKeyFrames 사용) ?

Animation을 만들기 위해선 적용 될 UIElement의 Property의 Type에 따라 다음과 같은 작업을 수행합니다.
1. Property의 Type에 맞는 Animation 객체 생성
 (예를 들어, Opacity(double 값) 의 속성에 적용하려면, DoubleAnimation 생성)
2. Storyboard 생성
3. 상황에 맞게 이벤트에 대한 응답으로 Storyboard 시작.

- Rectangle의 Opacity를 변경하는 Animation

<Canvas>
        <Canvas.Resources>
            <Storyboard x:Name="myStoryboard" AutoReverse="False">
                <DoubleAnimation From="1.0" To="0.0"
                             RepeatBehavior="Forever"
                             Storyboard.TargetName="myRectangle"
                             Storyboard.TargetProperty="Opacity"/>
            </Storyboard>
        </Canvas.Resources>
        <Rectangle x:Name="myRectangle" Fill="Blue"
                   Loaded="Start_Animation"
                   Width="50" Height="50"></Rectangle>
    </Canvas>

private void Start_Animation(object sender, RoutedEventArgs e)
{
            this.myStoryboard.Begin();
}

Rectangle이 Load 되면, Storyboard가 Begin되고, myRectangle의 Opacity가 1에서 0으로 변경된다.
이 때, Storyboard의 Attached-Property인 TargetName과 TargetProperty를 myRectangle, Opacity로 지정 해야 하는 것을 알 수 있다.

System.Windows.Media.Animation.Timeline : Time segment (시간 간격)를 정의. segment의 길이, 시작 시점, 반복 횟수, 해당 segment에서의 진행 속도 등을 지정.
Timeline Properties
AutoReverse : Timeline이 정방향으로 반복을 완료한 뒤 역방향으로 재생되는지의 여부를 설정. True인 경우 반복이 끝날 때 마다 역방향으로 재생.

Duration :  Timeline이 재생되는 시간을 설정.

<DoubleAnimation Storyboard.TargetName="myRectangle"
              Storyboard.TargetProperty="Width" From="100" To="300" Duration="0:0:1">

myRectangle의 Width 값이 1초 동안 100에서 300까지 증가.

BeginTime :  Timeline을 시작할 시간 설정.
순서대로 재생되는 Timeline을 만들 때 유용. Storyboard를 공유하는 연속 Timeline에서 BeginTime을 설정하여 재생 시간의 격차를 둘 수 있다.

<Storyboard BeginTime="0:0:2" x:Name="myStoryboard">
            <DoubleAnimation
              Storyboard.TargetName="myRectangle"
              Storyboard.TargetProperty="Width"
              To="300" Duration="0:0:1" />

            <DoubleAnimation BeginTime="0:0:3"
              Storyboard.TargetName="myRectangle"
              Storyboard.TargetProperty="Opacity"
              To="0" Duration="0:0:1" />
</Storyboard>

위 코드에서 Storyboard는 Begin() 실행 뒤 2초 후에 시작되고, myRectangle의 Width가 300까지 늘어 난 뒤(Duration 동안), 3초 후에 Opacity가 0으로 변경(Duration 동안) 되 불투명 해 진다.

FillBehavior : Animation 동작이 완료 된 후 동작하는 방식을 설정. (HoldEnd(Default), Stop)

<Storyboard ... FillBehavior="HoldEnd">
<Storyboard ... FillBehavior="Stop">

위 코드의 Storyboard 에서 FillBehavior property 값을 Stop으로 한 경우, Animation이 끝나면 myRectangle의 Width=300, Opacity=100이 되고, FillBehavior property 값을 HoldEnd(Default)로 한 경우엔 Width=100, Opacity가 1로 돌아오게 된다.

RepeatBehavior : Timeline의 반복 동작을 설정.

<Storyboard BeginTime="0:0:2" x:Name="myStoryboard" RepeatBehavior="0:0:2">
            <DoubleAnimation
              Storyboard.TargetName="myRectangle"
              Storyboard.TargetProperty="Width"
              To="300" Duration="0:0:1" />

Duration이 1초, RepeatBehavior가 2초이기 때문에, Animation이 두번 반복 실행 된다.
RepeatBehavior = "Forever" 로 설정하면, 무한 반복하게 된다.

SpeedRatio : Timeline 부모의 속도에 상대적인 진행 속도를 설정.

<Storyboard BeginTime="0:0:2" x:Name="myStoryboard" SpeedRatio="2">
            <DoubleAnimation
              Storyboard.TargetName="myRectangle"
              Storyboard.TargetProperty="Width"
              To="300" Duration="0:0:1" SpeedRatio="0.5"/>

Storyboard의 SpeedRatio는 2이고, DoubleAnimation의 SpeedRatio는 0.5로 설정 되 있는 경우 1배속으로 진행이 된다.