다음을 통해 공유

스토리보드 애니메이션

스토리보드 애니메이션은 시각적 의미의 애니메이션만이 아닙니다. 스토리보드 애니메이션은 종속성 속성의 값을 시간의 함수로 변경하는 방법입니다. 애니메이션 라이브러리가 아닌 스토리보드 애니메이션이 필요한 주된 이유 중 하나는 컨트롤 템플릿 또는 페이지 정의의 일부로 컨트롤의 시각적 상태를 정의하는 것입니다.

스토리보드 애니메이션 정의

스토리보드 애니메이션은 종속성 속성의 값을 시간의 함수로 변경하는 방법입니다. 애니메이션 효과를 주는 속성이 항상 앱의 UI에 직접적인 영향을 주는 속성은 아닙니다. 그러나 XAML은 앱에 대한 UI 정의에 관한 것이므로 일반적으로 애니메이션 효과를 주는 UI 관련 속성입니다. 예를 들어 RotateTransform의 각도 또는 단추 배경의 색 값에 애니메이션 효과를 적용할 수 있습니다.

스토리보드 애니메이션을 정의하는 주된 이유 중 하나는 컨트롤 작성자이거나 컨트롤의 템플릿을 다시 지정하고 시각적 상태를 정의하는 경우입니다. 자세한 내용은 시각적 상태에 대한 스토리보드 애니메이션을 참조하세요.

시각적 상태를 정의하든 앱에 대한 사용자 지정 애니메이션을 정의하든, 이 항목에 설명된 스토리보드 애니메이션의 개념 및 API는 대부분 적용됩니다.

애니메이션 효과를 주려면 스토리보드 애니메이션을 사용하여 대상으로 하는 속성이 종속성 속성이어야 합니다. 종속성 속성은 Windows 런타임 XAML 구현의 주요 기능입니다. 가장 일반적인 UI 요소의 쓰기 가능한 속성은 일반적으로 종속성 속성으로 구현되므로 애니메이션 효과를 주거나, 데이터 바인딩된 값을 적용하거나, Style 을 적용하고 Setter를 사용하여 속성을 대상으로 지정할 수 있습니다. 종속성 속성의 작동 방식에 대한 자세한 내용은 종속성 속성 개요를 참조하세요.

대부분의 경우 XAML을 작성하여 스토리보드 애니메이션을 정의합니다. Microsoft Visual Studio와 같은 도구를 사용하면 XAML이 생성됩니다. 코드를 사용하여 스토리보드 애니메이션을 정의할 수도 있지만 덜 일반적입니다.

간단한 예제를 살펴보겠습니다. 이 XAML 예제에서 Opacity 속성은 특정 Rectangle 개체에 애니메이션 효과를 냅니다.

<Page ...>
  <Page.Resources>
    <!-- Storyboard resource: Animates a rectangle's opacity. -->
    <Storyboard x:Name="myStoryboard">
      <DoubleAnimation
        Storyboard.TargetName="MyAnimatedRectangle"
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:1"/>
    </Storyboard>
  </Page.Resources>

  <!--Page root element, UI definition-->
  <Grid>
    <Rectangle x:Name="MyAnimatedRectangle"
      Width="300" Height="200" Fill="Blue"/>
  </Grid>
</Page>

애니메이션할 개체 식별

이전 예제에서 스토리보드는 사각형의 Opacity 속성에 애니메이션 효과를 줍니다. 개체 자체에 애니메이션을 선언하지 않습니다. 대신 스토리보드의 애니메이션 정의 내에서 이 작업을 수행합니다. 스토리보드는 일반적으로 애니메이션 효과를 주는 개체의 XAML UI 정의 바로 근처에 있지 않은 XAML에서 정의됩니다. 대신 일반적으로 XAML 리소스로 설정됩니다.

애니메이션을 대상에 연결하려면 식별 프로그래밍 이름으로 대상을 참조합니다. 애니메이션 효과를 주려는 개체의 이름을 지정하려면 항상 XAML UI 정의에 x:Name 특성을 적용해야 합니다. 그런 다음 애니메이션 정의 내에서 Storyboard.TargetName 을 설정하여 애니메이션 효과를 주도록 개체를 대상으로 지정합니다. Storyboard.TargetName 값의 경우 대상 개체의 이름 문자열을 사용합니다. 이 문자열은 x:Name 특성으로 이전 및 다른 위치에서 설정한 것입니다.

애니메이션 효과를 주도록 종속성 속성 대상 지정

애니메이션에서 Storyboard.TargetProperty 에 대한 값을 설정합니다. 이렇게 하면 대상 개체의 특정 속성에 애니메이션 효과를 적용할 수 있습니다.

경우에 따라 대상 개체의 직속 속성이 아니라 개체-속성 관계에 더 깊이 중첩된 속성을 대상으로 지정해야 합니다. 애니메이션 효과를 줄 수 있는 속성 형식(Double, Point, Color)을 참조할 수 있을 때까지 기여하는 개체 및 속성 값 집합으로 드릴다운하기 위해 이 작업을 수행해야 하는 경우가 많습니다. 이 개념을 간접 대상 지정이라고 하며 이러한 방식으로 속성을 대상으로 지정하는 구문을 속성 경로라고 합니다.

다음은 예제입니다. 스토리보드 애니메이션의 일반적인 시나리오 중 하나는 컨트롤이 특정 상태에 있음을 나타내기 위해 앱 UI 또는 컨트롤의 일부 색을 변경하는 것입니다. TextBlock의 전경에 애니메이션 효과를 주면 빨간색에서 녹색으로 바뀝니다. ColorAnimation이 관련되어 있을 것으로 예상하며, 맞습니다. 그러나 개체의 색에 영향을 주는 UI 요소의 속성 중 실제로 Color 형식은 없습니다. 대신 브러시 형식입니다. 따라서 실제로 애니메이션을 대상으로 지정해야 하는 것은 일반적으로 이러한 색 관련 UI 속성에 사용되는 브러시 파생 형식인 SolidColorBrush 클래스의 Color 속성입니다. 애니메이션의 속성 대상 지정에 대한 속성 경로를 구성하는 측면에서 다음과 같이 표시됩니다.

<Storyboard x:Name="myStoryboard">
  <ColorAnimation
    Storyboard.TargetName="tb1"
    Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
    From="Red" To="Green"/>
</Storyboard>

해당 부분의 관점에서 이 구문을 생각하는 방법은 다음과 같습니다.

  • 각 () 괄호 집합은 속성 이름을 묶습니다.
  • 속성 이름 내에는 점이 있고 해당 점은 형식 이름과 속성 이름을 구분하므로 식별하려는 속성이 모호하지 않습니다.
  • 중간에 있는 점, 괄호 안에 있지 않은 점이 단계입니다. 이 구문은 첫 번째 속성의 값(개체)을 사용하고, 개체 모델을 한 단계씩 실행하고, 첫 번째 속성 값의 특정 하위 속성을 대상으로 지정한다는 의미로 해석됩니다.

다음은 애니메이션 속성 대상 지정을 위한 시나리오 목록과 간접 속성 대상 지정을 사용할 때의 구문을 대략적으로 나타내는 일부 속성 경로 문자열입니다.

이러한 예제 중 일부는 숫자 주위에 대괄호를 사용합니다. 인덱서입니다. 앞의 속성 이름에 컬렉션이 값으로 있고 해당 컬렉션 내에서 항목(0부터 시작하는 인덱스로 식별됨)을 원하는 것을 나타냅니다.

XAML 연결된 속성에 애니메이션 효과를 적용할 수도 있습니다. 예를 들어 (Canvas.Left)항상 전체 연결된 속성 이름을 괄호로 묶습니다. 자세한 내용은 XAML 연결된 속성에 애니메이션 효과를 주는 것을 참조하세요.

애니메이션 효과를 주기 위해 속성의 간접 대상 지정에 속성 경로를 사용하는 방법에 대한 자세한 내용은 속성 경로 구문을 참조하세요.

애니메이션 형식

Windows 런타임 애니메이션 시스템에는 스토리보드 애니메이션이 적용할 수 있는 세 가지 특정 형식이 있습니다.

개체 참조 값에 대한 일반화된 개체 애니메이션 형식도 있으며, 나중에 살펴보겠습니다.

애니메이션 값 지정

지금까지 애니메이션 효과를 줄 개체 및 속성을 대상으로 지정하는 방법을 보여 주었지만 애니메이션이 실행 시 속성 값에 대해 수행하는 작업을 아직 설명하지 않았습니다.

설명한 애니메이션 형식을 From To//By 애니메이션이라고도 합니다. 즉, 애니메이션이 애니메이션 정의에서 제공되는 이러한 입력 중 하나 이상을 사용하여 시간이 지남에 따라 속성 값을 변경합니다.

  • 값은 From 값에서 시작합니다. From 값을 지정하지 않으면 애니메이션이 실행되기 전에 애니메이션 속성에 있는 값이 시작 값입니다. 기본값, 스타일 또는 템플릿의 값 또는 XAML UI 정의 또는 앱 코드에 의해 특별히 적용된 값일 수 있습니다.
  • 애니메이션의 끝에서 값은 To 값입니다.
  • 또는 시작 값을 기준으로 끝 값을 지정하려면 By 속성을 설정합니다. To 속성 대신 이것을 설정해야 합니다.
  • To 값 또는 By 값을 지정하지 않으면 애니메이션이 실행되기 전 애니메이션 속성에 있는 값이 끝 값입니다. 이 경우 애니메이션이 값을 전혀 변경하지 않으므로 From 값을 사용하는 것이 좋습니다. 시작 값과 끝 값은 모두 동일합니다.
  • 애니메이션에는 일반적으로 From, By 또는 To 중 하나 이상이 있지만 세 가지 모두는 포함되지 않습니다.

이전 XAML 예제를 다시 살펴보고 From 및 To 값과 Duration을 다시 살펴보겠습니다. 다음은 Opacity 속성에 애니메이션 효과를 주는 예제이며 Opacity 의 속성 형식은 Double입니다. 따라서 여기서 사용할 애니메이션은 DoubleAnimation입니다.

From="1.0" To="0.0" 는 애니메이션이 실행되면 Opacity 속성이 값 1에서 시작하여 0에 애니메이션 효과를 주도록 지정합니다. 즉, 이러한 Double 값이 Opacity 속성에 어떤 의미를 갖는지에 대해 말하자면, 이 애니메이션은 개체가 처음에는 불투명하고 이후 점차 투명해지도록 만듭니다.

...
<Storyboard x:Name="myStoryboard">
  <DoubleAnimation
    Storyboard.TargetName="MyAnimatedRectangle"
    Storyboard.TargetProperty="Opacity"
    From="1.0" To="0.0" Duration="0:0:1"/>
</Storyboard>
...

Duration="0:0:1" 는 애니메이션이 지속되는 시간, 즉 사각형이 페이드되는 속도를 지정합니다. Duration 속성은 시간:분:초 형식으로 지정됩니다. 이 예제의 기간은 1초입니다.

기간 값 및 XAML 구문에 대한 자세한 내용은 Duration을 참조하세요.

비고

보여 준 예제에서는, 애니메이션 효과를 주는 개체의 시작 상태에서 불투명도가 기본값이나 명시적 설정을 통해 항상 1인 경우, From 값을 생략할 수 있습니다. 이 경우, 애니메이션은 암시적인 시작 값을 사용하며, 결과는 동일하게 유지됩니다.

From/To/By는 nullable입니다.

이전에 From, To 또는 By를 생략하고, 애니메이션이 없는 현재 값을 누락된 값 대신 사용할 수 있다고 언급했습니다. 애니메이션의 From, To 또는 By 속성은 추측할 수 있는 형식이 아닙니다. 예를 들어 DoubleAnimation.To 속성의 형식은 Double이 아닙니다. 대신 Double의 Nullable입니다. 기본값은 0이 아닌 null입니다. 이 null 값은 애니메이션 시스템에서 From, To 또는 By 속성의 값을 구체적으로 설정하지 않았음을 구분하는 방법입니다.

애니메이션의 다른 속성

이 섹션에 설명된 다음 속성은 대부분의 애니메이션에 적합한 기본값이 있다는 측면에서 모두 선택 사항입니다.

AutoReverse

애니메이션에서 AutoReverse 또는 RepeatBehavior 를 지정하지 않으면 해당 애니메이션이 한 번 실행되고 기간으로 지정된 시간 동안 실행됩니다.

AutoReverse 속성은 타임라인이 기간의 끝에 도달한 후 역방향으로 재생되는지 여부를 지정합니다. true로 설정하면 애니메이션이 선언된 지속 시간의 끝에 도달한 후 역방향으로 돌아가서 종료 값(To)에서 시작 값(From)으로 값을 변경합니다. 즉, 애니메이션이 기간의 두 배 동안 효과적으로 실행됩니다.

RepeatBehavior

RepeatBehavior 속성은 타임라인이 재생되는 횟수 또는 타임라인 내에서 반복해야 하는 더 큰 기간을 지정합니다. 기본적으로 타임라인의 반복 횟수는 "1x"입니다. 즉, 기간 동안 한 번 재생되고 반복되지 않습니다.

애니메이션이 여러 반복을 실행하도록 할 수 있습니다. 예를 들어 값이 "3x"이면 애니메이션이 세 번 실행됩니다. 또는 RepeatBehavior에 대해 다른 기간을 지정할 수 있습니다. 유효하려면 해당 기간이 애니메이션 자체의 기간 보다 길어야 합니다. 예를 들어 "0:0:10"의 RepeatBehavior 를 지정하는 경우 지속 시간이 "0:0:2"인 애니메이션의 경우 해당 애니메이션은 다섯 번 반복됩니다. 이들이 균등하게 나누어지지 않으면 RepeatBehavior 시간에 도달할 때 애니메이션이 중단되며, 그 과정에서 일부분만 완료될 수 있습니다. 마지막으로 특수 값 "Forever"를 지정하여 애니메이션이 의도적으로 중지될 때까지 무한히 실행되도록 할 수 있습니다.

RepeatBehavior 값 및 XAML 구문에 대한 자세한 내용은 RepeatBehavior를 참조하세요.

FillBehavior="Stop"

기본적으로 애니메이션이 종료되면 애니메이션은 기간이 초과된 후에도 속성 값을 최종 To 값 또는 By로 수정된 값으로 유지합니다. 그러나 FillBehavior 속성의 값을 FillBehavior.Stop으로 설정하면 애니메이션 값의 값이 애니메이션이 적용되기 전의 값으로 되돌아가거나 종속성 속성 시스템에 의해 결정된 현재 유효 값으로 더 정확하게 되돌아갑니다(이 구분에 대한 자세한 내용은 종속성 속성 개요 참조).

시작 시간

기본적으로 애니메이션의 BeginTime 은 "0:0:0"이므로 포함된 Storyboard 가 실행되는 즉시 시작됩니다. Storyboard에 둘 이상의 애니메이션이 포함되어 있고 초기 애니메이션과 다른 애니메이션의 시작 시간을 엇갈리거나 의도적으로 짧은 지연을 만들려는 경우 이를 변경할 수 있습니다.

SpeedRatio

Storyboard에 애니메이션이 두 개 이상 있는 경우 Storyboard를 기준으로 하나 이상의 애니메이션의 시간 속도를 변경할 수 있습니다. 애니메이션이 실행되는 동안 지속 시간이 경과되는 방식을 궁극적으로 제어하는 것은 부모 스토리보드입니다. 이 속성은 자주 사용되지 않습니다. 자세한 내용은 SpeedRatio를 참조하세요.

Storyboard에서 둘 이상의 애니메이션 정의

Storyboard의 콘텐츠는 둘 이상의 애니메이션 정의일 수 있습니다. 동일한 대상 개체의 두 속성에 관련 애니메이션을 적용하는 경우 둘 이상의 애니메이션이 있을 수 있습니다. 예를 들어 UI 요소의 RenderTransform으로 사용되는 TranslateTransform의 TranslateX 및 TranslateY 속성을 모두 변경할 수 있습니다. 이렇게 하면 요소가 대각선으로 변환됩니다. 이 작업을 수행하려면 두 개의 다른 애니메이션이 필요하지만, 항상 두 애니메이션을 함께 실행하기를 원하기 때문에 애니메이션이 동일한 스토리보드 의 일부가 될 수 있습니다.

애니메이션은 형식이 동일하거나 동일한 개체를 대상으로 할 필요가 없습니다. 기간이 다를 수 있으며 속성 값을 공유할 필요가 없습니다.

부모 Storyboard 가 실행되면 내의 각 애니메이션도 실행됩니다.

Storyboard 클래스에는 실제로 애니메이션 형식과 동일한 애니메이션 속성이 많이 있습니다. 둘 다 Timeline 기본 클래스를 공유하기 때문입니다. 따라서 Storyboard 에는 RepeatBehavior 또는 BeginTime이 있을 수 있습니다. 일반적으로 Storyboard에서 이러한 행동을 설정하지 않지만, 포함된 모든 애니메이션에 그 동작을 원할 경우에는 그렇게 합니다. 일반적으로 Storyboard에 설정된 Timeline 속성은 모든 자식 애니메이션에 적용됩니다. 설정을 해제하면 Storyboard 에 포함된 애니메이션의 가장 긴 기간 값에서 계산되는 암시적 기간이 있습니다. 스토리보드에서 자식 애니메이션 중 하나보다 짧은 기간을 명시적으로 설정하면 애니메이션이 잘려서 일반적으로 바람직하지 않습니다.

스토리보드에는 동일한 개체에서 동일한 속성을 대상으로 지정하고 애니메이션을 적용하려는 두 개의 애니메이션이 포함될 수 없습니다. 이 작업을 시도하면 스토리보드가 실행하려고 할 때 런타임 오류가 발생합니다. 이 제한은 의도적으로 다른 BeginTime 값 및 기간 때문에 애니메이션이 시간에 겹치지 않는 경우에도 적용됩니다. 단일 스토리보드의 동일한 속성에 더 복잡한 애니메이션 타임라인을 적용하려는 경우 이를 수행하는 방법은 키 프레임 애니메이션을 사용하는 것입니다. 키프레임 및 이징 함수 애니메이션을 참조하십시오.

애니메이션 시스템은 여러 스토리보드에서 입력된 경우 속성 값에 둘 이상의 애니메이션을 적용할 수 있습니다. 스토리보드를 동시에 실행하기 위해 이 동작을 의도적으로 사용하는 것은 일반적이지 않습니다. 그러나 컨트롤 속성에 적용하는 앱 정의 애니메이션이 이전에 컨트롤의 시각적 상태 모델의 일부로 실행된 애니메이션의 HoldEnd 값을 수정할 수 있습니다.

스토리보드를 리소스로 정의

Storyboard는 애니메이션 개체를 배치하는 컨테이너입니다. 일반적으로 Storyboard를 페이지 수준 리소스 또는 Application.Resources에서 애니메이션 효과를 주려는 개체에 사용할 수 있는 리소스로 정의합니다.

다음 예제에서는 Storyboard가 루트 페이지의 키 리소스인 페이지 수준 리소스 정의에 이전 예제 Storyboard를 포함하는 방법을 보여 줍니다. x:Name 특성을 확인합니다. 이 특성은 XAML 및 코드의 다른 요소가 나중에 Storyboard를 참조할 수 있도록 Storyboard 의 변수 이름을 정의하는 방법입니다.

<Page ...>
  <Page.Resources>
    <!-- Storyboard resource: Animates a rectangle's opacity. -->
    <Storyboard x:Name="myStoryboard">
      <DoubleAnimation
        Storyboard.TargetName="MyAnimatedRectangle"
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:1"/>
    </Storyboard>
  </Page.Resources>
  <!--Page root element, UI definition-->
  <Grid>
    <Rectangle x:Name="MyAnimatedRectangle"
      Width="300" Height="200" Fill="Blue"/>
  </Grid>
</Page>

page.xaml 또는 app.xaml과 같은 XAML 파일의 XAML 루트에서 리소스를 정의하는 것은 XAML에서 키 지정된 리소스를 구성하는 방법에 대한 일반적인 방법입니다. 리소스를 별도의 파일로 팩터링하고 앱 또는 페이지에 병합할 수도 있습니다. 자세한 내용은 ResourceDictionary 및 XAML 리소스 참조를 참조하세요.

비고

Windows 런타임 XAML은 x:Key 특성 또는 x:Name 특성을 사용하여 리소스를 식별할 수 있습니다. X:Name 특성을 사용하는 것이 스토리보드에 더 일반적입니다. 결국에는 변수 이름으로 참조하여 Begin 메서드를 호출하고 애니메이션을 실행할 수 있기 때문입니다. x:Key 특성을 사용하는 경우 Item 인덱서와 같은 ResourceDictionary 메서드를 사용하여 키 리소스로 검색한 다음 검색된 개체를 Storyboard로 캐스팅하여 Storyboard 메서드를 사용해야 합니다.

시각적 상태에 대한 스토리보드

또한 컨트롤의 시각적 모양에 대한 시각적 상태 애니메이션을 선언할 때 스토리보드 단위 내에 애니메이션을 배치합니다. 이 경우 정의한 Storyboard 요소는 Style에 더 깊이 중첩된 VisualState 컨테이너(키 지정 리소스인 Style)로 이동합니다. 이 경우 VisualStateManager가 호출할 수 있는 대상 이름이 있는 VisualState이므로 Storyboard에 대한 키나 이름이 필요하지 않습니다. 컨트롤의 스타일은 종종 페이지 또는 앱 Resources 컬렉션에 배치되지 않고 별도의 XAML ResourceDictionary 파일로 고려됩니다. 자세한 내용은 시각적 상태에 대한 스토리보드 애니메이션을 참조하세요.

종속 애니메이션 및 독립 애니메이션

이 시점에서 애니메이션 시스템의 작동 방식에 대한 몇 가지 중요한 사항을 소개해야 합니다. 특히 애니메이션은 Windows 런타임 앱이 화면에 렌더링되는 방법 및 렌더링에서 처리 스레드를 사용하는 방법과 기본적으로 상호 작용합니다. Windows 런타임 앱에는 항상 기본 UI 스레드가 있으며, 이 스레드는 현재 정보로 화면을 업데이트합니다. 또한 Windows 런타임 앱에는 레이아웃이 표시되기 직전에 미리 계산하는 데 사용되는 컴퍼지션 스레드가 있습니다. UI에 애니메이션 효과를 주면 UI 스레드에 많은 작업이 발생할 수 있습니다. 시스템은 각 새로 고침 사이에 상당히 짧은 시간 간격을 사용하여 화면의 넓은 영역을 다시 그려야 합니다. 애니메이션 속성의 최신 속성 값을 캡처하는 데 필요합니다. 주의하지 않으면 애니메이션으로 UI 응답성이 저하되거나 동일한 UI 스레드에 있는 다른 앱 기능의 성능에 영향을 줄 위험이 있습니다.

UI 스레드 속도가 느려질 위험이 있다고 판단되는 다양한 애니메이션을 종속 애니메이션이라고 합니다. 이 위험이 적용되지 않는 애니메이션은 독립적인 애니메이션입니다. 종속 애니메이션과 독립 애니메이션의 구분은 앞에서 설명한 대로 애니메이션 형식(DoubleAnimation 등)에 의해서만 결정되는 것이 아닙니다. 대신 애니메이션을 적용하는 특정 특성과 컨트롤의 상속 및 구성과 같은 기타 요소에 따라 결정됩니다. 애니메이션이 UI를 변경하더라도 애니메이션이 UI 스레드에 미치는 영향을 최소화하고 대신 컴퍼지션 스레드에서 독립 애니메이션으로 처리할 수 있는 상황이 있습니다.

애니메이션은 다음과 같은 특징이 있는 경우 독립적입니다.

경고

애니메이션을 독립적으로 처리하려면 명시적으로 설정 Duration="0"해야 합니다. 예를 들어 이 XAML에서 제거 Duration="0" 하면 프레임의 KeyTime 이 "0:0:0"인 경우에도 애니메이션이 종속된 것으로 처리됩니다.

<Storyboard>
  <DoubleAnimationUsingKeyFrames
    Duration="0"
    Storyboard.TargetName="Button2"
    Storyboard.TargetProperty="Width">
    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="200"/>
  </DoubleAnimationUsingKeyFrames>
</Storyboard>

애니메이션이 이러한 조건을 충족하지 않는 경우 종속 애니메이션일 수 있습니다. 기본적으로 애니메이션 시스템은 종속 애니메이션을 실행하지 않습니다. 따라서 개발 및 테스트 과정에서 애니메이션이 실행되고 있지 않을 수도 있습니다. 이 애니메이션은 계속 사용할 수 있지만 이러한 각 종속 애니메이션을 구체적으로 사용하도록 설정해야 합니다. 애니메이션을 사용하도록 설정하려면 애니메이션 개체의 EnableDependentAnimation 속성을 true로 설정합니다. (애니메이션을 나타내는 각 Timeline 하위 클래스는 속성의 구현이 다르지만 모두 이름이 지정 EnableDependentAnimation됩니다.)

앱 개발자에게 종속 애니메이션을 사용하도록 설정해야 하는 요구 사항은 애니메이션 시스템과 개발 환경의 의식적인 디자인 측면입니다. 개발자는 애니메이션에 UI의 응답성에 대한 성능 비용이 있다는 것을 알고 있어야 합니다. 제대로 수행되지 않는 애니메이션은 본격적인 앱에서 격리 및 디버그하기 어렵습니다. 따라서 앱의 UI 환경에 실제로 필요한 종속 애니메이션만 켜는 것이 좋습니다. 많은 주기를 사용하는 장식 애니메이션으로 인해 앱의 성능을 너무 쉽게 손상시키고 싶지 않았습니다. 애니메이션에 대한 성능 팁에 대한 자세한 내용은 애니메이션 및 미디어 최적화를 참조하세요.

앱 개발자는 EnableDependentAnimation 이 true인 경우에도 항상 종속 애니메이션을 사용하지 않도록 설정하는 앱 전체 설정을 적용하도록 선택할 수도 있습니다. Timeline.AllowDependentAnimations를 참조하세요.

팁 (조언)

Blend for Visual Studio 2019에서 애니메이션 창을 사용하는 경우 시각적 상태 속성에 종속 애니메이션을 적용하려고 할 때마다 디자이너에 경고가 표시됩니다. 경고는 빌드 출력 또는 오류 목록에 표시되지 않습니다. XAML을 직접 편집하는 경우 디자이너에 경고가 표시되지 않습니다. 런타임에 디버깅할 때, 출력 창의 디버그 출력은 애니메이션이 독립적이지 않아 건너뛰게 된다는 경고를 표시합니다.

애니메이션 시작 및 제어

지금까지 보여 준 모든 항목이 실제로 애니메이션을 실행하거나 적용하지는 않습니다. 애니메이션이 시작되고 실행될 때까지 XAML에서 애니메이션이 선언하는 값 변경은 대기 중이며 아직 발생하지 않습니다. 앱 수명 또는 사용자 환경과 관련된 애니메이션을 명시적으로 시작해야 합니다. 가장 간단한 수준에서는 스토리보드에서 해당 애니메이션의 부모인 Begin 메서드를 호출하여 애니메이션을 시작합니다. XAML에서 메서드를 직접 호출할 수 없으므로 애니메이션을 사용하도록 설정하기 위해 수행하는 작업은 코드에서 수행합니다. 이는 앱의 페이지 또는 구성 요소에 대한 코드 숨김이거나 사용자 지정 컨트롤 클래스를 정의하는 경우 컨트롤의 논리일 수 있습니다.

일반적으로 Begin 을 호출하고 애니메이션이 해당 기간 완료까지 실행되도록 합니다. 그러나 일시 중지, 다시 시작 및 중지 메서드를 사용하여 더 고급 애니메이션 컨트롤 시나리오에 사용되는 다른 API뿐만 아니라 런타임에 스토리보드 를 제어할 수도 있습니다.

무한히 반복되는 애니메이션이 포함된 스토리보드에서 을 호출하면 해당 애니메이션이 포함된 페이지가 언로드될 때까지 실행되거나, 특히 RepeatBehavior="Forever" 또는 중지를 호출합니다.

앱 코드에서 애니메이션 시작

애니메이션을 자동으로 시작하거나 사용자 작업에 응답할 수 있습니다. 자동 사례의 경우 일반적으로 로드 와 같은 개체 수명 이벤트를 사용하여 애니메이션 트리거 역할을 합니다. 로드된 이벤트는 이때 UI가 상호 작용할 준비가 되었으며 UI의 다른 부분이 로드 중이기 때문에 애니메이션이 처음에 잘리지 않기 때문에 사용하기에 좋은 이벤트입니다.

이 예제에서는 사용자가 사각형을 클릭할 때 애니메이션이 시작되도록 PointerPressed 이벤트가 사각형에 연결됩니다.

<Rectangle PointerPressed="Rectangle_Tapped"
  x:Name="MyAnimatedRectangle"
  Width="300" Height="200" Fill="Blue"/>

이벤트 처리기는 Storyboard 의 Begin 메서드를 사용하여 Storyboard(애니메이션)를 시작합니다.

myStoryboard.Begin();

myStoryboard().Begin();

애니메이션이 값 적용을 완료한 후 다른 논리를 실행하려면 Completed 이벤트를 처리할 수 있습니다. 또한 속성 시스템/애니메이션 상호 작용 문제를 해결하기 위해 GetAnimationBaseValue 메서드가 유용할 수 있습니다.

팁 (조언)

앱 코드에서 애니메이션을 시작하는 앱 시나리오를 코딩할 때마다 UI 시나리오에 대한 애니메이션 라이브러리에 애니메이션 또는 전환이 이미 있는지 다시 검토할 수 있습니다. 라이브러리 애니메이션을 사용하면 모든 Windows 런타임 앱에서 보다 일관된 UI 환경을 사용할 수 있으며 사용하기가 더 쉽습니다.

시각적 상태에 대한 애니메이션

컨트롤의 시각적 상태를 정의하는 데 사용되는 Storyboard 의 실행 동작은 앱이 스토리보드를 직접 실행하는 방법과 다릅니다. XAML의 시각적 상태 정의에 적용된 것처럼 Storyboard 는 포함하는 VisualState의 요소이며 전체 상태는 VisualStateManager API를 사용하여 제어됩니다. 포함된 VisualState가 컨트롤에서 사용될 때 애니메이션 값 및 타임라인 속성에 따라 모든 애니메이션이 실행됩니다. 자세한 내용은 시각적 상태에 대한 스토리보드를 참조하세요. 시각적 상태에서는 FillBehavior가 다르게 나타납니다. 시각적 상태가 다른 상태로 변경되면 새 시각적 상태가 속성에 새 애니메이션을 구체적으로 적용하지 않더라도 이전 시각적 상태에 의해 적용된 모든 속성 변경 내용과 해당 애니메이션이 취소됩니다.

Storyboard 및 EventTrigger

XAML에서 완전히 선언할 수 있는 애니메이션을 시작하는 한 가지 방법이 있습니다. 그러나 이 기술은 더 이상 널리 사용되지 않습니다. VisualStateManager 지원 이전의 WPF 및 초기 버전의 Silverlight의 레거시 구문입니다. 이 EventTrigger 구문은 가져오기/호환성을 위해 Windows 런타임 XAML에서 계속 작동하지만 FrameworkElement.Loaded 이벤트를 기반으로 하는 트리거 동작에 대해서만 작동합니다. 다른 이벤트를 트리거하려고 하면 예외가 발생하거나 컴파일에 실패합니다. 자세한 내용은 EventTrigger 또는 BeginStoryboard를 참조하세요.

XAML 부착 속성 애니메이션

일반적인 시나리오는 아니지만 XAML 연결된 속성에 애니메이션 효과를 적용할 수 있습니다. 연결된 속성의 내용과 작동 방식에 대한 자세한 내용은 연결된 속성 개요를 참조하세요. 연결된 속성을 대상으로 하려면 속성 이름을 괄호로 묶는 속성 경로 구문 이 필요합니다. 불연속 정수 값을 적용하는 ObjectAnimationUsingKeyFrames를 사용하여 Canvas.ZIndex와 같은 기본 제공 연결된 속성에 애니메이션 효과를 줄 수 있습니다. 그러나 Windows 런타임 XAML 구현의 기존 제한 사항은 사용자 지정 연결된 속성에 애니메이션을 적용할 수 없다는 것입니다.

더 많은 애니메이션 유형 및 UI에 애니메이션 효과를 주는 방법에 대한 학습을 위한 다음 단계

지금까지 우리는 두 값 사이를 애니메이션하며, 애니메이션 실행 중에 필요에 따라 값을 선형적으로 보간하는 사용자 지정 애니메이션을 보여주었습니다. 이를 From To//By 애니메이션이라고 합니다. 그러나 시작과 끝 사이에 속하는 중간 값을 선언할 수 있는 또 다른 애니메이션 형식이 있습니다. 이를 키 프레임 애니메이션이라고 합니다. 또한 From/To/ 애니메이션이나 키프레임 애니메이션에서 보간 논리를 변경할 수 있는 방법도 있습니다. 여기에는 이징 함수 적용이 포함됩니다. 이러한 개념에 대한 자세한 내용은 키 프레임 및 감속/가속 함수 애니메이션을 참조하세요.

WPF와의 차이점

WPF(Windows Presentation Foundation)에 익숙한 경우 이 섹션을 읽어 보세요. 그렇지 않으면 건너뛸 수 있습니다.

일반적으로 Windows 런타임 앱에서 스토리보드 애니메이션을 만드는 것은 WPF와 같습니다. 그러나 다음과 같은 여러 가지 중요한 차이점이 있습니다.

  • 스토리보드 애니메이션만이 UI에 시각적으로 애니메이션 효과를 주거나 앱 개발자가 가장 쉽게 애니메이션할 수 있는 방법은 아닙니다. 스토리보드 애니메이션을 사용하는 대신 테마 애니메이션 및 전환 애니메이션을 사용하는 것이 더 나은 디자인 사례인 경우가 많습니다. 이렇게 하면 애니메이션 속성 대상 지정의 복잡성을 가져오지 않고도 권장되는 UI 애니메이션을 빠르게 만들 수 있습니다. 자세한 내용은 XAML의 애니메이션을 참조하세요.
  • Windows 런타임에서 많은 XAML 컨트롤에는 테마 애니메이션 및 전환 애니메이션이 기본 제공 동작의 일부로 포함됩니다. 대부분의 경우 WPF 컨트롤에는 기본 애니메이션 동작이 없습니다.
  • 애니메이션 시스템에서 애니메이션이 UI에서 성능 저하를 일으킬 수 있다고 판단하는 경우 사용자가 만드는 모든 사용자 지정 애니메이션이 Windows 런타임 앱에서 기본적으로 실행될 수 있는 것은 아닙니다. 시스템에서 성능에 영향을 미칠 수 있다고 판단하는 애니메이션을 종속 애니메이션이라고 합니다. 애니메이션의 타이밍이 UI 스레드와 직접 연결되어 있기 때문에, 이로 인해 UI 스레드가 활성 사용자 입력 및 기타 업데이트를 처리하며 동시에 UI에 런타임 변경사항을 적용하려고 시도합니다. UI 스레드에서 광범위한 시스템 리소스를 사용하는 종속 애니메이션은 특정 상황에서 앱이 응답하지 않는 것처럼 보일 수 있습니다. 애니메이션이 레이아웃을 변경하거나 UI 스레드의 성능에 영향을 미칠 가능성이 있는 경우 애니메이션이 실행되는 것을 확인하기 위해 명시적으로 활성화해야 하는 경우가 많습니다. 이것이 바로 특정 애니메이션 클래스의 EnableDependentAnimation 속성입니다. 자세한 내용은 종속 애니메이션 및 독립 애니메이션을 참조하세요.
  • 사용자 지정 감속/가속 함수는 현재 Windows 런타임에서 지원되지 않습니다.
  • Last updated on