언어: HTML | XAML

앱에서 애니메이션 사용(HTML)

Applies to Windows and Windows Phone

JavaScript 앱에서 애니메이션을 사용하여 다른 Windows 앱과 일치하는 빠르고 유연한 사용자 환경을 제공하세요. 애니메이션은 UI 상태 전환을 제공하여 앱이 사용자 입력에 반응하는 것처럼 보이게 합니다. 애니메이션은 사용자에게 유용한 시각 신호를 제공하지만 앱의 작업을 방해하거나 주의를 분산시키지 않습니다.

이 항목에서 설명한 여러 개념을 보여 주는 샘플을 다운로드하려면 HTML 애니메이션 라이브러리 샘플(영문)을 참조하세요. 이 항목의 코드 예제는 해당 샘플에서 가져온 것입니다.

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

애니메이션 소스

일부 애니메이션은 Windows 컨트롤에 빌드되었습니다. 이러한 컨트롤을 사용하면 추가 코딩 없이 해당 애니메이션을 가져옵니다. 그러나 애니메이션 라이브러리를 사용할 수도 있습니다. 애니메이션 라이브러리를 사용할 경우 Windows 디자인의 모양과 느낌을 유지하는 동시에 앱에 맞는 사용자 지정 애니메이션을 만들 수 있습니다.

기본 제공 애니메이션 사용

일부 애니메이션은 Windows의 일부로 자동으로 제공됩니다.

Windows 시스템 애니메이션

일부 시스템 제공 애니메이션은 모든 앱 창에 적용됩니다. 앱에서 이러한 시스템 애니메이션을 사용하기 위해 명시적으로 작업을 수행하지 않아도 됩니다. 그러나 여기서 설명하는 몇 가지 주요 사항을 알아야 합니다.

앱 실행

앱 실행에는 두 가지 애니메이션이 사용됩니다. 첫 번째 애니메이션은 시작 화면에서 선택할 때부터 시작 화면이 표시될 때까지의 앱 실행을 보여 줍니다. 두 번째 애니메이션은 시작 화면에서 앱 배경으로 크로스페이드됩니다. 시작 화면이 사라지면 앱에서 고유한 애니메이션을 실행하여 첫 번째 콘텐츠 페이지를 표시하는 것이 좋습니다.

회전 및 크기 조정 변경

크기 또는 방향 변경에 따라 앱의 레이아웃이 업데이트되는 경우 시스템 애니메이션은 전환을 매끄럽게 만듭니다.

화상 키보드 시작 및 종료

앱의 텍스트 입력 컨트롤이 포커스를 받으면 화상 키보드가 자동으로 나타납니다. 기본적으로, 필요한 경우 앱의 콘텐츠가 자동으로 스크롤되어 입력 컨트롤이 화면에 표시되도록 합니다. 앱에 특별한 작업이 필요하지는 없습니다.

Windows 컨트롤 및 HTML 컨트롤

다음 컨트롤에는 애니메이션이 포함되어 있습니다. 가능한 경우 이러한 컨트롤을 사용하는 것이 좋습니다.

또한 단추, 확인란, 드롭다운 메뉴 등의 일반적인 HTML 양식 컨트롤을 사용하는 경우 클릭 또는 가리키기 같은 사용자 동작에 대한 응답으로 애니메이션을 제공하지 않아도 됩니다. 이 컨트롤에는 필요한 애니메이션이 이미 포함되어 있거나, 색상 변경 또는 다른 시각적 표시기를 사용하여 사용자 피드백을 제공하기 때문에 애니메이션이 필요하지 않습니다.

이러한 모든 요소의 스타일은 Microsoft Visual Studio 프로젝트 템플릿의 WinJS CSS 및 UI.js 파일을 통해 자동으로 적용됩니다.

애니메이션 라이브러리 사용

애니메이션 라이브러리를 사용하여 앱에 사용자 지정 애니메이션을 추가할 수 있습니다. 애니메이션 라이브러리는 Windows 및 Windows Phone 동작 디자인의 특성을 포함하는 애니메이션 모음입니다. 개발자는 WinJS.UI.Animation 네임스페이스를 구성하는 함수를 통해 해당 앱에서 이러한 애니메이션을 사용할 수 있습니다. 각 애니메이션에 대한 동영상 및 지침을 포함하여 애니메이션 라이브러리에 대한 자세한 내용은 UI에 애니메이션 효과 주기를 참조하세요.

다음과 같은 경우 고유한 애니메이션을 제공해야 합니다.

  • 전체 컨트롤을 이동하려는 경우
  • 앱의 콘텐츠를 변경하려는 경우
  • 앱에서 페이지 간에 이동하려는 경우

애니메이션 라이브러리를 통해 제공된 모든 애니메이션은 CSS 애니메이션 및 CSS 전환을 사용하여 구현됩니다. 애니메이션 라이브러리 애니메이션은 "opacity" 및 "transform" CSS 속성에 애니메이션 효과를 줍니다.

애니메이션 라이브러리 함수에 element 및 offset 매개 변수 사용

많은 애니메이션 라이브러리 함수에는 동일한 방식으로 사용되는 동일한 매개 변수가 포함되어 있습니다.

element

많은 애니메이션 라이브러리 함수는 DOM(문서 개체 모델) 요소를 애니메이션 대상으로 사용합니다. 이 매개 변수는 다음과 같은 방식으로 표시될 수 있습니다.

  • 특수 값 "undefined"로. 애니메이션에 해당 대상이 없음을 나타냅니다.
  • 단일 개체로
  • 요소의 JavaScript 배열로(비어 있을 수 있음)
  • NodeList로(예: querySelectorAll의 결과)
  • HTMLCollection으로

offset

offset 매개 변수는 전환을 포함하는 전환 및 요소 애니메이션에 포함됩니다. 이 애니메이션은 요소를 오프셋 위치에서 최종 위치로 또는 현재 위치에서 오프셋 위치로 이동합니다.

일부 애니메이션에는 null 또는 undefined를 오프셋 인수로 전달하거나 인수를 생략하면 사용할 수 있는 권장 오프셋이 있습니다. 가능한 경우 이러한 기본 오프셋을 사용해야 하며, 다음과 같은 이점이 있습니다.

  • 향상된 애니메이션 성능
  • 오른쪽에서 왼쪽 앱의 자동 미러링
  • 디자이너가 권장하는 변환 거리(앱 크기가 조정될 경우 해당하는 애니메이션에서 자동으로 조정됨)

디자인 예외가 필요한 특별한 이유가 없다면 다음 애니메이션은 항상 기본 오프셋을 사용해야 합니다.

다른 애니메이션 라이브러리 애니메이션의 경우 특정 UI에 따라 앱별로 오프셋을 지정할 수 있습니다. 다음 함수에는 모두 특정 오프셋을 제공하지 않을 경우 사용되는 기본 오프셋이 있지만, 일반적으로 앱의 디자인에 따라 오프셋을 지정합니다.

다음과 같은 여러 형식으로 offset 매개 변수를 제공할 수 있습니다.

  • 특수 값 "undefined"으로. 매개 변수 값을 생략하여 암시적으로 또는 호출에서 명시적으로 지정할 수 있습니다. undefined 값은 애니메이션의 기본 오프셋이 사용됨을 나타냅니다.
  • 다음 형식의 단일 JavaScript 개체로

    { top: string, left: string, rtlflip: true | false }

    예를 들면 다음과 같습니다.

    { top: "12px", left: "0px", rtlflip: true }

    개체에는 애니메이션 시작 부분에 적용되는 오프셋을 나타내는 top 및 left라는 속성이 있어야 합니다. 유효한 모든 CSS 단위를 사용하여 오프셋을 표시할 수 있습니다. 이 형식에서는 오프셋이 애니메이션에 관련된 모든 요소에 적용됩니다.

    rtlflip 매개 변수는 값을 오른쪽에서 왼쪽 정렬로 전환합니다. left 매개 변수에 영향을 주고 부호를 변경합니다. 예를 들어 10px는 -10px가 됩니다. 이 매개 변수는 옵션이며 생략할 수 있습니다. 생략할 경우 기본값은 false입니다.

  • 위에서 설명한 {top: ..., left: ..., rtlflip: ...} 개체의 JavaScript 배열로(비어 있을 수 있음). 이 경우 배열의 각 개체가 애니메이션의 단일 요소에 지정된 순서대로 적용됩니다. 첫 번째 개체는 첫 번째 요소에 적용되고, 두 번째 개체는 두 번째 요소에 적용됩니다. 요소 수가 이 배열에 포함된 개체 수보다 많을 경우 배열의 마지막 요소가 나머지 요소에 모두 적용됩니다. 일반적으로 오프셋 레코드 배열이 필요한 애니메이션은 dragBetweenEnter뿐입니다. 다른 애니메이션의 경우 일반적으로 모든 요소에서 사용할 단일 오프셋 레코드만 전달하는 것이 좋습니다.

Promise 반환 값

모든 애니메이션 라이브러리 애니메이션의 반환 값은 Promise 개체입니다. 이 개체의 done 또는 then 메서드를 사용하여 애니메이션 완료 시기를 추적할 수 있습니다. Promise 개체는 실행 중인 애니메이션을 취소할 수 있는 cancel 메서드도 제공합니다.

애니메이션 형식

애니메이션 라이브러리에 있는 애니메이션은 세 가지 형식, 즉 요소 애니메이션, 요소 전환 또는 레이아웃 전환 중 하나입니다. 각 형식은 서로 다른 구현 패턴을 사용합니다.

요소 애니메이션

요소 애니메이션은 CSS 애니메이션으로 구현됩니다. 요소 애니메이션은 요소의 상태를 변경하지 않으며, 현재 상태 위의 애니메이션입니다. 예를 들어 showPanel 애니메이션은 작업 창 등의 패널을 화면 가장자리에서 밀어넣는 요소 애니메이션입니다. showPanel 애니메이션은 개발자 제공 오프셋에서 요소의 현재 위치까지 패널 변환에 애니메이션 효과를 줍니다.

요소 애니메이션을 사용하려면 요소의 최종 상태를 설정합니다. 다음 예제에서 myPanel 요소는 표시되기 전에 이미 최종 위치에 있지만 보이지 않습니다. 패널을 표시하기 위해 코드에서 패널 요소의 불투명도를 1로 설정한 다음 애니메이션을 트리거합니다. 이러한 단계가 동일한 함수 내에서 발생하는 한 애니메이션이 시작될 때까지 불투명도 변경은 적용되지 않습니다. 패널은 오프셋 위치에서 표시되며 실제 위치까지 애니메이션 효과가 나타납니다.



                                                
myPanel.style.opacity = "1";
WinJS.UI.Animation.showPanel(myPanel, { top: "0px", left: "350px" });                                       
                                            

패널을 숨기려면 프로세스가 반대로 수행됩니다. 먼저 코드에서 hidePanel을 호출해야 합니다. 이 함수는 현재 위치에서 오프셋 위치까지 패널에 애니메이션 효과를 줍니다. 애니메이션이 완료되면 코드에서 불투명도를 0으로 설정하여 요소를 숨깁니다. 불투명도 변경을 포함하지 않으면 애니메이션이 끝날 때 요소가 원래 위치로 돌아가서 화면에 계속 표시됩니다.



                                                
WinJS.UI.Animation.hidePanel(myPanel, { top: "0px", left: "350px" })
    .then(function () { myPanel.style.opacity = "0"; });                                       
                                            

다음은 애니메이션 라이브러리에 있는 요소 애니메이션입니다.

함수설명
showEdgeUI 가장자리 기반 UI를 보기로 밀어넣습니다. 오프셋에서 현재 위치까지 대상 요소의 변환에 애니메이션 효과를 줍니다.
hideEdgeUI 가장자리 기반 UI를 보기에서 밀어냅니다. 현재 위치에서 오프셋까지 대상 요소의 변환에 애니메이션 효과를 줍니다.
showPanel 큰 가장자리 기반 패널을 보기로 밀어넣습니다. 오프셋에서 현재 위치까지 대상 요소의 변환에 애니메이션 효과를 줍니다.
hidePanel 큰 가장자리 기반 패널을 보기에서 밀어냅니다. 현재 위치에서 오프셋까지 대상 요소의 변환에 애니메이션 효과를 줍니다.
showPopup 보기의 맨 위에 컨텍스트 UI를 표시합니다. 1까지 불투명도에 애니메이션 효과를 주고 오프셋에서 현재 위치까지 변환에 애니메이션 효과를 줍니다.
hidePopup 상황에 맞는 UI를 숨깁니다. 0까지 불투명도에 애니메이션 효과를 줍니다.
updateBadge 숫자 배지를 업데이트합니다. 1까지 불투명도에 애니메이션 효과를 주고 오프셋에서 현재 위치까지 변환에 애니메이션 효과를 줍니다.

 

요소 전환

요소 전환은 CSS 전환으로 구현됩니다. 요소 전환은 CSS 속성을 애니메이션에 정의된 값으로 전환하여 요소의 상태를 변경합니다.

애니메이션 라이브러리에 있는 많은 요소 전환은 함께 사용해야 하는 애니메이션 쌍으로 제공됩니다. 쌍을 이루는 한 애니메이션에서 적용된 상태 변경은 다른 애니메이션에서 반대로 적용됩니다. 예를 들어 fadeIn 애니메이션은 요소의 불투명도를 1로 전환하지만 fadeOut 애니메이션은 요소의 불투명도를 0으로 전환합니다.

애니메이션 라이브러리에 있는 일부 애니메이션은 요소 애니메이션과 요소 전환을 함께 사용합니다. 예를 들어 enterContent 애니메이션은 콘텐츠의 불투명도를 1로 전환하는 동시에 오프셋에서 현재 위치까지 전환에 애니메이션 효과를 줍니다.

애니메이션 라이브러리에서 요소 전환을 사용하거나 요소 전환과 요소 애니메이션을 둘 다 사용하는 애니메이션은 다음과 같습니다.

함수설명
fadeIn 임시 요소 또는 컨트롤을 표시합니다. 불투명도를 1로 전환합니다.
fadeOut 임시 요소 또는 컨트롤을 숨깁니다. 불투명도를 0으로 전환합니다.
enterContent 보기에 나타날 때까지 단일 요소 또는 콘텐츠 집합에 애니메이션 효과를 줍니다. 불투명도를 1로 전환하고 오프셋에서 현재 위치까지 변환에 애니메이션 효과를 줍니다.
exitContent 보기에서 사라질 때까지 단일 요소 또는 콘텐츠 집합에 애니메이션 효과를 줍니다. 불투명도를 0으로 전환합니다.
enterPage 보기에 나타날 때까지 페이지의 전체 콘텐츠에 애니메이션 효과를 줍니다. 불투명도를 1로 전환하고 오프셋에서 현재 위치까지 변환에 애니메이션 효과를 줍니다.
exitPage 보기에서 사라질 때까지 페이지의 전체 콘텐츠에 애니메이션 효과를 줍니다. 불투명도를 0으로 전환합니다.
crossFade 콘텐츠 영역을 새로 고칩니다. 들어오는 콘텐츠의 불투명도를 1로 전환하고 나가는 콘텐츠의 불투명도를 0으로 전환합니다.
pointerDown 사용자가 타일을 탭하거나 클릭할 때 시각적 피드백을 제공합니다. 배율을 좀더 작은 값으로 전환합니다.
pointerUp 사용자가 타일에서 탭 또는 클릭을 해제할 때 시각적 피드백을 제공합니다. 배율을 전체 크기로 복원합니다.
dragSourceStart 사용자가 끌어서 놓기 작업을 시작할 때 시각적 피드백을 제공합니다. 배율을 좀더 큰 값으로 전환하고 불투명도를 줄입니다. 또한 이 애니메이션은 둘러싸는(영향 받는) 요소의 배율을 좀더 작은 값으로 전환합니다.
dragSourceEnd 사용자가 끌어온 개체를 놓아 끌어서 놓기 작업을 완료할 때 시각적 피드백을 제공합니다. dragSourceStart에서 수행된 애니메이션을 반대로 적용합니다.
dragBetweenEnter 끌어온 개체를 해당 지점에 놓을 경우 현재 끌어온 개체 아래에 있는 요소가 다른 곳으로 이동된다는 시각적 피드백을 제공합니다. 영향 받는 개체의 변형 속성을 오프셋으로 전환합니다.
dragBetweenLeave dragBetweenEnter에서 수행된 애니메이션을 반대로 적용하여 끌어온 개체가 끌어 놓기 영역을 벗어났다는 시각적 피드백을 제공합니다.
swipeSelect 살짝 밀기 선택됨 상태로 타일을 전환합니다. 타일의 불투명도를 0으로 전환하는 동시에 오프셋 "선택됨" 비주얼의 불투명도를 1로 전환합니다.
swipeDeselect 타일을 살짝 밀기 선택 취소됨 상태로 전환합니다. 오프셋 "선택됨" 비주얼의 불투명도를 0으로 전환하는 동시에 원본 타일의 불투명도를 1로 전환합니다.
swipeReveal 타일이 살짝 밀기 조작을 지원한다는 시각적 힌트를 사용자에게 제공합니다. 현재 위치에서 오프셋까지 변환을 전환합니다.
turnstileBackwardIn 요소를 페이지로 시계 방향으로 회전합니다.
turnstileBackwardOut 요소를 페이지에서 멀리 시계 방향으로 회전합니다.
turnstileForwardIn 요소를 페이지로 시계 반대 방향으로 회전합니다.
turnstileForwardOut 요소를 페이지에서 멀리 시계 반대 방향으로 회전합니다.
slideDown 요소를 화면 맨 아래에서 멀리 밉니다.
slideUp 요소를 화면 맨 아래에서 위의 보기로 밉니다.
slideLeftIn 요소를 화면 왼쪽에서 안으로 밉니다.
slideLeftOut 요소를 화면 왼쪽에서 바깥으로 밉니다.
slideRightIn 요소를 화면 오른쪽에서 안으로 밉니다.
slideRightOut 요소를 화면 오른쪽에서 바깥으로 밉니다.
continuumBackwardIn 들어오는 항목을 크기 조정, 회전 및 변환하는 동안 들어오는 페이지를 축소합니다.
continuumBackwardOut 나가는 페이지를 제거할 때 크기 조정, 회전 및 변환합니다.
continuumForwardIn 항목을 화면으로 가져오고 들어오는 항목을 크기 조정, 회전 및 변환하는 동시에 들어오는 페이지를 확대합니다.
continuumForwardOut 화면에서 항목을 제거하고 나가는 항목을 크기 조정, 회전 및 변환하는 동시에 나가는 페이지를 축소합니다.

 

레이아웃 전환

애니메이션 라이브러리에 있는 레이아웃 전환 애니메이션은 요소 애니메이션이나 요소 전환보다 더 복잡합니다. 일반적으로 레이아웃 전환 애니메이션에는 여러 요소가 사용되며, 그 결과로 레이아웃이 변경됩니다. 그러나 애니메이션 함수에서 레이아웃 변경이 발생하는 방법을 가정할 수는 없습니다. 예를 들어 reposition 애니메이션에서는 요소가 지점 A에서 지점 B로 이동합니다. 요소의 너비, 오프셋 또는 여백이나 안쪽 여백 변경 등 이러한 이동이 발생할 수 있는 다양한 방법이 있습니다.

레이아웃 전환을 위해 애니메이션 라이브러리는 만들기 함수를 제공하며 .execute() 메서드를 사용하여 개체를 반환합니다. 이 애니메이션의 호출 패턴은 다음과 같습니다.

  1. 적절한 애니메이션 만들기 함수를 호출합니다. 대상 요소의 현재 위치가 수집됩니다.
  2. 앱이 선택한 임의 방법으로 레이아웃을 변경합니다.
  3. 앱이 만들기 함수에서 반환된 개체에 대해 execute 메서드를 호출하여 애니메이션을 트리거합니다. 이 메서드는 대상 요소의 새 위치를 수집하고 원래 위치에서 새 위치까지 요소에 애니메이션 효과를 줍니다.
  4. execute 메서드가 일반적인 방법으로 사용할 수 있는 Promise 개체를 반환합니다.

다음 예제에서는 목록의 맨 위에 항목을 삽입하는 동작에 애니메이션 효과를 주는 데 사용되는 목록에 추가 애니메이션을 보여 줍니다. createAddToListAnimation을 호출하면 affectedItems 컬렉션에 전달된 모든 요소의 위치가 기록됩니다. 새 항목이 삽입될 경우 위치가 영향을 받을 수 있는 모든 요소가 이 컬렉션에 포함됩니다.

이 예제에서는 createAddToListAnimation이 호출된 후 새 항목이 목록의 맨 위에 삽입됩니다. 다음 코드에서 list는 목록 항목이 포함된 div 요소입니다. 요소의 insertBefore 메서드를 호출하면 newItem이 목록의 맨 위에 실제로 추가됩니다. 이 삽입 동작으로 인해 목록에 있는 다른 모든 항목의 위치가 변경됩니다. 선택한 임의 방법으로 affectedItems 컬렉션의 위치를 변경할 수 있습니다.

마지막으로, 예제에서는 createAddToListAnimation에서 반환된 개체의 execute 메서드를 호출하여 새 목록 항목을 제자리로 이동하는 애니메이션을 트리거합니다.



                                                
var addToList = WinJS.UI.Animation.createAddToListAnimation(newItem, affectedItems);
list.insertBefore(newItem, list.firstChild);
addToList.execute();
                                            

애니메이션 라이브러리에 있는 레이아웃 전환 애니메이션 만들기 함수는 다음과 같습니다.

함수설명
createExpandAnimation 추가 인라인 정보를 표시합니다. 필요한 경우 다른 콘텐츠를 이동하여 공간을 확보합니다.
createCollapseAnimation 인라인 콘텐츠를 숨깁니다. 필요한 경우 다른 콘텐츠를 축소합니다.
createRepositionAnimation 요소를 새 위치로 이동합니다.
createAddToListAnimation 목록에 항목을 추가합니다.
createDeleteFromListAnimation 목록에서 항목을 제거합니다.
createAddToSearchListAnimation 검색 결과를 필터링하는 동시에 목록에 항목을 추가합니다.
createDeleteFromSearchListAnimation 검색 결과를 필터링하는 동시에 목록에서 항목을 제거합니다.
createPeekAnimation 타일에 피크 애니메이션을 표시합니다. 피크 타일 콘텐츠는 타일 공간 내에서 위 아래로 스크롤하여 전체 통신을 표시합니다.

 

애니메이션 예약

복잡한 시나리오를 완료하려면 UI의 각 부분에서 서로 다른 애니메이션을 실행해야 하는 경우가 많습니다. 예를 들어 메일을 삭제하는 경우 삭제된 메일을 목록에서 제거하고 다음 메일 메시지를 표시해야 할 수 있습니다. 대부분의 경우 더 짧은 전체 기간 동안 두 애니메이션을 동시에 실행하는 것이 좋습니다. 다음 섹션에서는 이러한 시나리오에서 주의해야 하는 문제에 대해 설명합니다.

애니메이션 중단

동일한 CSS 속성의 다른 애니메이션이나 전환이 트리거되면 요소의 애니메이션 또는 전환이 중단됩니다. 이 경우 CSS3 사양에 따라 첫 번째 애니메이션 또는 전환이 취소됩니다. CSS 전환은 매끄럽고 유연하게 다른 전환을 중단합니다. 그러나 CSS 애니메이션의 경우 요소의 실제 CSS 속성 값은 변경하지 않고 유지하는 동시에 요소 위에 CSS 속성 전환을 표시합니다. CSS 애니메이션을 중단하면 부자연스럽게 속성의 원래 값으로 돌아가므로 권장되지 않습니다. CSS 애니메이션을 사용할 경우 일반적으로 첫 번째 애니메이션이 끝날 때까지 기다렸다가 두 번째 애니메이션을 시작하는 것이 좋습니다. 자세한 내용은 애니메이션이 완료될 때까지 대기를 참조하세요.

시나리오결과
CSS 애니메이션이 CSS 애니메이션을 중단함애니메이션 효과를 주는 CSS 속성이 실제 상태로 돌아가고 새 애니메이션을 시작합니다. 이 경우 시각적으로 부자연스러울 수 있습니다.
CSS 애니메이션이 전환을 중단함전환이 해당 지점에서 매끄럽게 중단되고 현재 값에서 새 끝 값까지 애니메이션을 시작합니다.
CSS 전환이 전환을 중단함전환이 해당 지점에서 매끄럽게 중단되고 현재 값에서 새 끝 값으로 전환을 시작합니다.
CSS 전환이 애니메이션을 중단함애니메이션 효과를 주는 CSS 속성이 실제 상태로 돌아가고 새 전환을 시작합니다. 이 경우 시각적으로 부자연스러울 수 있습니다.

 

애니메이션 취소

애니메이션 함수에서 반환된 Promise 개체의 cancel 메서드를 통해 실행 중인 애니메이션 라이브러리 애니메이션을 취소할 수 있습니다.

애니메이션이 완료될 때까지 대기

애니메이션이 완료될 때 작업을 수행하려면 애니메이션 함수에서 반환된 Promise 개체의 done 또는 then 메서드에 콜백 함수를 전달합니다. 이 함수는 종료 애니메이션이 완료될 때까지 기다린 후 DOM에서 항목을 제거하거나 여러 애니메이션을 연결하는 경우에 유용합니다. 다음은 페이드 인이 완료된 후에만 콜백 함수가 대상을 페이드 아웃하는 예제입니다.



                                                
WinJS.UI.Animation.fadeIn(target)
       .then(function () { WinJS.UI.Animation.fadeOut(target); });
                                            

JavaScript 타이머를 사용하여 애니메이션이 완료된 시간을 확인하지 마세요. 이 방법은 신뢰할 수 없습니다. 타이머가 애니메이션 이전 또는 이후에 완료될 수도 있고, 하드웨어나 UI 스레드에서 실행 중인 다른 프로세스에 따라 타이밍이 달라질 수도 있습니다.

애니메이션 사용 및 사용 안 함

  • Applies to Windows

Windows: 모든 애니메이션 라이브러리 애니메이션은 제어판의 접근성 항목에서 컴퓨터를 보기 쉽게 설정 아래의 '필요 없는 애니메이션 모두 끄기' 시스템 설정에 따라 사용하지 않도록 설정됩니다. 이 설정을 선택하면 앱의 기본 기능에 필요 없는 모든 애니메이션이 꺼집니다. 이 경우 일반적으로 게임을 하는 데 필요한 일부 게임 애니메이션을 제외한 모든 애니메이션을 의미합니다. 애니메이션 라이브러리 애니메이션과 executeAnimation 또는 executeTransition을 사용하는 사용자 지정 애니메이션은 자동으로 이 설정에 응답합니다. 사용자 지정 애니메이션을 만드는 경우 코드에서 명시적으로 이 설정을 수신해야 합니다.

앱에서 사용하는 애니메이션 라이브러리 애니메이션이 WinJS.UI.enableAnimationsWinJS.UI.disableAnimations 함수에 응답할지 여부는 개발자가 결정합니다.

애니메이션 성능 최적화

애니메이션을 통해 앱의 빠른 응답성 표시

전반적으로 우수한 사용자 환경을 제공하려면 앱이 빠르고 응답한다는 느낌을 사용자에게 주어야 합니다. 올바르게 사용할 경우 애니메이션은 적시에 적절한 사용자 피드백을 제공하여 앱의 응답성을 향상시킬 수 있습니다.

사용자 작업에 응답하는 애니메이션은 가능한 한 빨리 시작되어야 합니다. 이는 사용자에게 작업이 성공했으며 그에 대한 응답으로 특정 결과가 발생하고 있음을 알리는 데 중요합니다. 전환을 완료하기 위해 새 페이지 로드 같은 추가 작업을 해야 하는 경우 사용자 응답 애니메이션이 트리거된 후 이 작업을 수행합니다.

독립 애니메이션 사용

JavaScript 앱용 애니메이션 플랫폼을 사용하면 UI 스레드에 독립적인 별도의 하드웨어 가속 시스템 스레드에서 특정 형식의 애니메이션을 실행할 수 있습니다. 이러한 유형의 애니메이션을 독립 애니메이션이라고 합니다. UI 스레드에서 실행되는 애니메이션을 종속 애니메이션이라고 합니다. 독립 애니메이션은 UI 스레드에서 발생하는 다른 작업과 경쟁할 필요가 없으므로 종속 애니메이션보다 더 매끄럽게 실행됩니다.

애니메이션 라이브러리에 있는 모든 애니메이션은 독립 애니메이션으로 실행될 수 있지만, 이렇게 하려면 구현에서 고려해야 하는 몇 가지 사항이 있습니다. 애니메이션 함수 호출이 독립 애니메이션으로 실행될 수 있도록 하는 방법에 대한 자세한 내용은 독립적 컴퍼지션: Internet Explorer에서 렌더링 및 합치기를 참조하세요.

동시에 애니메이션 효과를 주는 요소 수 최소화

가능한 경우 애니메이션 효과를 주는 개별 요소 수를 최소화합니다. 예를 들어 요소 배열을 애니메이션에 전달하는 대신 상위 요소만 전달할 경우 애니메이션 엔진이 하나의 애니메이션 작업만 만들면 됩니다.

기본 오프셋 사용

가능한 경우 offset 매개 변수가 포함된 애니메이션 라이브러리 애니메이션에 대해 기본 오프셋을 사용합니다. 해당 애니메이션에 대한 디자인 권장 변환이 제공될 뿐 아니라 애니메이션이 미리 계산된 키 프레임을 사용할 수 있기 때문에 성능이 향상됩니다.

기본 오프셋은 또한 오른쪽에서 왼쪽 방향 앱에서 자동으로 미러링되며, 앱 크기가 조정될 경우 기본 오프셋이 자동으로 변환 거리를 변경하여 더 좁은 보기 상태에서도 적절한 효과를 보여 줍니다.

사용자 지정 애니메이션 만들기

가능한 경우 애니메이션 라이브러리 애니메이션을 사용해야 합니다. 그러나 고유한 시나리오가 있고 요구에 맞는 기본 제공 애니메이션이 없는 경우 사용자 지정 애니메이션을 만들 수 있습니다.

JavaScript 앱에서 사용자 지정 애니메이션을 구현하는 두 가지 방법이 있습니다. 하나는 표준 CSS3 애니메이션 및 전환을 사용하는 것이고, 다른 하나는 애니메이션 라이브러리 도우미 함수 executeAnimationexecuteTransition을 사용하는 것입니다.

표준 CSS3 애니메이션 및 전환을 사용하여 사용자 지정 애니메이션 만들기

CSS3 애니메이션 및 전환을 사용하면 다양한 CSS 속성에 대해 유연하게 애니메이션 또는 전환을 만들 수 있습니다. 자세한 내용은 애니메이션전환 항목을 참조하세요.

고유한 애니메이션을 만드는 경우 다음 사항에 유의하세요.

  • 일부 CSS 속성에 대한 애니메이션 또는 전환은 독립 애니메이션으로 실행되지 않으며 각 프레임마다 전체 페이지가 다시 그려질 수 있습니다. 이 경우 느리고 불규칙적인 애니메이션으로 인해 열악한 사용자 환경이 만들어질 수 있습니다. 애니메이션이 독립적으로 실행되도록 사용자 지정 애니메이션 구현에서 이러한 속성에 애니메이션 효과를 주지 마세요.
  • 동일한 요소에 대해 사용자 지정 CSS3 애니메이션 또는 전환을 애니메이션 라이브러리 애니메이션과 함께 사용할 수 없습니다.

executeAnimation 및 executeTranslation을 사용하여 사용자 지정 애니메이션 만들기

애니메이션 라이브러리 함수 executeAnimationexecuteTransition은 애니메이션 라이브러리에서 해당 애니메이션을 실행하는 데 사용되며, 사용자 지정 애니메이션에 사용할 수도 있습니다. 두 함수에서 실행되는 모든 애니메이션 및 전환은 독립 애니메이션으로 실행될 수 있으며, 실행 중인 주식 애니메이션 라이브러리 애니메이션과 함께 사용할 수 있습니다. executeAnimationexecuteTransition 함수는 나머지 애니메이션 라이브러리 함수와 마찬가지로 Promise 개체를 반환합니다.

애니메이션 효과를 줄 수 있는 모든 CSS 속성에 두 함수를 사용할 수 있습니다. 그러나 불투명도 및 변형 속성만 독립 애니메이션으로 실행할 수 있습니다. 게임 내 애니메이션 같은 특별한 애니메이션이 앱에 필요한 경우에는 두 함수가 시나리오에 적합한 선택이 아닐 수도 있습니다.

executeAnimation 함수를 사용할 때 성능을 향상시키려면 애니메이션에 대해 키 프레임을 지정하는 것이 좋습니다.



                                
@keyframes custom-opacity-in    { from { opacity: 0; } to { opacity: 1; } }
                            

다음 예제에서는 사용자 지정 애니메이션을 보여 줍니다.



                                
function runCustomShowAnimation() {
    var showAnimation = WinJS.UI.executeAnimation(
        target,
        {
            keyframe: "custom-opacity-in",
            property: "opacity",
            delay: 0,
            duration: 500,
            timing: "linear",
            from: 0,
            to: 1
        }
    );
}
                            

다음 예제에서는 사용자 지정 전환을 보여 줍니다.



                                
function runCustomShowTransition() {
    var showTransition = WinJS.UI.executeTransition(
        target,
        {
            property: "opacity",
            delay: 0,
            duration: 500,
            timing: "linear",
            to: 1
        }
    );
}
                            

사용자 지정 애니메이션 및 전환 결합

애니메이션과 전환을 결합하여 사용자 지정 스토리보드를 만들 수 있습니다. 다음 예제에서는 애니메이션과 전환을 결합하여 대상 요소에서 페이드 인 및 밀기 효과를 동시에 구현합니다. 스토리보드의 두 부분은 executeAnimationexecuteTransition 호출을 통해 독립적으로 트리거되지만 동시에 시작됩니다.



                                
@keyframes custom-translate-in    { from { transform: translateY(50px); } to { transform: none; } }
                            



                                
function runCustomShowStoryboard() {
    var promise1 = WinJS.UI.executeAnimation(
        target,
        {
            keyframe: "custom-translate-in",
            property: "transform",
            delay: 0,
            duration: 367,
            timing: "cubic-bezier(0.1, 0.9, 0.2, 1)",
            from: "translate(50px)", 
            to: "none"
        });
    var promise2 = WinJS.UI.executeTransition(
        target,
        {
            property: "opacity",
            delay: 0,
            duration: 167,
            timing: "linear",
            to: 1
        });
    return WinJS.Promise.join([promise1, promise2]);
}
                            

관련 항목

UI 애니메이션(HTML)

 

 

표시:
© 2015 Microsoft