빠르고 유연한 애니메이션은 앱에 생동감을 불어넣습니다. Windows 8 Consumer Preview에서는 애니메이션이 사용자 경험의 필수 요소임을 알게 될 것입니다. PC에 로그인하는 순간 시작 메뉴의 항목이 미려한 애니메이션 효과로 사용자의 눈을 즐겁게 하고, 몰입형 앱을 시작하거나 시작 메뉴를 확대하면 애니메이션이 부드럽게 표현되어 사용자 경험이 한층 더 풍요로워집니다. 애니메이션은 사용자가 알 수 있도록 특정 동작의 결과로 화면에 나타나며, 이 시각적 피드백을 통해 사용자는 앱의 응답성에 대한 확신을 갖게 됩니다. 단순히 목록의 항목을 추가하거나 삭제하는 작업도 섬세한 애니메이션을 통해 유연하고 현대적이며 정보를 전달하도록 만들 수 있습니다(참조: Jensen Harris의 //build/ 컨퍼런스 세션, 약 25분).

이 짧은 비디오는 부드러운 애니메이션으로 더욱 풍부해진 UI를 보여 줍니다.


다른 미디어 플레이어로 보려면 이 비디오를 다운로드하십시오.
고화질 MP4 | 저화질 MP4

Windows 8에서는 애니메이션이 Metro 스타일의 개성을 살려 주는 주요 구성 요소이며, 이러한 개성을 사용자 고유의 앱에 적용할 수 있습니다.

다음은 이 글에서 다룰 내용입니다.

  1. 애니메이션 엔진에 대한 간략한 개요
  2. 애니메이션 라이브러리 사용 방법
  3. 사용자 지정 애니메이션 및 향상된 애니메이션 엔진 기능을 활용하는 방법
  4. Metro 스타일 앱에 애니메이션을 포함하는 방법에 대한 유용한 정보

독립 애니메이션

Windows 8에 대한 사용자 경험에서 많은 비중을 차지하는 것은 독립 애니메이션이라는 기능을 통해 달성되는 부드럽고 완벽한 애니메이션입니다. 독립 애니메이션은 핵심 UI 논리를 실행하는 스레드에서 독립적으로 실행되는 애니메이션입니다(종속 애니메이션은 UI 스레드에서 실행됨). Windows 8에서는 애니메이션된 요소의 대부분이 별도의 스레드에서 실행되는 컴퍼지션 엔진에 의해 작성됩니다. 이 엔진의 작업은 CPU에서 GPU로 오프로드됩니다. 컴퍼지션을 UI가 아닌 스레드로 이동하면 애니메이션이 UI 스레드(예: JavaScript 코드 실행 또는 동기화 작업)에서 작동하는 앱에 의해 차단되거나 지터가 발생하지 않습니다. GPU 하드웨어는 시각적으로 풍부한 그래픽을 제공하도록 최적화되어 있으며 비디오 메모리 리소스를 사용합니다. GPU를 사용하면 성능이 대폭 향상되어 애니메이션이 원활하고 일관된 프레임 속도로 실행될 수 있습니다.

애니메이션에서 독립 애니메이션 기능의 장점을 활용하기 위해 마크업을 추가할 필요는 없습니다. 시스템에서 애니메이션을 독립적으로 작성할 수 있는지 확인해 주기 때문입니다. 앱의 애니메이션이 뛰어난 성능으로 부드럽게 실행되도록 하려면 개발자 센터의 독립 애니메이션 지침을 따라야 합니다. 이 지침은 사용자 지정 애니메이션을 만들 때 특히 유용합니다(이 글의 뒷부분 참조).

이제 애니메이션 라이브러리에서 제공하는 Metro 스타일 애니메이션을 먼저 활용하여 더욱 멋진 앱을 만드는 방법을 알아보겠습니다.

애니메이션 라이브러리

애니메이션 라이브러리는 플랫폼의 독립 애니메이션 기능을 활용하도록 특별히 제작된 Metro 스타일 애니메이션 제품군입니다. 이러한 애니메이션은 Windows UI 전체에서 사용되며, Metro 앱에 사용될 수도 있습니다. 이 라이브러리가 선뜻 상상이 되지 않는다면 즉시 사용할 수 있고 빠르고 유연하게 설계된 애니메이션 팔레트라고 생각하면 됩니다.

앱 개발자는 Windows 8의 모습과 느낌을 가진 애니메이션을 만드는 데 시간을 허비하고 싶지 않기 때문에 이 기능이 매우 유용할 수밖에 없습니다. 애니메이션 라이브러리를 사용하는 순간 앱은 Windows 환경의 일부가 됩니다.

이 라이브러리는 Windows UI 자체를 애니메이션합니다. 이러한 애니메이션은 깔끔하고 목적이 뚜렷합니다. 우리는 사용자가 Windows UI와 상호 작용할 때 빠르고 유연한 피드백을 얻을 수 있도록 하기 위해 타이밍 및 애니메이션 곡선이 정확하게 구현되는 데 중점을 두었습니다. 따라서 앱에서 애니메이션을 설계할 때 먼저 애니메이션 라이브러리를 살펴보고 요구에 가장 적합한 애니메이션을 찾는 것이 좋습니다.

HTML을 사용하든, XAML을 사용하든 관계없습니다. 애니메이션 라이브러리에서는 올바른 애니메이션을 사용할 수 있는 방법을 제공하며, 빠르고 유연한 UI를 보장합니다. 이제 몇 가지 예를 살펴보겠습니다.

JavaScript 예

JavaScript/HTML Personality Library는 CSS3 애니메이션 및 전환을 기반으로 구축되었습니다. 이러한 애니메이션은 앱 탐색, 콘텐츠 전환 및 Windows 8 컨트롤에 사용됩니다.

단순하지만 멋진 애니메이션은 EnterPage 애니메이션입니다. 이 애니메이션은 콘텐츠를 처음 표시하거나 실행 중인 앱에서 페이지 간을 전환할 때 사용됩니다.

다음 예에서는 이 간단한 API를 앱에서 사용하는 방법을 보여 줍니다.

HTML

<html>
<body>
<div id="input">
Some content here
</div>
<button onclick="runAnimation()", Run animation&lt;/button>
</body>
</html>

CSS

<style>
#input
{
background-color:blue;
}
</style>

JavaScript

<script>       
function runAnimation(){
enterPage = WinJS.UI.Animation.enterPage(input);
}
</script>

XAML 예

XAML의 경우 기본 제공되는 애니메이션 라이브러리에 테마 전환 및 테마 애니메이션 등 두 가지 개념이 포함되어 있습니다.

테마 전환은 일반적으로 화면의 시각적 요소가 로드 또는 언로드되거나 위치가 변경될 때 이를 애니메이션하는 데 사용됩니다. XAML 레이아웃 시스템은 페이지의 레이아웃 변경에 따라 이러한 기본 제공 애니메이션을 트리거합니다.

이러한 레이아웃 트리거에는 다음이 포함됩니다.

  1. 페이지 또는 시각적 트리에 UIElement 추가
  2. 페이지 또는 시각적 트리에서 UIElement 제거
  3. 페이지 또는 시각적 트리에서 위치나 크기를 업데이트할 수 있는 기존 UIElement의 Updating 레이아웃 속성

특정 테마 전환은 레이아웃 트리거의 전부 또는 일부에 응답할 수 있습니다. EntranceThemeTransition은 트리거 1에 응답하여 UIElement가 페이지 또는 시각적 트리에 추가될 때 이를 애니메이션합니다. 다음 예에서는 모든 그리드의 하위 그리드가 EntranceThemeTransition을 사용하여 애니메이션됩니다.

<Grid>
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>

<!-- Grid's children go here -->
</Grid>

테마 애니메이션은 일반적으로 사용자가 조작할 때 실행되는 기본 제공 애니메이션으로, 이를 실행하려면 수동으로 트리거해야 합니다. 테마 애니메이션을 실행하는 가장 간단한 방법은 Storyboard 클래스의 Begin 메서드를 호출하는 것입니다. VisualStateManager(VSM)에 익숙한 경우 컨트롤의 시각적 상태 내에 테마 애니메이션을 둘 수 있습니다. 다음 예에서는 Begin 메서드를 사용하여 테마 애니메이션을 트리거하는 방법을 보여 줍니다.

XAML

<Grid Background="{StaticResource ApplicationPageBackgroundBrush}">
<Grid.Resources>
<Storyboard x:Name="downAnimation">
<TapDownThemeAnimation TargetName="rectangle"/>
</Storyboard>
<Storyboard x:Name="upAnimation">
<TapUpThemeAnimation TargetName="rectangle"/>
</Storyboard>
</Grid.Resources>

<Rectangle x:Name="rectangle"
PointerPressed="Rectangle_PointerPressed"
PointerReleased="rectangle_PointerReleased"/>
</Grid>

코드


private void Rectangle_PointerPressed(object sender, PointerEventArgs e)
{
downAnimation.Begin();
}

private void rectangle_PointerReleased(object sender, PointerEventArgs e)
{
upAnimation.Begin();
}

사용자 지정 애니메이션

애니메이션 라이브러리는 강력하지만 그렇다고 모든 시나리오에 사용할 수 있는 것은 아닙니다. 애니메이션 라이브러리를 적용할 수 없는 시나리오의 경우 시스템에서 독립적으로 실행되는 사용자 고유의 사용자 지정 애니메이션을 만들 수 있습니다(사용자 고유의 애니메이션을 만드는 방법에 대한 디자인 지침은 애니메이션 참조). 사용자 지정 애니메이션을 만들 때는 UI 스레드에서 실행되지 않도록 각별히 주의해야 합니다.

종속 애니메이션은 앱에서 계속 사용할 수 있습니다. 사용자 지정 애니메이션의 경우 독립 애니메이션 지침을 따르는 것이 좋지만 시나리오에 독립적으로 실행될 수 없는 애니메이션이 필요한 경우 여전히 종속적으로 애니메이션을 실행할 수 있습니다.

다음 예는 애니메이션 라이브러리에 없는 3D 비아핀 독립 애니메이션을 사용한 경우입니다.

JavaScript

JavaScript 앱의 경우 IE10의 Microsoft 웹 플랫폼에 새로 도입된 CSS3 애니메이션전환 구문을 통해 사용자 지정 애니메이션의 독립 애니메이션 기능에 액세스할 수 있습니다. 독립 애니메이션은 재배치 또는 다시 렌더링이 필요 없는 속성만 지원합니다. 즉, JavaScript 앱의 독립 애니메이션은 CSS3 2D 및 3D 변형 또는 불투명도를 대상으로 하는 CSS 애니메이션/전환에만 적용 및 지원됩니다. 다른 CSS 속성의 애니메이션은 UI 스레드에서 종속적으로 실행됩니다.

HTML 사용자 지정 애니메이션의 예

다음 예에서는 간단한 CSS 3D 플립을 보여 줍니다.

HTML

<html>
<head>
<title>Html animations CSS3</title>
</head>
<body>
<div id="parent">
<div id="box" onclick="className='move'" >Click me for CSS Change!</div>
</div>
</body>
</html>

CSS

<style>
body
{
background-color:gray;
}
#box
{
position: relative;
background-color:green;
width:300px;
height:300px
}

#box.move
{
-ms-transition-property: -ms-transform;
-ms-transition-duration: 1s;
-ms-transition-timing-function: ease-in;
-ms-transform: rotateY(-180deg);
-ms-transform-origin: 50% 50%;
}

#parent{-ms-perspective: 600px;}
</style>

XAML

XAML 앱의 경우 속성의 특정 하위 집합이 독립적으로 지원됩니다(자세한 내용은 Windows 8 개발자 센터 참조). 이러한 속성에는 캔버스 위치 지정, 불투명도, 렌더링 변형, 투영, 클립 및 색상이 포함됩니다.

속성을 애니메이션하면 방금 살펴본 목록 외에 종속 애니메이션이 발생합니다. 즉, 애니메이션이 UI 스레드에서 실행되어 결함이 발생할 위험이 있습니다. 빠르고 유연한 UI 개발을 촉진하기 위해 XAML은 명시적으로 종속 애니메이션을 사용하지 않는 한 독립 애니메이션만 실행합니다. 종속 애니메이션을 실행하려면 시간 표시 막대에서 EnableDependentAnimation 속성을 사용하면 됩니다. 여기에는 False로 설정하여 앱의 모든 종속 애니메이션을 사용하지 않도록 설정할 수 있는 전역 정적 AllowDependentAnimations 속성이 있습니다.

XAML 사용자 지정 애니메이션의 예

다음 예에서는 시스템에서 독립적으로 실행하는 PlaneProjection의 속성을 애니메이션하는 방법을 보여 줍니다. 애니메이션 개념 및 구문은 다른 XAML 기술과 정확히 동일하지만 Windows 8에서는 독립적으로 실행되어 앱의 성능 특성을 향상시키도록 개선되었습니다.

<Grid>
<Grid.Resources>
<Storyboard x:Name="customAnimation">
<DoubleAnimation Storyboard.TargetProperty="RotationY" Storyboard.TargetName="projection"
Duration="0:0:1" To="-180" />
</Storyboard>
</Grid.Resources>

<Grid Background="Red" Height="400" Width="600" PointerPressed="Grid_PointerPressed">
<Grid.Projection>
<PlaneProjection x:Name="projection"/>
</Grid.Projection>

<!-- Grid's children go here -->

</Grid>
</Grid>
 
private void Grid_PointerPressed(object sender, PointerEventArgs e)
{
customAnimation.Begin();
}

독립 애니메이션의 모범 사례

다른 모든 시스템과 마찬가지로 독립 애니메이션에도 몇 가지 제한 사항이 있습니다. 이러한 제한 사항은 HTML 플랫폼과 XAML 플랫폼에서 차이가 있지만 일반적으로 다음과 같은 경우를 제외하고 독립 애니메이션을 실행할 수 있습니다.

  1. 레이아웃에 영향을 주는 속성 애니메이션: CSS 너비와 같은 이러한 속성은 재배치를 트리거하며 독립적으로 지원되지 않습니다.
  2. 독립 애니메이션 지침을 따르지 않는 애니메이션 요소 상태: 지침을 따르지 않는 독립 애니메이션(애니메이션 참조)은 시스템에서 지원되지 않습니다.
  3. 시스템 리소스 부족: 시스템의 리소스(예: 비디오 메모리)가 부족하면 애니메이션이 종속 컴퍼지션으로 대체됩니다.

다음은 독립 애니메이션에 대한 몇 가지 지침입니다.

JavaScript

  1. 무한 애니메이션 방지: 독립 애니메이션을 사용하는 경우 GPU에서 비디오 메모리를 할당합니다. CSS에서는 '–ms-iteration-count: infinite'를 지정할 수 있습니다. 이 속성 값을 설정하면 지정된 애니메이션이 영구적으로 계속 실행됩니다. 즉, 애니메이션을 중지할 때까지 앱에서 애니메이션 요소의 비디오 메모리를 유지합니다. 무한 애니메이션을 중지하려면 '–ms-animation-name' 값을 제거하거나 애니메이션 요소의 표시 속성을 'display: none'으로 변경하면 됩니다.
  2. CSS 가시성 속성 전환 방지: 독립 애니메이션 요소를 'visibility: hidden'으로 설정한 다음 'visibility: visible'로 다시 설정한 경우 이 요소는 더 이상 종속적이지 않습니다. 애니메이션은 계속되지만 이제 UI 스레드에서 작성됩니다.
  3. 독립 애니메이션 요소를 맨 위에 배치: 독립 컴퍼지션은 GPU를 사용하므로 시스템에서 독립적으로 컴퍼지션할 수 있는 양에 제한이 있습니다. 독립 애니메이션이 다른 UI 요소 뒤에 있는 경우에는 상단의 UI 요소도 독립적으로 작성됩니다. 이로 인해 비디오 메모리가 불필요하게 소모됩니다. 이 문제를 방지하려면 모든 독립 애니메이션을 다른 모든 UI 요소 위에 두어야 합니다. 독립 애니메이션이 스택에서 매우 느리게 실행되는 경우 종속 애니메이션으로 대체될 위험이 있습니다.

    독립 애니메이션을 맨 위에 두는 방법은 다음과 같습니다.

    • 독립 애니메이션 요소에 높은 z 인덱스를 제공합니다.
    • 음수가 아닌 z 인덱스를 사용하여 요소를 독립적으로 애니메이션합니다.
    • 독립 애니메이션을 다른 요소와 중첩하지 않습니다.
  4. 큰 표면 및 너무 많은 독립 애니메이션 사용 금지: 독립 애니메이션을 맨 위에 배치할 때와 마찬가지로 애니메이션 요소의 크기와 한 번에 애니메이션할 요소 수를 알아야 합니다. 독립 애니메이션은 시스템의 GPU에 따라 제한됩니다. 이 한도를 넘으면 애니메이션이 종속 UI 스레드로 대체됩니다. 애니메이션이 부드럽지 않은 경우 IsIndependentlyComposed API를 사용하여 요소를 쿼리할 수 있습니다.
  5. IsIndependentlyComposed API 사용: 이 API를 사용하여 HTML 요소가 UI 스레드에서 독립적으로 작성되는지 여부를 확인할 수 있습니다. 이 속성은 독립 애니메이션 요소, 하위 스크롤러 및 독립 애니메이션 요소와 겹치는 요소에 대해 True를 반환합니다.

XAML

  1. 높이 및 너비 애니메이션 요소 배율 지정: UIElementHeight 및/또는 Width 속성을 애니메이션하면 종속 애니메이션이 실행됩니다. 그 이유는 UI 스레드에서만 실행될 수 있는 레이아웃 변경이 이러한 속성에 필요하기 때문입니다. Height 또는 Width를 애니메이션할 경우 유사한 효과를 얻으려면 컨트롤의 배율을 애니메이션하면 됩니다. ScaleTransform은 독립적으로 애니메이션되므로 이 접근 방법은 더 나은 프레임 속도를 제공합니다.
  2. 캐시 콘텐츠 애니메이션 금지: 요소의 CacheMode 속성(UIElement.CacheMode)을 BitmapCache로 설정하면 시각적 하위 트리의 모든 애니메이션이 독립적으로 실행됩니다. 이는 모든 프레임의 전체 캐시를 다시 만들어야 하기 때문입니다. 이 문제를 해결하려면 캐시된 콘텐츠를 애니메이션하지 않으면 됩니다.
  3. 진행률 컨트롤의 무한 애니메이션 사용 금지: ProgressRingProgressBar에는 컨트롤이 페이지에 표시되지 않은 경우에도 계속 실행되어 CPU가 절전 모드 또는 유휴 모드로 전환되지 못하게 하는 무한 애니메이션이 있습니다. 각 컨트롤을 표시하지 않을 경우 ProgressRing.IsActiveProgressBar.IsIndeterminate 속성을 False로 설정하는 것이 좋습니다.

결론

지금까지 Windows 8 앱에 독립 애니메이션을 적용하여 빠르고 유연한 사용자 경험을 구현하는 방법을 살펴보았습니다. 이러한 내용을 바탕으로 Windows 8용 Metro 스타일 앱을 제작할 때 애니메이션 라이브러리 및 UI 스레드와 독립적으로 실행되는 사용자 지정 애니메이션을 활용하여 멋지고 놀라운 사용자 경험을 제공할 수 있기를 바랍니다.

- Windows 프로그램 관리자,
    Angelina Gambo 및 Hamid Mahmood