다음을 통해 공유

키 프레임 애니메이션 및 이징 함수 애니메이션

선형 키 프레임 애니메이션, KeySpline 값을 사용하는 키 프레임 애니메이션, 또는 이징 함수는 거의 동일한 시나리오를 위한 세 가지 방법으로, 시작 상태에서 끝 상태로 비선형 애니메이션 동작을 활용하여 약간 더 복잡한 스토리보드 애니메이션을 만드는 데 사용됩니다.

필수 조건

Storyboarded 애니메이션 항목을 읽었는지 반드시 확인하세요. 이 항목은 스토리보드 애니메이션에 설명 된 애니메이션 개념을 기반으로 하며 다시는 다루지 않습니다. 예를 들어 스토리보드 애니메이션은 애니메이션, 스토리보드를 리소스로, Timeline 속성 값( 예: Duration, FillBehavior 등)을 대상으로 지정하는 방법을 설명합니다.

키 프레임 애니메이션을 이용한 애니메이션 제작

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

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

애니메이션 시작 시 KeyTime 이 "0:0:0"인 키 프레임이 없으면 시작 값은 속성의 애니메이션이 아닌 값이 무엇이든 됩니다. From/To/By 애니메이션이 From이 없는 경우와 비슷하게 작동합니다.

키 프레임 애니메이션의 기간은 암시적으로 키 프레임에 설정된 가장 높은 KeyTime 값과 같습니다. 원하는 경우 명시적 기간을 설정할 수 있지만, 자신의 키 프레임에서 KeyTime보다 짧지 않도록 주의하십시오. 그렇지 않으면 애니메이션의 일부가 잘릴 수 있습니다.

기간 외에도 키 프레임 애니메이션 클래스도 타임라인에서 파생되므로 From To//By 애니메이션과 마찬가지로 키 프레임 애니메이션에 대한 모든 타임라인 기반 속성을 설정할 수 있습니다. 이는 다음과 같습니다.

  • AutoReverse: 마지막 키 프레임에 도달하면 프레임이 끝에서 역순으로 반복됩니다. 이렇게 하면 애니메이션의 보이는 지속 시간이 두 배가 됩니다.
  • BeginTime: 애니메이션의 시작을 지연합니다. 프레임의 KeyTime 값에 대한 타임라인은 BeginTime 에 도달할 때까지 계산을 시작하지 않으므로 프레임을 차단할 위험이 없습니다.
  • FillBehavior: 마지막 키 프레임에 도달할 때 발생하는 동작을 제어합니다. FillBehavior 는 중간 키 프레임에 영향을 주지 않습니다.
  • RepeatBehavior:
    • Forever로 설정하면 키 프레임과 타임라인이 무한히 반복됩니다.
    • 반복 횟수로 설정하면 타임라인이 여러 번 반복됩니다.
    • 기간으로 설정하면 타임라인이 해당 시간에 도달할 때까지 반복됩니다. 타임라인의 암시적 기간이 정수 배수가 아닌 경우, 애니메이션이 키 프레임 시퀀스 중간에서 잘릴 수 있습니다.
  • SpeedRatio (일반적으로 사용되지 않음)

선형 키 프레임

선형 키 프레임은 프레임의 KeyTime 에 도달할 때까지 값의 간단한 선형 보간을 생성합니다. 이 보간 동작은 Storyboarded 애니메이션 항목에 설명된 간단한 //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에 도달하면 새 값이 적용됩니다. 애니메이션되는 UI 속성에 따라 애니메이션이 '점프'하는 것처럼 보이는 경우가 많습니다. 이것은 당신이 정말로 원하는 미적 행동임을 확신하십시오. 선언하는 키 프레임 수를 늘려 명백한 점프를 최소화할 수 있지만, 부드러운 애니메이션이 목표인 경우 선형 또는 스플라인 키 프레임을 대신 사용하는 것이 더 나을 수 있습니다.

비고

불연속 키 프레임은 Double, Point 및 Color 형식이 아닌 값에 DiscreteObjectKeyFrame을 사용하여 애니메이션 효과를 주는 유일한 방법입니다. 이 항목의 뒷부분에서 자세히 설명하겠습니다.

스플라인 키 프레임

스플라인 키 프레임은 KeySpline 속성 값에 따라 값 간에 변수 전환을 만듭니다. 이 속성은 애니메이션의 가속을 설명하는 Bezier 곡선의 첫 번째 및 두 번째 제어점을 지정합니다. 기본적으로 KeySpline 은 함수 시간 그래프가 해당 Bezier 곡선의 모양인 시간 경과에 따른 함수 관계를 정의합니다. 일반적으로 공백 또는 쉼표로 구분된 4개의 Double 값이 있는 XAML 약식 특성 문자열에 KeySpline 값을 지정합니다. 이러한 값은 베지어 곡선의 두 제어점에 대한 "X,Y" 쌍입니다. "X"는 시간이고 "Y"는 값에 대한 함수 한정자입니다. 각 값은 항상 0에서 1 사이여야 합니다. KeySpline에 대한 제어점을 수정하지 않으면 0,0에서 1,1까지의 직선은 선형 보간에 대한 시간에 따른 함수의 표현입니다. 컨트롤 포인트는 해당 곡선의 모양을 변경하므로 스플라인 애니메이션에 대한 시간이 지남에 따라 함수의 동작이 변경됩니다. 시각적으로 그래프로 보는 것이 가장 좋습니다.

다음 예제에서는 애니메이션에 적용된 세 가지 키 프레임을 보여 줍니다. 마지막 프레임은 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차원 좌표계에서 실제 물리학을 시뮬레이션하는 애니메이션을 생성하는 데 유용한 경우가 많습니다. 예를 들어, 개체가 실제와 같이 튀거나 스프링처럼 동작하도록 할 수 있습니다. 키 프레임 또는 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 의 시간 경과에 따른 함수 동작을 수정하는 두 개의 속성 Bounces 와 Bounceiness 가 있습니다. CubicEase와 같은 다른 감속/가속 함수에는 모든 감속/가속 함수가 공유하는 EasingMode 속성 이외의 속성이 없으며 항상 동일한 시간 경과 동작을 생성합니다.

이러한 감속/가속 함수 중 일부는 속성이 있는 감속/가속 함수에서 속성을 설정하는 방법에 따라 약간 겹칩니다. 예를 들어 QuadraticEase 는 PowerEase 와 정확히 동일하며 Power 는 2와 같습니다. 그리고 CircleEase 는 기본적으로 기본값 ExponentialEase입니다.

BackEase 이징 함수는 From/To 또는 키 프레임의 값이 설정된 정상 범위를 벗어나 값을 변경할 수 있기 때문에 독창적입니다. 일반 From To/동작에서 예상한 대로 반대 방향으로 값을 변경하여 애니메이션을 시작하고 , From 또는 start 값으로 돌아가서 정상적으로 애니메이션을 실행합니다.

이전 예제에서는 키 프레임 애니메이션에 대한 감속/가속 함수를 선언하는 방법을 보여 줍니다. 다음 샘플은 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 애니메이션에 적용되면, 이 함수는 애니메이션의 기간 동안 값이 From 값에서 To 값으로 보간되는 과정의 시간별 특성을 변화시킵니다. 이징 함수가 없으면 선형 보간이 이루어집니다.

불연속 개체 값 애니메이션

애니메이션의 한 가지 유형은 Double, Point 또는 Color 형식이 아닌 속성에 애니메이션 값을 적용할 수 있는 유일한 방법이기 때문에 특별한 언급이 가능합니다. 키 프레임 애니메이션 ObjectAnimationUsingKeyFrames입니다. 개체 값을 사용하여 애니메이션 효과를 주는 것은 프레임 간에 값을 보간할 가능성이 없기 때문에 다릅니다. 프레임의 KeyTime에 도달하면, 애니메이션 값이 키 프레임의 Value에 지정된 값으로 즉시 설정됩니다. 보간이 없으므로 ObjectAnimationUsingKeyFrames 키 프레임 컬렉션에서 사용하는 키 프레임은 DiscreteObjectKeyFrame 하나뿐입니다.

DiscreteObjectKeyFrame의 값은 속성 요소 구문을 사용하여 설정되는 경우가 많습니다. 설정하려는 개체 값이 특성 구문의 값을 채우기 위한 문자열로 표현할 수 없기 때문입니다. StaticResource와 같은 참조를 사용하는 경우에도 특성 구문을 사용할 수 있습니다.

기본 템플릿에서 사용되는 ObjectAnimationUsingKeyFrames 가 표시되는 위치는 템플릿 속성이 Brush 리소스를 참조하는 경우입니다. 이러한 리소스는 Color 값이 아니라 SolidColorBrush 개체이며 시스템 테마(ThemeDictionaries)로 정의된 리소스를 사용합니다. TextBlock.Foreground와 같은 브러시 형식 값에 직접 할당할 수 있으며 간접 대상 지정을 사용할 필요가 없습니다. 그러나 SolidColorBrush 가 Double, 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의 값에 애니메이션 효과를 적용하여 "슬라이드 쇼" 애니메이션을 만드는 흥미로운 방법이 될 수 있습니다.

  • Last updated on