키 프레임 애니메이션 및 감속/가속 함수 애니메이션(C#/VB/C++ 및 XAML로 작성한 Windows 런타임 앱)

Applies to Windows and Windows Phone

로드맵: 이 항목은 다음 항목과 연관되어 있습니다. 참고 항목:

선형 키 프레임 애니메이션, KeySpline 값을 사용하는 키 프레임 애니메이션 또는 감속/가속 함수는 거의 동일한 시나리오에 사용되는 세 가지 다른 기술로, 약간 더 복잡하며 시작 상태에서 종료 상태까지 비선형 애니메이션 동작을 사용하는 스토리보드 애니메이션을 만듭니다.

필수 조건

스토리보드 애니메이션 항목을 읽어야 합니다. 이 항목은 스토리보드 애니메이션에서 설명한 애니메이션 개념을 기반으로 하며 해당 개념을 다시 반복하지 않습니다. 예를 들어 스토리보드 애니메이션에서는 애니메이션을 대상으로 지정하는 방법, 스토리보드를 리소스로 정의하는 방법, Timeline 속성 값(Duration, FillBehavior 등)에 대해 설명합니다.

키 프레임 애니메이션 사용

키 프레임 애니메이션은 애니메이션 타임라인을 따라 특정 지점에서 도달하는 둘 이상의 대상 값을 허용합니다. 즉, 각 키 프레임에서 다른 중간 값을 지정할 수 있으며 마지막에 도달한 키 프레임이 최종 애니메이션 값입니다. 애니메이션 효과를 주는 여러 값을 지정함으로써 더 복잡한 애니메이션을 만들 수 있습니다. 또한 키 프레임 애니메이션은 다른 보간 논리를 사용하며 각각은 애니메이션 형식에 따라 다른 KeyFrame 하위 클래스로 구현됩니다. 특히 각 키 프레임 애니메이션 형식에는 해당 키 프레임을 지정하는 KeyFrame 클래스의 Discrete, Linear, SplineEasing 변형이 있습니다. 예를 들어 Double을 대상으로 하고 키 프레임을 사용하는 애니메이션을 지정하려면 DiscreteDoubleKeyFrame, LinearDoubleKeyFrame, SplineDoubleKeyFrameEasingDoubleKeyFrame으로 키 프레임을 선언할 수 있습니다. 단일 KeyFrames 컬렉션 내에서 이러한 형식의 일부 및 전체를 사용하여 새 키 프레임에 도달할 때마다 보간을 변경할 수 있습니다.

보간 동작의 경우 각 키 프레임은 KeyTime 시간에 도달할 때까지 보간을 제어합니다. 해당 시간에 해당 Value에도 도달합니다. 키 프레임이 더 있을 경우 해당 값은 시퀀스에서 다음 키 프레임에 대한 시작 값이 됩니다.

애니메이션이 시작될 때 KeyTime이 "0:0:0"인 키 프레임이 없으면 시작 값은 속성의 애니메이션 효과를 주지 않은 모든 값이 됩니다. 이는 From이 없을 경우 From/To/By 애니메이션이 작동하는 방식과 유사합니다.

키 프레임 애니메이션 기간은 해당 키 프레임에 설정된 가장 높은 KeyTime 값과 암시적으로 동일합니다. 원하는 경우 명시적 Duration을 설정할 수 있지만 고유한 키 프레임의 KeyTime보다 짧지 않도록 주의해야 합니다. 그렇지 않으면 애니메이션 일부가 잘릴 수 있습니다.

Duration 외에 모든 Timeline 기반 속성을 키 프레임 애니메이션에서 설정할 수 있으며, 키 프레임 애니메이션 클래스도 Timeline에서 파생되므로 From/To/By 애니메이션에서도 설정할 수 있습니다. 있습니다.

  • AutoReverse: 마지막 키 프레임에 도달하면 프레임이 끝에서부터 반대로 반복됩니다. 그러면 애니메이션 기간이 명확히 두 배가 됩니다.
  • BeginTime: 애니메이션 시작을 지연합니다. 프레임의 KeyTime 값에 대한 타임라인이 BeginTime에 도달한 다음에야 카운팅을 시작하므로 프레임이 잘릴 위험이 없습니다.
  • FillBehavior: 마지막 키 프레임에 도달할 때 발생하는 상황을 제어합니다. FillBehavior는 중간 키 프레임에 영향을 주지 않습니다.
  • RepeatBehavior:
    • Forever로 설정하면 키 프레임과 타임라인이 무한 반복됩니다.
    • 반복 횟수로 설정하면 타임라인이 해당 횟수만큼 반복됩니다.
    • Duration으로 설정하면 해당 시간에 도달할 때까지 타임라인이 반복됩니다. 따라서 타임라인의 암시적 기간 중 정수 요소가 아니면 키 프레임 시퀀스 중간에 애니메이션이 잘릴 수 있습니다.
  • SpeedRatio(일반적으로 사용되지 않음)

선형 키 프레임

선형 키 프레임에서는 프레임의 KeyTime에 도달할 때까지 값의 간단한 선형 보간이 수행됩니다. 이 보간 동작은 스토리보드 애니메이션 항목에서 설명하는 더 간단한 From/To/By 애니메이션과 가장 유사합니다.

다음은 키 프레임 애니메이션을 사용하여 직사각형의 렌더 높이를 조정하는 방법으로 선형 키 프레임을 사용합니다. 이 예제에서는 처음 4초 동안 직사각형의 높이가 선형으로 약간 증가한 다음 마지막 몇 초 동안에는 직사각형이 시작 높이의 두 배가 될 때까지 신속하게 크기가 조정되는 애니메이션을 실행합니다.


<StackPanel>
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <DoubleAnimationUsingKeyFrames
              Storyboard.TargetName="myRectangle"
              Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
                <LinearDoubleKeyFrame Value="1" KeyTime="0:0:0"/>
                <LinearDoubleKeyFrame Value="1.2" KeyTime="0:0:4"/>
                <LinearDoubleKeyFrame Value="2" KeyTime="0:0:5"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </StackPanel.Resources>
</StackPanel>


불연속 키 프레임

불연속 키 프레임에서는 보간을 전혀 사용하지 않습니다. KeyTime에 도달하면 새 Value가 단순히 적용됩니다. 애니메이션 효과를 줄 UI 속성에 따라 "이동"하는 것처럼 보이는 애니메이션이 생성되는 경우가 종종 있습니다. 이 동작은 사용자가 실제로 원하는 미적 동작인지 확인해야 합니다. 선언하는 키 프레임 수를 늘려 명확한 이동을 최소화할 수 있지만 매끄러운 애니메이션이 목표인 경우 선형 또는 스플라인 키 프레임을 대신 사용하는 것이 더 좋을 수 있습니다.

참고  불연속 키 프레임은 Double, PointColor 형식이 아닌 값에 DiscreteObjectKeyFrame으로 애니메이션 효과를 주는 유일한 방법입니다. 이 항목의 뒷부분에서 이 방법에 대해 좀 더 자세히 설명합니다.

스플라인 키 프레임

스플라인 키 프레임은 KeySpline 속성의 값에 따라 값 사이의 가변 전환을 만듭니다. 이 속성은 베지어 곡선의 첫 번째 및 두 번째 제어 지점을 지정하며, 이는 애니메이션의 가속을 나타냅니다. 기본적으로 KeySpline은 함수-시간 그래프가 해당 베지어 곡선의 모양이 되는 시간에 따른 함수 관계를 정의합니다. 일반적으로 KeySpline 값은 네 개의 Double 값이 공백 또는 쉼표로 구분되는 XAML 속기 특성 문자열에 지정합니다. 이러한 값은 베지어 곡선의 두 제어점에 대한 "X,Y" 쌍입니다. "X"는 시간이고 "Y"는 값에 대한 함수 한정자입니다. 각 값은 항상 0에서 1(포함) 사이여야 합니다. KeySpline에 대한 제어점을 수정하지 않으면 0,0부터 1,1까지의 직선은 선형 보간의 시간에 따른 함수 표현입니다. 제어점은 해당 곡선의 모양을 변경하여 스플라인 애니메이션의 시간에 따른 함수 동작을 변경합니다. 이 동작은 그래프로 시각적으로 표시하는 것이 가장 좋을 수 있습니다. 브라우저에서 Silverlight 키 스플라인 시각화 도우미 샘플을 실행하여 제어점이 곡선을 수정하는 방법 및 해당 곡선을 KeySpline 값으로 사용할 때 샘플 애니메이션이 실행되는 방법을 확인할 수 있습니다.

다음 예제에서는 애니메이션에 적용된 세 가지 다른 키 프레임을 보여 주며, 마지막 키 프레임은 Double 값(SplineDoubleKeyFrame)에 대한 키 스플라인 애니메이션이 됩니다. KeySpline에 대해 적용된 "0.6,0.0 0.9,0.00" 문자열을 확인하세요. 이 예제에서는 애니메이션이 처음에는 느리게 실행되는 것처럼 보이지만 KeyTime에 도달하기 바로 전에는 해당 값에 빠르게 도달하는 곡선이 생성됩니다.


        <Storyboard x:Name="myStoryboard">

            <!-- Animate the TranslateTransform's X property
             from 0 to 350, then 50,
             then 200 over 10 seconds. -->
            <DoubleAnimationUsingKeyFrames
          Storyboard.TargetName="MyAnimatedTranslateTransform"
          Storyboard.TargetProperty="X"
          Duration="0:0:10" EnableDependentAnimation="True">

                <!-- Using a LinearDoubleKeyFrame, the rectangle moves 
                 steadily from its starting position to 500 over 
                 the first 3 seconds.  -->
                <LinearDoubleKeyFrame Value="500" KeyTime="0:0:3"/>

                <!-- Using a DiscreteDoubleKeyFrame, the rectangle suddenly 
                 appears at 400 after the fourth second of the animation. -->
                <DiscreteDoubleKeyFrame Value="400" KeyTime="0:0:4"/>

                <!-- Using a SplineDoubleKeyFrame, the rectangle moves 
                 back to its starting point. The
                 animation starts out slowly at first and then speeds up. 
                 This KeyFrame ends after the 6th
                 second. -->
                <SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="0" KeyTime="0:0:6"/>

            </DoubleAnimationUsingKeyFrames>
        </Storyboard>


감속/가속 키 프레임

감속/가속 키 프레임은 보간이 적용되는 키 프레임이며 보간의 시간에 따른 함수가 여러 가지 미리 정의된 수학 공식에 의해 제어됩니다. 실제로 일부 감속/가속 함수 형식과 동일한 결과를 스플라인 키 프레임에서도 많이 생성할 수 있지만 스플라인에서 재현할 수 없는 BackEase와 같은 몇 가지 감속/가속 함수도 있습니다.

감속/가속 키 프레임에 감속/가속 함수를 적용하려면 해당 키 프레임에 대한 XAML에서 EasingFunction 속성을 속성 요소로 설정합니다. 값의 경우 감속/가속 함수 형식 중 하나에 대해 개체 요소를 지정합니다.

다음 예제에서는 CubicEase를 적용한 다음 BounceEase를 연속 키 프레임으로 DoubleAnimation에 적용하여 튀는 효과를 냅니다.


        <Storyboard x:Name="myStoryboard">
            <DoubleAnimationUsingKeyFrames Duration="0:0:10"
             Storyboard.TargetProperty="Height"
             Storyboard.TargetName="myEllipse">

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

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

이는 단 하나의 감속/가속 함수 예제입니다. 다음 섹션에서 더 자세히 살펴보겠습니다.

감속/가속 함수

감속/가속 함수를 사용하면 애니메이션에 사용자 지정 수학 공식을 적용할 수 있습니다. 수학 연산이 실제 물리학을 2-D 좌표계에서 시뮬레이트하는 애니메이션을 생성하는 데 유용한 경우가 자주 있습니다. 예를 들어 개체가 사실적으로 튀게, 즉 스프링 위에 있는 것처럼 동작하게 할 수 있습니다. 키 프레임 애니메이션이나 심지어 From/To/By 애니메이션을 사용해서도 이와 비슷한 효과를 낼 수 있으나 상당한 작업이 필요하고 수학 공식을 사용하는 것보다 정확도가 떨어집니다.

다음과 같은 세 가지 방식으로 애니메이션에 감속/가속 함수를 적용할 수 있습니다.

다음은 감속/가속 함수의 목록입니다.

  • 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: 사인 공식을 사용하여 가속하거나 감속하는 애니메이션을 만듭니다.

일부 감속/가속 함수에는 고유한 속성이 있습니다. 예를 들어 BounceEase에는 특정 BounceEase의 시간에 따른 함수 동작을 수정하는 두 가지 BouncesBounciness 속성이 있습니다. CubicEase와 같은 다른 감속/가속 함수에는 모든 감속/가속 함수가 공유하는 EasingMode 속성 외에 다른 속성이 없으며 항상 동일한 시간에 따른 함수 동작을 생성합니다.

이러한 감속/가속 함수 일부는 속성이 있는 감속/가속 함수에서 속성을 설정하는 방법에 따라 약간 겹칩니다. 예를 들어 QuadraticEasePower가 2인 PowerEase와 정확하게 동일합니다. 또한 CircleEase는 기본적으로 기본값 ExponentialEase입니다.

BackEase 감속/가속 함수는 From/To 또는 키 프레임의 값에 따라 설정되는 일반 범위를 벗어나는 값을 변경할 수 있기 때문에 고유합니다. 이 함수는 값을 변경하여 일반 From/To 동작에서 예상되는 것과 반대되는 방향으로 애니메이션을 시작하고 From 또는 시작 값으로 다시 이동한 다음 정상적으로 애니메이션을 실행합니다.

Silverlight 샘플을 사용하여 여러 감속/가속 함수를 테스트할 수 있습니다.

이전 예제에서는 키 프레임 애니메이션에 대해 감속/가속 함수를 선언하는 방법을 살펴보았습니다. 다음 샘플에서는 감속/가속 함수를 From/To/By 애니메이션에 적용합니다.


<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="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
                <DoubleAnimation.EasingFunction>
                    <BounceEase Bounces="2" EasingMode="EaseOut" 
                                Bounciness="2"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </StackPanel.Resources>
    <Rectangle x:Name="myRectangle" Fill="Blue" Width="200" Height="30"/>
</StackPanel>

감속/가속 함수가 From/To/By 애니메이션에 적용되면 애니메이션의 Duration에 따라 FromTo 값 사이에서 값이 보간되는 방법의 시간에 따른 함수 특성을 변경합니다. 감속/가속 함수를 사용하지 않으면 선형 보간이 됩니다.

불연속 개체 값 애니메이션

한 가지 애니메이션 형식은 애니메이션 효과를 준 값을 Double, Point 또는 Color 형식이 아닌 속성에 적용할 수 있는 유일한 방법이므로 특별히 검토할 가치가 있습니다. 이는 키 프레임 애니메이션 ObjectAnimationUsingKeyFrames입니다. Object 값을 사용하여 애니메이션 효과를 주는 작업은 프레임 사이에서 값을 보간할 수 없기 때문에 어렵습니다. 프레임의 KeyTime에 도달하면 애니메이션 효과를 준 값이 키 프레임의 Value에서 지정한 값으로 바로 설정됩니다. 보간이 없기 때문에 ObjectAnimationUsingKeyFrames 키 프레임 컬렉션에서 DiscreteObjectKeyFrame 키 프레임 하나만 사용할 수 있습니다.

설정하려는 개체 값이 특성 구문에서 Value를 채우는 문자열로 나타낼 수 없는 경우가 자주 있기 때문에 DiscreteObjectKeyFrameValue는 종종 속성 요소 구문을 사용하여 설정됩니다. StaticResource와 같은 참조를 사용하는 경우 특성 구문을 계속 사용할 수 있습니다.

기본 템플릿에서 사용된 ObjectAnimationUsingKeyFrames를 확인할 수 있는 한 위치는 템플릿 속성이 Brush 리소스를 참조하는 경우입니다. 이러한 리소스는 Color 값이 아닌 SolidColorBrush 개체이며 시스템 테마 (ThemeDictionaries)로 정의되는 리소스를 사용합니다. 이러한 리소스는 TextBlock.Foreground와 같은 Brush 형식 값에 직접 할당할 수 있으며 간접 대상을 사용할 필요가 없습니다. 그러나 SolidColorBrushDouble, Point 또는 Color가 아니므로 ObjectAnimationUsingKeyFrames를 사용하여 리소스를 사용해야 합니다.


    <Style x:Key="TextButtonStyle" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Background="Transparent">
                        <TextBlock x:Name="Text"
                            Text="{TemplateBinding Content}"/>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Text" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ApplicationPointerOverForegroundThemeBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Text" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ApplicationPressedForegroundThemeBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
...
                           </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

또한 ObjectAnimationUsingKeyFrames를 사용하여 열거형 값을 사용하는 속성에 애니메이션 효과를 줄 수 있습니다. 다음은 Windows 런타임 기본 템플릿에서 가져온 명명된 스타일의 다른 예입니다. Visibility 열거형 상수를 사용하는 Visibility 속성을 설정하는 방법을 확인하세요. 이 경우 특성 구문을 사용하여 값을 설정할 수 있습니다. "Collapsed"와 같이 열거형 값으로 속성을 설정하려면 열거형의 비정규화된 상수 이름만 필요합니다.


<Style x:Key="BackButtonStyle" TargetType="Button">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="Button">
          <Grid x:Name="RootGrid">
            <VisualStateManager.VisualStateGroups>
              <VisualStateGroup x:Name="CommonStates">
              <VisualState x:Name="Normal"/>
...           <VisualState x:Name="Disabled">
                <Storyboard>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Visibility">
                    <DiscreteObjectKeyFrame Value="Collapsed" KeyTime="0"/>
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
            </VisualStateGroup>
...
          </VisualStateManager.VisualStateGroups>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

ObjectAnimationUsingKeyFrames 프레임 집합에 둘 이상의 DiscreteObjectKeyFrame을 사용할 수 있습니다. 이 방법은 Image.Source의 값에 애니메이션 효과를 주어 "슬라이드 쇼" 애니메이션을 만드는 흥미 있는 방법이며, 여러 개체 값이 유용할 수 있는 시나리오를 예로 들 수 있습니다.

관련 항목

C#, C++ 또는 VB를 사용하는 앱 개발 로드맵
속성 경로 구문
종속성 속성 개요
Storyboard
Storyboard.TargetProperty

 

 

표시:
© 2014 Microsoft