내보내기(0) 인쇄
모두 확장
이 문서는 수동으로 번역한 것입니다. 원본 텍스트를 보려면 포인터를 문서의 문장 위로 올리십시오.
번역
원본
1명 중 0명이 도움이 되는 것으로 평가 - 이 항목 평가

애니메이션 개요

Silverlight

Silverlight에서 애니메이션을 사용하면 움직임과 대화형 기능을 추가하여 그래픽 작업을 강화할 수 있습니다. 배경색에 애니메이션을 적용하거나 애니메이션 효과가 적용된 Transform을 사용하면 화면을 멋지게 전환하거나 유용한 시각적 효과를 제공할 수 있습니다.

이 항목에는 다음 단원이 포함되어 있습니다.

애니메이션은 조금씩 달라지는 이미지로 구성된 일련의 이미지를 빠르게 순환시켜 만드는 일종의 착시 효과입니다. 인간의 뇌는 이러한 이미지 그룹을 변화하는 한 장면으로 인식합니다. 필름에서는 초당 수십 장의 사진(또는 프레임)을 기록하는 카메라를 사용하여 이러한 착시 효과를 만듭니다. 영사기를 사용하여 프레임을 재생하면 관객은 움직이는 영상을 보게 됩니다. Silverlight에서는 개별 속성에 애니메이션을 적용하여 개체에 애니메이션 효과를 줍니다. 예를 들어, UIElement가 점점 확대되도록 하려면 WidthHeight 속성에 애니메이션을 적용하고, 뷰에서 UIElement가 점차 사라지도록 하려면 Opacity 속성에 애니메이션을 적용합니다. Silverlight에는 애니메이션을 적용할 수 있는 속성이 있는 개체가 많이 포함되어 있습니다.

참고 참고:

Silverlight에서는 값이 Double, Color 또는 Point 형식인 속성에만 간단한 애니메이션을 적용할 수 있습니다. 또한 ObjectAnimationUsingKeyFrames를 사용하여 다른 형식의 속성에 애니메이션을 적용할 수 있지만 이 작업은 불연속 보간(한 값에서 다른 값으로 이동)을 사용하여 수행되므로 진정한 의미의 애니메이션으로 간주되지 않습니다.

다음 단원에서는 UIElement의 한 형식인 Rectangle을 뷰에서 페이드 인하고 페이드 아웃하는 간단한 애니메이션을 만드는 방법을 보여 줍니다.

이 예제에서는 Silverlight 애니메이션을 사용하여 속성 값에 애니메이션을 적용함으로써 뷰에서 Rectangle을 페이드 인하고 페이드 아웃하는 방법을 보여 줍니다. 예제에서는 Double 값을 생성하는 애니메이션 형식인 DoubleAnimation을 사용하여 RectangleOpacity 속성에 애니메이션 효과를 적용합니다. 결과적으로 Rectangle이 뷰에서 페이드 인된 후 페이드 아웃됩니다. 연습을 통해 애니메이션의 미리 보기를 보려면 아래 링크를 클릭하여 샘플을 실행한 후 사각형을 클릭하여 애니메이션을 시작합니다.

이 샘플을 실행합니다.

예제의 첫 번째 부분에서는 Rectangle 요소를 만들어 StackPanel에 표시합니다.

<StackPanel>
  <Rectangle MouseLeftButtonDown="Mouse_Clicked"
    x:Name="MyAnimatedRectangle"
    Width="100" Height="100" Fill="Blue" />
</StackPanel>

애니메이션을 만들어 사각형의 Opacity 속성에 적용하려면 다음을 수행합니다.

이러한 단계는 다음 단원에서 자세하게 설명합니다. 전체 예제는 전체 예제 단원을 참조하십시오.

DoubleAnimation 만들기

Opacity 속성이 Double 형식이기 때문에 Double 값을 생성하는 애니메이션이 필요합니다. DoubleAnimation 은 그러한 애니메이션이며, 두 Double 값 간에 전환을 만듭니다. DoubleAnimation 의 시작 값을 지정하려면 From 속성을 설정하고, 이 애니메이션의 끝 값을 지정하려면 해당 To 속성을 설정합니다.

  1. 1.0인 불투명도 값은 개체를 완전히 불투명하게 만들고 0.0인 불투명도 값은 개체를 완전히 투명하게 만듭니다. 1.0에서 0.0으로 애니메이션이 전환되도록 하려면 From 속성을 1.0으로 설정하고 To 속성을 0.0으로 설정합니다.

    <DoubleAnimation From="1.0" To="0.0"  />
    
  2. 애니메이션의 Duration을 지정합니다. 애니메이션의 Duration 속성은 애니메이션 시작 값에서 대상 값까지 이동하는 데 걸리는 시간을 지정합니다. 다음 예제에서는 애니메이션의 기간을 1초로 설정합니다.

    <DoubleAnimation From="1.0" To="0.0" Duration="0:0:1" />
    
  3. 앞의 예제에서는 1.0에서 0.0으로 전환되는 애니메이션을 만들었습니다. 즉, 대상 요소가 완전히 불투명한 상태에서 완전히 투명한 상태로 점차 바뀌면서 사라집니다. 뷰에서 요소가 완전히 사라진 후 자동으로 다시 보이게 하려면 AutoReverse 속성을 true로 설정합니다. 애니메이션이 무한정 반복되게 하려면 RepeatBehavior 속성을 Forever로 설정합니다.

    <DoubleAnimation From="1.0" To="0.0" Duration="0:0:1" 
      AutoReverse="True" RepeatBehavior="Forever"/>
    

Storyboard 만들기

개체에 애니메이션을 적용하려면 Storyboard 개체를 만든 다음 연결된 속성인 TargetNameTargetProperty를 사용하여 애니메이션을 적용할 개체와 속성을 지정합니다.

  1. Storyboard 를 만들고 애니메이션을 자식으로 추가합니다.

    <Storyboard>
      <DoubleAnimation From="1.0" To="0.0" Duration="0:0:1" 
        AutoReverse="True" RepeatBehavior="Forever" />
    </Storyboard>
    

    이 예제의 Storyboard에는 애니메이션이 하나만 포함되어 있지만 여러 애니메이션을 추가할 수 있습니다.

  2. TargetName 연결 속성을 사용하여 애니메이션을 적용할 개체를 지정합니다. 다음 코드에서는 DoubleAnimation에 애니메이션을 적용할 개체 이름인 myAnimatedRectangle의 대상 이름을 지정합니다.

    <Storyboard>
      <DoubleAnimation
        Storyboard.TargetName="MyAnimatedRectangle"
        From="1.0" To="0.0" Duration="0:0:1" 
        AutoReverse="True" RepeatBehavior="Forever" />
    </Storyboard>
    
  3. TargetProperty 연결 속성을 사용하여 애니메이션을 적용할 속성을 지정합니다. 다음 코드에서는 RectangleOpacity 속성을 대상으로 하도록 애니메이션을 구성합니다.

    <Storyboard>
      <DoubleAnimation
        Storyboard.TargetName="MyAnimatedRectangle" 
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:1" 
        AutoReverse="True" RepeatBehavior="Forever" />
    </Storyboard>
    

Storyboard와 이벤트 연결

이제 애니메이션의 대상 개체와 애니메이션의 동작을 지정했으므로 애니메이션이 시작되는 경우를 지정해야 합니다. 이 작업은 이벤트를 사용하여 수행할 수 있습니다.

1. Storyboard를 리소스로 만들기. 코드에서 시작, 중지, 일시 중지 및 다시 시작할 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 에는 Begin, Stop, PauseResume을 비롯하여 Storyboard 애니메이션의 재생을 제어할 수 있는 여러 메서드가 있습니다. 이 예제에서는 사용자가 사각형을 클릭하고 MouseLeftButtonDown 이벤트를 발생시킬 때 Begin 메서드를 사용하여 애니메이션을 시작합니다.


// When the user clicks the Rectangle, the animation
// begins.
private void Mouse_Clicked(object sender, MouseEventArgs e)
{
    myStoryboard.Begin();
}


완성된 예제

다음 예제에서는 로드되었을 때 뷰에서 페이드 인되고 페이드 아웃되는 사각형을 만드는 전체 XAML 태그를 보여 줍니다.

이 샘플을 실행합니다.


  <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>



' When the user clicks the Rectangle, the animation
' begins.
Private Sub Mouse_Clicked(ByVal sender As Object, ByVal e As MouseEventArgs)
    myStoryboard.Begin()
End Sub



// When the user clicks the Rectangle, the animation
// begins.
private void Mouse_Clicked(object sender, MouseEventArgs e)
{
    myStoryboard.Begin();
}


이전 예제에서는 Begin 메서드를 사용하여 애니메이션을 시작하는 방법을 보여 주었지만 Storyboard에는 애니메이션을 제어하는 데 사용할 수 있는 Stop, PauseResume 메서드도 있습니다. 다음 예제에서는 사용자가 화면에서 Ellipse의 애니메이션을 제어할 수 있는 일련의 단추를 제공합니다.

이 샘플을 실행합니다.


<UserControl x:Class="interactive_animation.Page"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  Width="400" Height="300">
    <StackPanel>
        <TextBlock Margin="10" TextWrapping="Wrap">This sample uses the Begin, Pause, Resume, and Stop methods to control an animation.</TextBlock>
        <Canvas>
            <Canvas.Resources>
                <Storyboard x:Name="myStoryboard">

                    <!-- Animate the center point of the ellipse. -->
                    <PointAnimation Storyboard.TargetProperty="Center"
          Storyboard.TargetName="MyAnimatedEllipseGeometry"
          Duration="0:0:5"
          From="20,200"
          To="400,100"
          RepeatBehavior="Forever" />
                </Storyboard>
            </Canvas.Resources>

            <Path Fill="Blue">
                <Path.Data>
                    <!-- Describes an ellipse. -->
                    <EllipseGeometry x:Name="MyAnimatedEllipseGeometry"
          Center="20,20" RadiusX="15" RadiusY="15" />
                </Path.Data>
            </Path>

            <StackPanel Orientation="Horizontal" Canvas.Left="10" Canvas.Top="265">
                <!-- Button that begins animation. -->
                <Button Click="Animation_Begin"
        Width="65" Height="30" Margin="2" Content="Begin" />

                <!-- Button that pauses Animation. -->
                <Button Click="Animation_Pause"
        Width="65" Height="30" Margin="2" Content="Pause" />

                <!-- Button that resumes Animation. -->
                <Button Click="Animation_Resume"
        Width="65" Height="30" Margin="2" Content="Resume" />

                <!-- Button that stops Animation. Stopping the animation returns the
        ellipse to its original location. -->
                <Button Click="Animation_Stop"
        Width="65" Height="30" Margin="2" Content="Stop" />
            </StackPanel>

        </Canvas>
    </StackPanel>
</UserControl>



Private Sub Animation_Begin(ByVal sender As Object, ByVal e As RoutedEventArgs)
    myStoryboard.Begin()
End Sub

Private Sub Animation_Pause(ByVal sender As Object, ByVal e As RoutedEventArgs)
    myStoryboard.Pause()
End Sub

Private Sub Animation_Resume(ByVal sender As Object, ByVal e As RoutedEventArgs)
    myStoryboard.Resume()
End Sub

Private Sub Animation_Stop(ByVal sender As Object, ByVal e As RoutedEventArgs)
    myStoryboard.Stop()
End Sub



private void Animation_Begin(object sender, RoutedEventArgs e)
{
    myStoryboard.Begin();
}
private void Animation_Pause(object sender, RoutedEventArgs e)
{
    myStoryboard.Pause();
}
private void Animation_Resume(object sender, RoutedEventArgs e)
{
    myStoryboard.Resume();
}
private void Animation_Stop(object sender, RoutedEventArgs e)
{
    myStoryboard.Stop();
}


Storyboard 와 다른 모든 애니메이션 개체(DoubleAnimation, DoubleAnimationUsingKeyFrames, ColorAnimation 등)는 Timeline 클래스에서 상속합니다(이 항목의 뒷부분에 나오는 Timeline에 속하는 애니메이션 참조). Timeline 클래스는 BeginTime 속성을 포함하여 이러한 애니메이션 개체에 유용한 많은 속성을 조정합니다. 이름으로 알 수 있듯이 BeginTime 속성을 사용하면 애니메이션 개체 작업을 시작할 지점의 시간을 지정할 수 있습니다. 예를 들어 StoryboardBeginTime에 2초를 지정할 수 있습니다. Begin 메서드를 사용하여 Storyboard를 시작할 때 Storyboard는 2초를 기다린 후 시작됩니다. Storyboard 내에서도 애니메이션 개체의 BeginTime을 지정할 수 있습니다. 예를 들어 StoryboardBeginTime이 2초이고 이 Storyboard에 두 DoubleAnimation 개체가 있을 때 한 개체에는 BeginTime이 지정되어 있지 않고 다른 개체에는 BeginTime이 3으로 지정되어 있는 경우 첫 번째 DoubleAnimationBegin 메서드가 Storyboard에 대해 호출된 이후 2초 후에 시작되고 두 번째 DoubleAnimation은 5초(Storyboard의 지연 시간 2초와 DoubleAnimation의 지연 시간 3초를 더한 시간) 후에 시작됩니다. 다음 예제에서는 이러한 방법을 보여 줍니다.

이 샘플을 실행합니다.


<StackPanel>
    <StackPanel.Resources>

        <!-- Storyboard starts 2 seconds after its Begin
             method is called. -->
        <Storyboard BeginTime="0:0:2" x:Name="myStoryboard">

            <!-- Animates the rectangle's width. No 
                 BeginTime specified so by default begins 
                 as soon as it's parent (the Storyboard)
                 begins. -->
            <DoubleAnimation 
              Storyboard.TargetName="MyAnimatedRectangle" 
              Storyboard.TargetProperty="Width"
              To="300" Duration="0:0:1" />

            <!-- Animates the rectangle's opacity. A BeginTime
                 of 3 seconds specified so begins three seconds
                 after the Storyboard begins (total of 5 seconds)-->
            <DoubleAnimation BeginTime="0:0:3"
              Storyboard.TargetName="MyAnimatedRectangle" 
              Storyboard.TargetProperty="Opacity"
              To="0" Duration="0:0:1" />
        </Storyboard>
    </StackPanel.Resources>

    <Rectangle x:Name="MyAnimatedRectangle" 
               Loaded="Start_Animation"
               Width="100" Height="100" Fill="Blue" />

</StackPanel>
        </StackPanel>



' Start the animation when the object loads.
Private Sub Start_Animation(ByVal sender As Object, ByVal e As EventArgs)
    myStoryboard.Begin()
End Sub



// Start the animation when the object loads.
private void Start_Animation(object sender, EventArgs e)
{
    myStoryboard.Begin();
}


Storyboard 를 다른 애니메이션 개체(예: DoubleAnimation) 및 다른 Storyboard 개체의 컨테이너로 간주하여, 다른 Storyboard 개체에 중첩하거나 각 Storyboard에 대해 별도로 BeginTime 값을 지정할 수 있습니다. 중첩된 Storyboard를 사용하여 복잡한 애니메이션 순서를 간단히 조정할 수 있습니다. 각 자식 Storyboard는 부모 Storyboard가 시작할 때까지 대기했다가 카운트다운을 시작한 뒤 시작합니다.

XAML을 사용하는 대신 C#, Visual Basic 등의 프로시저 코드에서 애니메이션을 완전히 만들 수도 있습니다. 다음 예제에서는 Rectangle의 연결된 속성인 Canvas.TopCanvas.Left에 애니메이션 효과를 주는 애니메이션을 만드는 방법을 보여 줍니다.

이 샘플을 실행합니다.


private void Create_And_Run_Animation(object sender, EventArgs e)
{
    // Create a red rectangle that will be the target
    // of the animation.
    Rectangle myRectangle = new Rectangle();
    myRectangle.Width = 200;
    myRectangle.Height = 200;
    Color myColor = Color.FromArgb(255, 255, 0, 0);
    SolidColorBrush myBrush = new SolidColorBrush();
    myBrush.Color = myColor;
    myRectangle.Fill = myBrush;

    // Add the rectangle to the tree.
    LayoutRoot.Children.Add(myRectangle);

    // Create a duration of 2 seconds.
    Duration duration = new Duration(TimeSpan.FromSeconds(2));

    // Create two DoubleAnimations and set their properties.
    DoubleAnimation myDoubleAnimation1 = new DoubleAnimation();
    DoubleAnimation myDoubleAnimation2 = new DoubleAnimation();

    myDoubleAnimation1.Duration = duration;
    myDoubleAnimation2.Duration = duration;

    Storyboard sb = new Storyboard();
    sb.Duration = duration;

    sb.Children.Add(myDoubleAnimation1);
    sb.Children.Add(myDoubleAnimation2);

    Storyboard.SetTarget(myDoubleAnimation1, myRectangle);
    Storyboard.SetTarget(myDoubleAnimation2, myRectangle);

    // Set the attached properties of Canvas.Left and Canvas.Top
    // to be the target properties of the two respective DoubleAnimations.
    Storyboard.SetTargetProperty(myDoubleAnimation1, new PropertyPath("(Canvas.Left)"));
    Storyboard.SetTargetProperty(myDoubleAnimation2, new PropertyPath("(Canvas.Top)"));

    myDoubleAnimation1.To = 200;
    myDoubleAnimation2.To = 200;

    // Make the Storyboard a resource.
    LayoutRoot.Resources.Add("unique_id", sb);

    // Begin the animation.
    sb.Begin();
}


참고 참고:

페이지의 생성자 안에서 Begin과 같은 Storyboard 메서드를 호출하지 마십시오. 이렇게 하면 애니메이션이 자동으로 실패합니다.

이전 예제에서는 DoubleAnimation을 사용하여 속성에 애니메이션 효과를 주었습니다. Silverlight에서는 DoubleAnimation 형식 외에도 몇 가지 애니메이션 개체를 추가로 제공합니다. 애니메이션은 속성 값을 생성하므로 속성 형식에 따라 애니메이션의 형식도 달라집니다. 요소의 Width 속성과 같이 Double 값을 사용하는 속성에 애니메이션을 적용하려면 DoubleAnimation과 같은 Double 값을 생성하는 애니메이션을 사용합니다. Point 값을 사용하는 속성에 애니메이션을 적용하려면 PointAnimation 등의 Point 값을 생성하는 애니메이션을 사용합니다.

Silverlight에서는 두 가지 범주의 애니메이션 형식인 From/To/By 애니메이션과 키 프레임 애니메이션을 제공합니다. 다음 표에서는 애니메이션 범주와 명명 규칙에 대해 설명합니다.

범주

설명

명명 규칙

From/To/By 애니메이션

시작 값과 끝 값 사이에서 애니메이션을 적용합니다.

  • 시작 값을 지정하려면 애니메이션의 From 속성을 설정합니다.

  • 끝 값을 지정하려면 애니메이션의 To 속성을 설정합니다.

  • 시작 값에 상대적으로 끝 값을 지정하려면 애니메이션의 To 속성 대신 By 속성을 설정합니다.

이 개요의 예제에서는 가장 구현하기 쉬운 이러한 애니메이션을 사용합니다.

type Animation

키 프레임 애니메이션

키 프레임 개체를 사용하여 지정된 일련의 값 사이에서 애니메이션을 적용합니다. 키 프레임 애니메이션은 대상 값 수를 지정할 수 있으며 보간 방법까지 제어할 수 있다는 점에서 From/To/By 애니메이션보다 훨씬 강력합니다. 키 프레임 애니메이션은 키 프레임 애니메이션에 자세히 설명되어 있습니다.

type AnimationUsingKeyFrames

다음 표에서는 몇 가지 공통 애니메이션 형식 및 해당 형식에 사용되는 몇 가지 속성을 보여 줍니다.

속성 형식

해당 기본(From/To/By) 애니메이션

해당 키 프레임 애니메이션

사용 예제

Color

ColorAnimation

ColorAnimationUsingKeyFrames

SolidColorBrush Color 또는 GradientStop에 애니메이션 효과를 적용합니다.

Double

DoubleAnimation

DoubleAnimationUsingKeyFrames

Rectangle Width 또는 EllipseHeight(또는 임의의 FrameworkElement)에 애니메이션을 적용합니다.

Point

PointAnimation

PointAnimationUsingKeyFrames

EllipseGeometry Center 위치에 애니메이션 효과를 적용합니다.

Object

없음

ObjectAnimationUsingKeyFrames

GradientBrush에서 다른 하나에까지 Fill 속성에 애니메이션을 적용합니다.

Timeline에 속하는 애니메이션

모든 애니메이션은 Timeline 개체에서 상속하므로 모든 애니메이션은 Timeline의 특수 형식입니다. Timeline 은 시간 세그먼트를 정의합니다. 사용자는 Timeline의 타이밍 동작Duration, 반복 횟수 및 진행 속도를 지정할 수 있습니다.

애니메이션은 Timeline이므로 시간 세그먼트를 표현할 수도 있습니다. 또한 애니메이션은 지정된 시간 세그먼트(또는 Duration)가 진행되는 동안 출력 값을 계산합니다. 애니메이션을 진행하거나 "재생"하면 관련 속성이 업데이트됩니다.

자주 사용되는 세 가지 타이밍 속성은 Duration, AutoReverseRepeatBehavior입니다.

Duration 속성

Timeline은 시간 세그먼트를 나타내므로 애니메이션도 시간 세그먼트를 나타냅니다. 이 세그먼트의 길이는 대개 TimeSpan 값을 사용하여 지정하는 Timeline의 Duration 속성으로 결정됩니다. Timeline이 이 기간의 끝에 도달하면 반복이 완료됩니다.

애니메이션은 Duration 속성을 사용하여 현재 값을 결정합니다. 애니메이션의 Duration 값을 지정하지 않으면 기본값인 1초가 사용됩니다.

다음 구문은 Duration 속성에 대한 XAML 특성 구문의 단순화된 버전입니다.

hours : minutes : seconds

다음 표에서는 몇 가지 Duration 설정과 그 결과 값을 보여 줍니다.

설정

결과 값

0:0:5.5

5.5초

0:30:5.5

30분 5.5초

1:30:5.5

1시간 30분 5.5초

Duration 값과 XAML 구문에 대한 자세한 내용은 Duration 속성 참조 페이지를 참조하십시오.

AutoReverse 속성

AutoReverse 속성은 Timeline이 Duration의 끝에 도달한 후 뒤로 재생될지 여부를 지정합니다. 이 애니메이션 속성을 true로 설정하면 애니메이션이 Duration의 끝에 도달한 후 역방향으로 재생됩니다. 즉, 끝 값에서 시작 값으로 재생됩니다. 기본적으로 이 속성은 false로 설정됩니다.

RepeatBehavior 속성

RepeatBehavior 속성은 Timeline 재생 횟수를 지정합니다. 기본적으로 Timeline에는 반복 횟수가 1.0으로 지정되므로 한 번만 재생되고 반복되지 않습니다.

이전 단원에서는 다양한 형식의 애니메이션과 해당 타이밍 속성에 대해 설명했습니다. 이 단원에서는 애니메이션 효과를 줄 속성에 애니메이션을 적용하는 방법을 보여 줍니다. Storyboard 개체는 속성에 애니메이션을 적용하는 한 가지 방법을 제공합니다. Storyboard 는 Storyboard에 포함된 애니메이션에 대한 대상 정보를 제공하는컨테이너 Timeline입니다.

개체 및 속성 대상 지정

Storyboard 클래스에서는 TargetNameTargetProperty 연결 속성을 제공합니다. 애니메이션에 이러한 속성을 설정하여 애니메이션을 적용할 대상을 지정할 수 있습니다. 그러나 애니메이션이 개체를 대상으로 지정할 수 있으려면 이전 예제와 같이 x:Name 특성을 사용하여 개체에 이름을 지정하거나 간접적으로 속성을 대상으로 지정해야 합니다. 다음 예제에서는 간접적으로 속성을 대상으로 지정하는 방법을 보여 줍니다.

이 샘플을 실행합니다.


<StackPanel x:Name="myStackPanel" Background="Red"
  Loaded="Start_Animation">
  <StackPanel.Resources>
    <Storyboard x:Name="colorStoryboard">

      <!-- Animate the background color of the canvas from red to green
        over 4 seconds. -->
      <ColorAnimation BeginTime="00:00:00" Storyboard.TargetName="myStackPanel" 
        Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
        From="Red" To="Green" Duration="0:0:4" />

    </Storyboard>
  </StackPanel.Resources>
</StackPanel>



' Start the animation when the object loads
Private Sub Start_Animation(ByVal sender As Object, ByVal e As EventArgs)
    colorStoryboard.Begin()
End Sub



// Start the animation when the object loads.
private void Start_Animation(object sender, EventArgs e)
{
    colorStoryboard.Begin();
}


애니메이션이 적용되는 속성 값(Color)이 이름이 지정되지 않고 명시적으로 선언되지도 않은 SolidColorBrush 개체에 속합니다. 이 간접 대상 지정은 다음과 같은 특수 구문을 사용하여 수행됩니다.

Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"

또는 SolidColorBrush를 명시적으로 만들어 이름을 지정하고 직접 Color 속성을 대상으로 지정할 수도 있습니다. 다음 예제에서는 이전 예제와 동일하지만 직접 속성 대상 지정을 사용하여 애니메이션을 만드는 방법을 보여 줍니다.


<StackPanel Loaded="Start_Animation">
  <StackPanel.Resources>
    <Storyboard x:Name="colorStoryboard">
      <!-- Animate the background color of the canvas from red to green
        over 4 seconds. -->
      <ColorAnimation BeginTime="00:00:00" Storyboard.TargetName="mySolidColorBrush"
        Storyboard.TargetProperty="Color" From="Red" To="Green" Duration="0:0:4" />
    </Storyboard>
  </StackPanel.Resources>

  <StackPanel.Background>
    <SolidColorBrush x:Name="mySolidColorBrush" Color="Red" />
  </StackPanel.Background>

</StackPanel>



' Start the animation when the object loads
Private Sub Start_Animation(ByVal sender As Object, ByVal e As EventArgs)
    colorStoryboard.Begin()
End Sub



// Start the animation when the object loads.
private void Start_Animation(object sender, EventArgs e)
{
    colorStoryboard.Begin();
}


회전하는 개체, 기울어지는 개체 및 배율 조정된 개체와 같은 일부 흥미로운 애니메이션은 Transform 개체의 속성에 애니메이션 효과를 주어 수행됩니다.

다음 예제에서는 RotateTransform과 함께 StoryboardDoubleAnimation을 사용하여 Rectangle이 제자리에서 회전하도록 만듭니다.

이 샘플을 실행합니다.


<StackPanel Margin="15">
  <StackPanel.Resources>
    <Storyboard x:Name="myStoryboard">
      <DoubleAnimation
       Storyboard.TargetName="myTransform"
       Storyboard.TargetProperty="Angle"
       From="0" To="360" Duration="0:0:5" 
       RepeatBehavior="Forever" />
    </Storyboard>
  </StackPanel.Resources>
  <Rectangle Width="50" Height="50" Fill="RoyalBlue"
   MouseLeftButtonDown="StartAnimation">
    <Rectangle.RenderTransform>
      <RotateTransform x:Name="myTransform" Angle="45" CenterX="25" CenterY="25" />
    </Rectangle.RenderTransform>
  </Rectangle>
</StackPanel>



Private Sub StartAnimation(ByVal sender As Object, ByVal e As MouseEventArgs)
    myStoryboard.Begin()
End Sub



private void StartAnimation(object sender, MouseEventArgs e)
{
    myStoryboard.Begin();
}


변환에 대한 자세한 내용은 변환을 참조하십시오.

FillBehavior 속성은 Timeline이 끝난 후의 동작을 지정합니다. 이 속성의 기본값은 애니메이션이 끝난 후 애니메이션이 적용된 개체가 최종 값을 유지하는 HoldEnd입니다. 예를 들어, RectangleOpacity 속성에 2초 동안 1에서 0까지 애니메이션을 적용하는 경우 사각형의 기본 동작은 2초가 지난 후 불투명도 0을 유지하는 것입니다. FillBehavior Stop으로 설정하면 애니메이션이 끝난 후 사각형의 불투명도가 원래 값 1로 되돌아갑니다.

감속/가속 함수를 사용하면 애니메이션에 사용자 지정 수식을 적용할 수 있습니다. 예를 들어 개체가 스프링 위에 있는 것처럼 사실적으로 바운스하거나 동작하도록 만들 수 있습니다. 키 프레임 또는 시작/끝/기준 애니메이션을 사용하여 이러한 효과를 모방할 수 있지만 많은 작업이 필요하며 수식을 사용하는 것보다 애니메이션이 덜 정확합니다.

EasingFunctionBase 에서 상속하여 사용자 지정 감속/가속 함수를 만드는 것 외에도 런타임에서 제공하는 여러 감속/가속 함수 중 하나를 사용하여 일반적인 효과를 만들 수 있습니다.

  • BackEase : 표시된 경로에서 애니메이션을 시작하기 전에 애니메이션의 이동을 약간 후진합니다.

  • BounceEase : 바운스 효과를 만듭니다.

  • CircleEase : 순환 함수를 사용하여 가속 및/또는 감속하는 애니메이션을 만듭니다.

  • CubicEase : 수식 f(t) = t3을 사용하여 가속 및/또는 감속하는 애니메이션을 만듭니다.

  • ElasticEase : 완전히 정지할 때까지 앞뒤로 진동하는 스프링과 유사한 애니메이션을 만듭니다.

  • ExponentialEase : 지수 수식을 사용하여 가속 및/또는 감속하는 애니메이션을 만듭니다.

  • PowerEase : 수식 f(t) = tp를 사용하여 가속 및/또는 감속하는 애니메이션을 만듭니다. 여기서 p는 Power 속성과 같습니다.

  • QuadraticEase : 수식 f(t) = t2을 사용하여 가속 및/또는 감속하는 애니메이션을 만듭니다.

  • QuarticEase : 수식 f(t) = t4을 사용하여 가속 및/또는 감속하는 애니메이션을 만듭니다.

  • QuinticEase : 수식 f(t) = t5을 사용하여 가속 및/또는 감속하는 애니메이션을 만듭니다.

  • SineEase : 사인 수식을 사용하여 가속 및/또는 감속하는 애니메이션을 만듭니다.

다음 샘플에서 이러한 감속/가속 함수 동작을 살펴볼 수 있습니다.

이 샘플을 실행합니다.

애니메이션에 감속/가속 함수를 적용하려면 애니메이션의 EasingFunction 속성을 사용하여 애니메이션에 적용할 감속/가속 함수를 지정합니다. 다음 예제에서는 DoubleAnimationBounceEase 감속/가속 함수를 적용하여 바운스 효과를 만듭니다.

이 샘플을 실행합니다.


<StackPanel x:Name="LayoutRoot" Background="White">
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <DoubleAnimation From="30" To="200" Duration="00:00:3" 
                Storyboard.TargetName="myRectangle" 
                Storyboard.TargetProperty="Height">
                <DoubleAnimation.EasingFunction>
                    <BounceEase Bounces="2" EasingMode="EaseOut" 
                                Bounciness="2" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </StackPanel.Resources>

    <Rectangle x:Name="myRectangle" MouseLeftButtonDown="Mouse_Clicked" 
     Fill="Blue" Width="200" Height="30" />

</StackPanel>



' When the user clicks the rectangle, the animation
' begins. 
Private Sub Mouse_Clicked(ByVal sender As Object, ByVal e As MouseEventArgs)
    myStoryboard.Begin()
End Sub



// When the user clicks the rectangle, the animation
// begins. 
private void Mouse_Clicked(object sender, MouseEventArgs e)
{
    myStoryboard.Begin();
}


앞의 예제에서는 시작/끝/기준 애니메이션에 감속/가속 함수를 적용했습니다. 이러한 감속/가속 함수를 키 프레임 애니메이션에 적용할 수도 있습니다(키 프레임 애니메이션 참조). 다음 예제에서는 키 프레임과 연결된 감속/가속 함수와 함께 키 프레임을 사용하여 위쪽으로 수축되고 속도가 느려진 후 떨어지는 것처럼 아래쪽으로 확장되고 바운스하여 정지하는 사각형의 애니메이션을 만드는 방법을 보여 줍니다.

이 샘플을 실행합니다.


<StackPanel x:Name="LayoutRoot" Background="White">
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <DoubleAnimationUsingKeyFrames
             Storyboard.TargetProperty="Height"
             Storyboard.TargetName="myRectangle">

                <!-- This keyframe animates the ellipse up to the crest 
                     where it slows down and stops. -->
                <EasingDoubleKeyFrame Value="30" KeyTime="00:00:02">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CubicEase EasingMode="EaseOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>

                <!-- This keyframe animates the ellipse back down and makes
                     it bounce. -->
                <EasingDoubleKeyFrame Value="200" KeyTime="00:00:06">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BounceEase Bounces="5" EasingMode="EaseOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>

            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </StackPanel.Resources>

    <Rectangle x:Name="myRectangle" MouseLeftButtonDown="Mouse_Clicked" 
     Fill="Blue" Width="200" Height="200" />
</StackPanel>



' When the user clicks the rectangle, the animation
' begins. 
Private Sub Mouse_Clicked(ByVal sender As Object, ByVal e As MouseEventArgs)
    myStoryboard.Begin()
End Sub



// When the user clicks the rectangle, the animation
// begins. 
private void Mouse_Clicked(object sender, MouseEventArgs e)
{
    myStoryboard.Begin();
}


EasingMode 속성을 사용하여 감속/가속 함수의 작동 방식, 즉 애니메이션의 보간 방법을 변경할 수 있습니다. EasingMode 에 대해 다음 세 가지 값을 지정할 수 있습니다.

  • EaseIn : 보간이 감속/가속 함수와 연결된 수식을 따릅니다.

  • EaseOut : 보간이 100% 보간에서 감속/가속 함수와 연결된 수식의 결과를 뺀 값을 따릅니다.

  • EaseInOut : 보간이 애니메이션의 처음 절반에는 EaseIn을 사용하고, 나머지 절반에는 EaseOut을 사용합니다.

아래 그래프에서는 EasingMode의 여러 다른 값을 보여 줍니다. 여기서 f(x)는 애니메이션 진행률을 나타내고 t는 시간을 나타냅니다.

BackEase

BackEase EasingMode 그래프

BounceEase

BounceEase EasingMode 그래프

CircleEase

CircleEase EasingMode 그래프

CubicEase

CubicEase EasingMode 그래프

ElasticEase

다른 EasingMode 그래프의 ElasticEase

ExponentialEase

다른 EasingMode 그래프의 ExponentialEase

PowerEase

다른 EasingMode 그래프의 QuarticEase

QuadraticEase

다른 EasingMode 그래프의 QuadraticEase

QuarticEase

다른 EasingMode 그래프의 QuarticEase

QuinticEase

다른 EasingMode 그래프의 QuinticEase

SineEase

SineEase 그래프
참고 참고:

PowerEase Power 속성을 사용하여 CubicEase, QuadraticEase, QuarticEaseQuinticEase와 동일한 동작을 만들 수 있습니다. 예를 들어 PowerEase를 사용하여 CubicEase를 대체하려는 경우 Power 값을 3으로 지정합니다.

런타임에 포함된 감속/가속 함수를 사용하는 것 외에도 EasingFunctionBase에서 상속하여 사용자 지정 감속/가속 함수를 만들 수 있습니다. 다음 예제에서는 간단한 사용자 지정 감속/가속 함수를 만드는 방법을 보여 줍니다. EaseInCore 메서드를 재정의하여 감속/가속 함수의 작동 방식에 대한 고유한 수학적 논리를 추가할 수 있습니다.

이 샘플을 실행합니다.


namespace CustomEasingFunction
{
    public class CustomSeventhPowerEasingFunction : EasingFunctionBase
    {
        public CustomSeventhPowerEasingFunction() : base() 
        { 
        }   

        // Specify your own logic for the easing function by overriding
        // the EaseInCore method. Note that this logic applies to the "EaseIn"
        // mode of interpolation. 
        protected override double EaseInCore(double normalizedTime) 
        { 
            // applies the formula of time to the seventh power.
            return Math.Pow(normalizedTime, 7);
        }

    }
}


일반 애니메이션과 사용자 지정 감속/가속 함수로는 필요한 효과를 적용하기에 부족한 경우가 있습니다. 예를 들어 애니메이션에서 충돌 탐지를 사용하도록 하려면 사용자 지정 프레임 단위 애니메이션을 만들 수 있습니다. 이러한 방식을 통해 사용자 지정 애니메이션에서 Silverlight 애니메이션 시스템을 무시할 수 있습니다. 자세한 내용은 Custom Animations in Silverlight를 참조하십시오.

커뮤니티 추가 항목

추가
표시:
© 2014 Microsoft. All rights reserved.