정보
요청한 주제가 아래에 표시됩니다. 그러나 이 주제는 이 라이브러리에 포함되지 않습니다.

빠른 시작: Windows Phone의 애니메이션

2014-06-18

적용 대상: Windows Phone 8 및 Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

 

Windows Phone 에서 애니메이션을 사용하면 움직임과 대화형 기능을 추가하여 앱을 향상시킬 수 있습니다. 배경색에 애니메이션 효과를 주거나 애니메이션 변환을 적용하여 화면을 멋지게 전환하거나 유용한 시각적 효과를 제공할 수 있습니다. 이 빠른 시작에서는 속성 값을 변경하고 키 프레임을 사용하여 기본 애니메이션을 만드는 방법을 보여 줍니다.

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

 

개체의 속성 값을 변경하여 Windows Phone 애니메이션을 만듭니다. 예를 들어 RectangleWidth, RotateTransform의 각도 또는 Button의 색상 값에 애니메이션을 적용할 수 있습니다.

다음 예제에서는 Opacity 속성에 애니메이션 효과를 줍니다.

<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"/>
        </Storyboard>
    </StackPanel.Resources>
    <Rectangle MouseLeftButtonUp="Rectangle_Tapped"
        x:Name="MyAnimatedRectangle"
        Width="300" Height="200" Fill="Blue" />
</StackPanel>
// When the user taps the rectangle, the animation begins.
private void Rectangle_Tapped(object sender, MouseEventArgs e){
    myStoryboard.Begin();
}
Animating a double property

다음 섹션에서는 Opacity 속성에 애니메이션 효과를 주는 단계를 설명하고 각 단계에 사용되는 XAML을 살펴봅니다.

1. 애니메이션 효과를 줄 속성 식별

이 예제에서는 RectangleOpacity 속성에 애니메이션 효과를 줍니다. 개체 자체에 애니메이션 효과를 줄 속성을 선언할 필요가 없습니다. 하지만 일반적으로 애니메이션 효과를 줄 개체의 이름을 지정합니다. 개체의 이름을 지정하면 애니메이션 효과의 대상이 되는 개체를 보다 쉽게 지정할 수 있습니다. 다음 XAML은 Rectangle MyAnimatedRectangle의 이름을 지정하는 방법을 보여 줍니다.

<Rectangle x:Name="MyAnimatedRectangle" ...

2. 스토리보드를 만들어서 리소스로 설정

Storyboard는 애니메이션 개체를 추가할 컨테이너입니다. Storyboard를, 애니메이션 효과를 줄 개체에 사용 가능한 리소스로 설정해야 합니다. 다음 XAML 에서는 Storyboard를 루트 요소(StackPanel)의 리소스로 설정하는 방법을 보여 줍니다.

<StackPanel x:Name="rootElement">
    <StackPanel.Resources>
    <!-- Animates the rectangle's opacity. -->
        <Storyboard x:Name="myStoryboard">
            <!-- Animation objects go here. -->
        </Storyboard>
    </StackPanel.Resources>
</StackPanel>

3. 애니메이션 개체를 스토리보드에 추가

애니메이션 효과를 줄 속성의 값(Opacity)에 double이 사용되므로 이 예제에서는 DoubleAnimation 개체를 사용합니다. 애니메이션 개체는 애니메이션 효과가 적용되는 대상과 해당 애니메이션의 작동 방식을 지정합니다. 다음 XAML은 StoryboardDoubleAnimation을 추가하는 방법을 보여 줍니다.

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

DoubleAnimation 개체는 다음 애니메이션을 지정합니다.

  • Storyboard.TargetProperty="Opacity"Opacity 속성에 애니메이션 효과를 주도록 지정합니다.

  • Storyboard.TargetName="MyAnimatedRectangle"은 이 속성에 애니메이션 효과를 줄 개체(Rectangle)를 지정합니다.

  • From="1.0" To="0.0"Opacity 속성이 값 1에서 시작하여 0까지 애니메이션 효과(불투명 상태에서 시작하여 점점 희미해짐)를 주도록 지정합니다.

  • Duration="0:0:1"은 애니메이션 효과의 지속 시간(Rectangle이 희미해지는 속도)을 지정합니다. Duration 속성이 "시:분:초" 형식으로 지정되므로 이 예제에 사용된 기간은 1초입니다.

  • AutoReverse="True"는 애니메이션 종료 시 반대로 진행되도록 지정합니다. 이 예제의 경우 완전히 희미해졌다가 100% 불투명 상태가 됩니다.

  • RepeatBehavior="Forever"는 애니메이션 시작 시 횟수 제한 없이 애니메이션이 실행되도록 지정합니다. 이 예제에서는 Rectangle이 100% 불투명 상태에서 100% 투명 상태로 바뀌는 과정(뚜렷하게 표시되었다가 점점 희미해짐)이 계속됩니다.

4. 애니메이션 시작

애니메이션을 시작하는 일반적인 방법은 이벤트에 응답하는 것입니다. 이 예제에서는 사용자가 Rectangle을 탭할 때 애니메이션을 시작하는 데 MouseLeftButtonUp 이벤트가 사용됩니다.

<Rectangle MouseLeftButtonUp="Rectangle_Tapped"
    x:Name="MyAnimatedRectangle"
    Width="100" Height="100" Fill="Blue" />

StoryboardBegin 메서드를 사용하여 시작됩니다.

myStoryboard.Begin();
참고참고:

XAML 대신에 C# 또는 Visual Basic을 사용하여 애니메이션을 설정할 수 있습니다.

앞의 예에서는 Double의 값을 사용한 속성에 애니메이션 효과를 주는 방법을 살펴보았습니다. Color에 애니메이션 효과를 주려면 어떻게 해야 할까요? Windows Phone 에서는 다양한 값 형식에 애니메이션 효과를 주는 데 사용되는 애니메이션 개체를 제공합니다. 다음 기본 애니메이션 개체는 각각 Double, ColorPoint의 속성에 애니메이션 효과를 줍니다.

참고참고:

또한 개체를 사용하는 속성에도 애니메이션 효과를 줄 수 있습니다.

다음 예제에서는 ColorAnimation을 만드는 방법을 보여 줍니다.

<StackPanel MouseLeftButtonUp="Rectangle_Tapped">
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
        <!-- Animate the background color of the canvas from red to green over 4 seconds. -->
            <ColorAnimation 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>
// When the user taps the rectangle, the animation begins.
private void Rectangle_Tapped(object sender, MouseEventArgs e){
    myStoryboard.Begin();
}
Animating a color property

다음 예제에서는 Begin 메서드를 사용하여 애니메이션을 시작하는 방법을 보여 줍니다. Storyboard에는 애니메이션을 제어하는 데 사용할 수 있는 Stop, PauseResume 메서드도 있습니다. 다음 예제에서는 사용자가 화면에서 Ellipse의 애니메이션을 제어할 수 있는 4개의 Button 개체를 만듭니다.

<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>
        <!-- Describe an ellipse. -->
            <EllipseGeometry x:Name="MyAnimatedEllipseGeometry"
            Center="20,20" RadiusX="15" RadiusY="15" />
        </Path.Data>
    </Path>
    <StackPanel Orientation="Vertical" Canvas.Left="60" Canvas.Top="265">
      <StackPanel Orientation="Horizontal">
        <!-- Button that begins animation. -->
        <Button Click="Animation_Begin"
            Width="165" Height="130" Margin="2" Content="Begin" />
        <!-- Button that pauses animation. -->
        <Button Click="Animation_Pause"
            Width="165" Height="130" Margin="2" Content="Pause" />
      </StackPanel>
      <StackPanel Orientation="Horizontal">
        <!-- Button that resumes animation. -->
        <Button Click="Animation_Resume"
            Width="165" Height="130" Margin="2" Content="Resume" />
        <!-- Button that stops animation. Stopping the animation returns the
        ellipse to its original location. -->
        <Button Click="Animation_Stop"
            Width="165" Height="130" Margin="2" Content="Stop" />
      </StackPanel>
    </StackPanel>
</Canvas>
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();
}
Starting, stopping, pausing, and resuming

지금까지 이 빠른 시작의 예제에서는 두 값 사이에서 애니메이션 효과 주기를 보여 주었습니다. 이러한 애니메이션을 시작/끝/기준 애니메이션이라고 합니다. 키 프레임 애니메이션을 사용하면 세 개 이상의 대상 값을 사용하고 애니메이션의 보간 방법을 제어할 수 있습니다. 애니메이션 효과를 줄 여러 값을 지정하여 보다 복잡한 애니메이션을 만들 수 있습니다. 애니메이션의 보간을 지정하여(특히, KeySpline 속성을 사용) 애니메이션 가속을 제어할 수 있습니다.

이 예제에서는 키 프레임 애니메이션을 사용하여 RectangleHeight에 애니메이션 효과를 주는 방법을 보여 줍니다.

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

            <!-- This key frame resets the animation to its starting
            value (30) at the beginning of the animation. -->
            <LinearDoubleKeyFrame Value="30" KeyTime="0:0:0" />

            <!-- Spline animations are used to create acceleration. This
            SplineDoubleKeyFrame creates an animation that starts out slow
            and then speeds up. The rectangle "falls". -->
            <SplineDoubleKeyFrame KeySpline="0,0 1,0" Value="300"
            KeyTime="0:0:0.8" />

            <!-- This spline animation creates the "bounce" at the end where
            the rectangle shortens its length quickly at first and then
            slows down and stops. -->
            <SplineDoubleKeyFrame KeySpline="0.10, 0.21 0.00, 1.0" Value="250"
            KeyTime="0:0:1.5" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </StackPanel.Resources>
    <Rectangle x:Name="myRectangle" MouseLeftButtonUp="Rectangle_Tapped" Fill="Blue" Width="200" Height="30" />
</StackPanel>
// When the user taps the rectangle, the animation begins.
private void Rectangle_Tapped(object sender, MouseEventArgs e){
     myStoryboard.Begin(); 
}
Animating by using key-frames

이 XAML에는 다음의 세 키 프레임이 포함됩니다. 각 키 프레임은 특정 시간에 애니메이션 효과를 줄 값을 지정합니다. 전체 애니메이션에는 1.5초가 소요됩니다.

  • 이 예제의 첫 번째 키 프레임은 LinearDoubleKeyFrame입니다. LinearDoubleKeyFrame과 같은 LinearTypeKeyFrame 개체는 값 사이에서 원활한 선형 전환 효과를 만듭니다. 하지만 이 예제에서는 0시간에 값 30에서 애니메이션 효과를 주도록 지정하는 데만 사용됩니다.

  • 이 예제의 두 번째 키 프레임은 SplineDoubleKeyFrame으로, RectangleHeight가 애니메이션이 시작된 이후 0.8초 시간에 300이 되도록 지정합니다. SplineDoubleKeyFrame 등의 SplineTypeKeyFrame 개체는 KeySpline 속성 값에 따라 값 사이에 가변 전환 효과를 만듭니다. 이 예제에서 Rectangle은 처음에는 서서히 이동하다가 시간 세그먼트의 끝 부분으로 갈수록 빠르게 이동합니다.

  • 이 예제의 세 번째 키 프레임은 SplineDoubleKeyFrame으로, RectangleHeight가 애니메이션이 시작된 이후 1.5초 시간(마지막 SplineDoubleKeyFrame이 종료된 후 0.7초)에 250이 되도록 지정합니다. 이전 SplineDoubleKeyFrame과는 달리, 이 키 프레임은 애니메이션이 빠르게 시작해서 끝부분으로 갈수록 점점 느려지게 합니다.

아마도 SplineDoubleKeyFrame에 사용된 가장 까다로운 속성은 KeySpline 속성일 것입니다. 이 속성은 애니메이션의 가속을 나타내는 베지어 곡선의 첫 번째 및 두 번째 제어 지점을 지정합니다.

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

IEasingFunction 인터페이스를 구현하여 사용자 지정 감속/가속 함수를 만드는 것 외에도 런타임에서 제공하는 여러 감속/가속 함수 중 하나를 사용하여 일반적인 효과를 만들 수 있습니다. 다음 예제에서는 런타임에 제공되는 감속/가속 함수를 보여 줍니다. 드롭다운에서 감속/가속 함수를 선택하고 관련 속성을 설정한 다음 애니메이션을 실행합니다. 이 애니메이션 관련 XAML은 이 예제의 오른쪽 아래에 표시됩니다.

다음은 위의 예제에서 보여준 감속/가속 함수의 목록과 해당 기능에 대한 요약 설명입니다.

감속/가속 함수

요약

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

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

EasingDoubleKeyFrame, EasingPointKeyFrame 또는 EasingColorKeyFrame을 사용하여 이러한 감속/가속 함수를 키 프레임 애니메이션에 적용할 수 있습니다. 다음 예제에서는 키 프레임과 연결된 감속/가속 함수와 함께 키 프레임을 사용하여 위쪽으로 수축되고 속도가 느려진 후 떨어지는 것처럼 아래쪽으로 확장되고 바운스하여 정지하는 Rectangle의 애니메이션을 만드는 방법을 보여 줍니다.

<StackPanel 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" MouseLeftButtonUp="Rectangle_Tapped" Fill="Blue" Width="200" Height="200" />
</StackPanel>
// When the user taps the rectangle, the animation begins.
private void Rectangle_Tapped(object sender, MouseEventArgs e){
     myStoryboard.Begin();
}
Animating by using easing functions

런타임에 포함된 감속/가속 함수를 사용하는 것 외에도 EasingFunctionBase에서 상속하여 사용자 지정 감속/가속 함수를 만들 수 있습니다.

표시: