AnimatedIcon

아티클
07/13/2023

AnimatedIcon 컨트롤은 사용자 상호 작용 및 시각적 상태 변경에 대한 응답으로 애니메이션 이미지를 재생합니다.

아이콘에 애니메이션을 적용하여 자습서의 다음 단추와 같은 UI 구성 요소에 주의를 끌거나 아이콘과 연결된 작업을 흥미로운 방식으로 반영할 수도 있습니다.

사용자 지정 애니메이션은 Adobe AfterEffects를 사용하여 만들 수 있으며, WinUI 응용 프로그램에서 애니메이션 아이콘으로 사용할 수 있도록 Lottie-Windows 라이브러리를 사용하여 렌더링할 수 있습니다. 자세한 내용은 이 문서의 후반부에 있는 Lottie를 사용하여 AnimatedIcon에 대한 애니메이션 콘텐츠 만들기를 참조하세요.

다음 예제에서는 Adobe AfterEffects에서 만들어지고 Lottie를 통해 렌더링된 기본 애니메이션 검색 아이콘을 보여줍니다.

올바른 컨트롤인가요?

사용자가 단추 위로 마우스를 가져가거나 클릭할 때와 같이 컨트롤과 사용자의 상호 작용에 대한 응답으로 컨트롤의 아이콘을 애니메이션화 해야 하는 경우 AnimatedIcon 컨트롤을 사용합니다.

애니메이션이 시각적 상태 전환에 의해 트리거되지 않고 루프에서 재생되거나, 한 번만 재생되거나, 일시 중지될 수 있는 경우에는 AnimatedIcon을 사용하지 마세요. 대신 AnimatedVisualPlayer를 사용합니다.

아이콘이 아니거나 컨트롤이 IconElement 또는 IconElementSource 속성을 지원하지 않는 경우에는 AnimatedIcon을 사용하지 마세요. 대신 AnimatedVisualPlayer를 사용합니다.

애니메이션 아이콘이 필요하지 않은 경우에는 대신 FontIcon, SymbolIcon 또는 BitmapIcon을 사용합니다.

AnimatedIcon 및 AnimatedVisualPlayer의 차이점

AnimatedIcon은 요소 또는 IconElement가 필요한 모든 위치에서 사용할 수 있는 IconElement(예: NavigationViewItem.Icon)이며 State 속성을 통해 제어됩니다.

AnimatedVisualPlayer는 재생 및 일시 중지와 같은 메서드를 통해 제어되며 응용 프로그램의 어디에서나 사용할 수 있는 보다 일반적인 애니메이션 플레이어입니다.

Lottie를 사용하여 AnimatedIcon에 대한 애니메이션 콘텐츠 만들기

AnimatedIcon에 대한 애니메이션 정의는 AnimationVisualPlayer에 대한 애니메이션을 정의하는 프로세스와 동일하게 시작됩니다. 추가할 아이콘에 대한 Lottie 파일을 만들거나 가져오거나 LottieGen을 통해 해당 파일을 실행해야 합니다. LottieGen은 C++/WinRT 클래스의 코드를 생성합니다. 그런 다음, AnimatedIcon을 인스턴스화하고 사용할 수 있습니다.

참고 항목

AutoSuggestBox 컨트롤은 LottieGen 도구를 사용하여 생성된 AnimatedVisuals.AnimatedFindVisualSource 클래스를 사용합니다.

애니메이션 정의에서 마커를 정의하여 재생 시간 위치를 나타낼 수도 있습니다. 그런 다음 AnimatedIcon 상태를 이러한 마커로 설정할 수 있습니다. 예를 들어 Lottie 파일에 "PointerOver"로 표시된 재생 위치가 있는 경우 AnimatedIcon 상태를 "PointerOver"로 설정하고 애니메이션을 재생 위치로 이동할 수 있습니다.

"Foreground"라는 Lottie 애니메이션에서 색 속성을 정의하면 AnimatedIcon.Foreground 속성을 사용하여 색을 설정할 수 있습니다.

권장 사항

아이콘이 디자인 원칙과 일치하는지 확인하려면 Windows 앱용 아이콘에 대한 UX 참고 자료를 확인하세요.
단일 화면 또는 보기에서 애니메이션 아이콘의 수를 제한합니다. 아이콘에만 애니메이션을 적용하여 사용자가 작업을 수행해야 하는 위치 또는 작업을 수행할 때 사용자의 주의를 끌 수 있습니다.

UWP 및 WinUI 2

Important

이 문서의 정보 및 예제는 Windows 앱 SDK 및 WinUI 3를 사용하는 앱에 최적화되어 있지만 통상적으로 WinUI 2를 사용하는 UWP 앱에도 적용할 수 있습니다. 플랫폼별 정보 및 예제는 UWP API 참조를 확인하세요.

이 섹션에는 UWP 또는 WinUI 2 앱에서 컨트롤을 사용하는 데 필요한 정보가 있습니다.

UWP 앱용 AnimatedIcon에는 Windows UI 라이브러리 2가 필요합니다. 설치 지침을 비롯한 자세한 내용은 Windows UI 라이브러리를 참조하세요. 이 컨트롤용 API는 Microsoft.UI.Xaml.Controls 네임스페이스에 있습니다.

WinUI 2 API:AnimatedIcon 클래스
WinUI 2 갤러리 앱을 열고 작동 중인 AnimatedIcon을 확인합니다. WinUI 2 갤러리 앱에는 대부분의 WinUI 2 컨트롤, 특징, 기능의 대화형 예제가 포함되어 있습니다. Microsoft Store에서 앱을 다운로드하거나 GitHub에서 소스 코드를 가져오세요.

이 문서의 코드를 WinUI 2와 함께 사용하려면 XAML의 별칭(여기서는 muxc를 사용)을 사용하여 프로젝트에 포함된 Windows UI 라이브러리 API를 표현합니다. 자세한 내용은 WinUI 2 시작 섹션을 참조하세요.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:AnimatedIcon />

애니메이션 아이콘 만들기

중요 API:AnimatedIcon 클래스

WinUI 3 갤러리 앱을 열고 작동 중인 AnimatedIcon을 확인합니다.

WinUI 3 갤러리 앱에는 대부분의 WinUI 3 컨트롤, 특징, 기능의 대화형 예제가 포함되어 있습니다. 앱을 Microsoft Store 에서 다운로드하거나 GitHub에서 소스 코드를 가져오세요.

단추에 AnimatedIcon 추가

다음 예제에서는 PointerEntered 이벤트에 애니메이션화된 뒤로 아이콘을 표시하는 뒤로 단추를 보여줍니다.

AnimatedBackVisualSource는 LottieGen 명령줄 도구를 사용하여 만든 클래스입니다.
FallbackIconSource는 Lottie 애니메이션을 지원하지 않는 Windows의 이전 버전과 같이 애니메이션을 재생할 수 없는 경우에 사용됩니다.
사용자가 시스템 설정에서 애니메이션을 끄면 AnimatedIcon 컨트롤이 있던 상태 전환의 최종 프레임을 표시합니다.

<Button PointerEntered="Button_PointerEntered" PointerExited="Button_PointerExited">
    <AnimatedIcon x:Name='BackAnimatedIcon'>
        <AnimatedIcon.Source>
            <animatedvisuals:AnimatedBackVisualSource/>
        </AnimatedIcon.Source>
        <AnimatedIcon.FallbackIconSource>
            <SymbolIconSource Symbol='Back'/>
        </AnimatedIcon.FallbackIconSource>
    </AnimatedIcon>
</Button>

private void Button_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    AnimatedIcon.SetState(this.BackAnimatedIcon, "PointerOver");
}

private void Button_PointerExited(object sender, PointerRoutedEventArgs e)
{
    AnimatedIcon.SetState(this.BackAnimatedIcon, "Normal");
}

NavigationViewItem에 AnimatedIcon 추가

NavigationViewItem 컨트롤은 컨트롤의 상태에 따라 AnimatedIcon의 공통 상태를 자동으로 설정합니다( 이러한 마커가 Lottie 애니메이션에 정의된 경우).

예를 들어 다음 예제에서는 LottieGen 도구에서 생성된 사용자 지정 애니메이션(GameSettingsIcon)을 설정하는 방법을 보여줍니다.

<NavigationView.MenuItems>
    <NavigationViewItem Content = "Game Settings">
        <NavigationViewItem.Icon>
            <AnimatedIcon x:Name='GameSettingsIcon'>
                <AnimatedIcon.Source>
                    <animatedvisuals:AnimatedSettingsVisualSource/>
                </AnimatedIcon.Source>
                <AnimatedIcon.FallbackIconSource>
                    <FontIconSource FontFamily="Segoe MDL2 Assets" Glyph="&#xE713;"/>
                </AnimatedIcon.FallbackIconSource>
            </AnimatedIcon>
        </NavigationViewItem.Icon>
    </NavigationViewItem>
</NavigationView.MenuItems>

Animated Settings Gear

NavigationViewItem은 AnimatedIcon에서 다음 상태를 자동으로 설정합니다.

일반
PointerOver
누름
선택한 상태
PressedSelected
PointerOverSelected

GameSettingsIcon에 “NormalToPointerOver”에 대해 정의된 마커가 있는 경우 포인터가 NavigationViewItem 위로 이동할 때까지 아이콘이 애니메이션화됩니다. 마커 만들기에 대한 자세한 내용은 다음 섹션을 참조하세요.

AnimatedIcon 마커 정의

이전 예제의 사용자 지정 GameSettingsIcon을 만들려면 Windows LottieGen 도구를 통해 마커가 있는 Lottie JSON 파일을 실행하여 애니메이션 코드를 C# 클래스로 생성합니다.

LottieGen을 통해 Lottie 파일을 실행한 후에는 CodeGen 출력 클래스를 프로젝트에 추가할 수 있습니다. 자세한 내용은 LottieGen 자습서를 참조하세요.

AnimatedIcon 상태를 새 값으로 설정하면 이전 상태에서 새 상태로 전환하기 위한 Lottie 애니메이션의 재생 위치도 설정됩니다. 이러한 재생 위치는 Lottie 파일의 마커로도 식별됩니다. 전환 시작 또는 전환 종료에 대한 특정 마커도 정의할 수 있습니다.

예를 들어 AutoSuggestBox 컨트롤은 다음 상태로 애니메이션화 AnimatedIcon을 사용합니다.

일반
PointerOver
누름

이러한 상태 이름을 사용하여 Lottie 파일에 마커를 정의할 수 있습니다. 마커는 다음과 같이 정의할 수도 있습니다.

상태 이름 사이에 "To"를 삽입합니다. 예를 들어 "NormalToPointerOver" 마커가 정의된 경우 AnimatedIcon 상태를 "Normal"에서 "PointerOver"로 변경하면 이 마커의 재생 위치로 이동됩니다.
마커 이름에 "_Start" 또는 "_End"를 추가합니다. 예를 들어 "NormalToPointerOver_Start" 및 "NormalToPointerOver_End" 마커를 정의하고 AnimatedIcon 상태를 "Normal"에서 "PointerOver"로 변경하면 _Start 마커의 재생 위치로 이동한 후 _End 재생 위치에서 애니메이션화할 수 있습니다.

AnimatedIcon 상태를 매핑하는 데 사용되는 정확한 알고리즘은 마커 재생 위치로 변경됩니다.

"[PreviousState]To[NewState]_Start" 및 "[PreviousState]To[NewState]_End" 마커에 대해 제공된 파일의 마커가 있는지 확인합니다. 둘 다 있는 경우 "[PreviousState]To[NewState]_Start"에서 "[PreviousState]To[NewState]_End"로 애니메이션을 재생합니다.
"[PreviousState]To[NewState]_Start"을 찾을 수 없지만 "[PreviousState]To[NewState]_End"이 발견되면 "[PreviousState]To[NewState]_End" 재생 위치로 하드 잘라냅니다.
"[PreviousState]To[NewState]_End"를 찾을 수 없지만 "[PreviousState]To[NewState]_Start"를 찾은 경우 "[PreviousState]To[NewState]_Start" 재생 위치로 잘라냅니다.
"[PreviousState]To[NewState]" 마커에 대해 제공된 IAnimatedVisualSource2의 마커가 있는지 확인합니다. 있는 경우 "[PreviousState]To[NewState]" 재생 위치로 잘라냅니다.
제공된 IAnimatedVisualSource2의 마커가 "[NewState]" 마커인지 확인합니다. 있는 경우 "[NewState]" 재생 위치로 잘라냅니다.
제공된 IAnimatedVisualSource2의 마커에 "To[NewState]_End"로 끝나는 마커가 있는지 확인합니다. 있는 경우 적절한 마지막 문자의 재생 위치가 있는 첫 번째 마커로 잘라냅니다.
"[NewState]"가 float로 구문 분석되는지 확인합니다. 이 경우 현재 위치에서 구문 분석된 float를 애니메이션화합니다.
재생 위치 0.0으로 잘라냅니다.

다음 예제에서는 Lottie JSON 파일의 마커 형식을 보여줍니다. 자세한 내용은 AnimatedIcon 참고 자료를 참조하세요.

"markers":[{"tm":0,"cm":"NormalToPointerOver_Start","dr":0},{"tm":9,"cm":"NormalToPointerOver_End","dr":0},

{"tm":10,"cm":"NormalToPressed_Start","dr":0},{"tm":19,"cm":"NormalToPressed_End","dr":0},

{"tm":20,"cm":"PointerOverToNormal_Start","dr":0},{"tm":29,"cm":"PointerOverToNormal_End","dr":0},

{"tm":30,"cm":"PointerOverToPressed_Start","dr":0},{"tm":39,"cm":"PointerOverToPressed_End","dr":0},

{"tm":40,"cm":"PressedToNormal_Start","dr":0},{"tm":49,"cm":"PressedToNormal_End","dr":0},

{"tm":50,"cm":"PressedToPointerOver_Start","dr":0},{"tm":69,"cm":"PressedToPointerOver_End","dr":0},

{"tm":90,"cm":"PressedToNormal_Start","dr":0},{"tm":99,"cm":"PressedToNormal_End","dr":0},

{"tm":100,"cm":"PressedToPointerOver_Start","dr":0},{"tm":101,"cm":"PressedToPointerOver_End","dr":0}]

독립 실행형 AnimatedIcon 추가

다음 예제는 사용자가 프롬프트 메시지 수락을 클릭하는 단추입니다.

MyAcceptAnimation 클래스는 LottieGen 도구를 사용하여 만들어집니다.

FallbackIconSource는 Lottie 애니메이션을 지원하지 않는 이전 버전의 Windows 같이 애니메이션을 재생할 수 없는 경우 애니메이션 대신 사용됩니다.

최종 사용자가 시스템 설정에서 애니메이션을 끄면 AnimatedIcon은 컨트롤이 있던 상태 전환의 최종 프레임을 표시합니다.

<Button PointerEntered="HandlePointerEntered" PointerExited="HandlePointerExited">
    <AnimatedIcon x:Name='AnimatedIcon1'>
        <local:MyAcceptAnimation/>
        <AnimatedIcon.FallbackIconSource>
            <SymbolIconSource Symbol='Accept'/>
        </AnimatedIcon.FallbackIconSource>
    </AnimatedIcon>
</Button>

private void Button_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    AnimatedIcon.SetState(this.AnimatedIcon1, "PointerOver");
}

private void Button_PointerExited(object sender, PointerRoutedEventArgs e)
{
    AnimatedIcon.SetState(this.StackPaAnimatedIcon1nel1, "Normal");
}

AnimatedIcon

올바른 컨트롤인가요?

AnimatedIcon 및 AnimatedVisualPlayer의 차이점

Lottie를 사용하여 AnimatedIcon에 대한 애니메이션 콘텐츠 만들기

권장 사항

UWP 및 WinUI 2

애니메이션 아이콘 만들기

단추에 AnimatedIcon 추가

NavigationViewItem에 AnimatedIcon 추가

AnimatedIcon 마커 정의

독립 실행형 AnimatedIcon 추가

피드백

추가 리소스

AnimatedIcon

올바른 컨트롤인가요?

AnimatedIcon 및 AnimatedVisualPlayer의 차이점

Lottie를 사용하여 AnimatedIcon에 대한 애니메이션 콘텐츠 만들기

권장 사항

UWP 및 WinUI 2

애니메이션 아이콘 만들기

단추에 AnimatedIcon 추가

NavigationViewItem에 AnimatedIcon 추가

AnimatedIcon 마커 정의

독립 실행형 AnimatedIcon 추가

관련된 문서

피드백

추가 리소스