애니메이션 아이콘

2025-03-25

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

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

사용자 지정 애니메이션은 Adobe AfterEffects 를 사용하여 만들고 Lottie-Windows 라이브러리를 사용하여 렌더링하여 WinUI 애플리케이션에서 애니메이션 아이콘으로 사용할 수 있습니다. 자세한 내용은 Lottie를 사용하여 이 문서의 뒷부분에 있는 AnimatedIcon에 대한 애니메이션 콘텐츠를 만드는 방법을 참조하세요.

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

올바른 컨트롤인가요?

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

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

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

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

AnimatedIcon 및 AnimatedVisualPlayer의 차이점

AnimatedIcon은 IconElement로, 요소나 IconElement가 필요한 곳(예: NavigationViewItem.Icon)에서 사용할 수 있으며 상태 속성을 통해 제어됩니다.

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

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 지침을 참조하세요.
단일 화면 또는 보기에서 애니메이션 아이콘의 수를 제한합니다. 아이콘에만 애니메이션을 적용하여 사용자가 작업을 수행해야 하는 위치 또는 작업을 수행할 때 사용자의 주의를 끌 수 있습니다.

애니메이션 아이콘 만들기

중요 API:AnimatedIcon 클래스

WinUI 3 갤러리 앱을 열어 AnimatedIcon 기능을 확인하세요.

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

단추에 AnimatedIcon 추가

다음 예제에서는 PointerEntered 이벤트가 발생하면 애니메이션된 뒤로 가기 아이콘을 표시하는 뒤로 가기 버튼을 보여줍니다.

AnimatedBackVisualSource 명령줄 도구를 사용하여 만든 클래스입니다.
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>

애니메이션 설정 기어

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

정상
포인터오버
누름
선택됨
선택된 상태
포인터오버선택됨

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

애니메이션 아이콘 마커 정의

이전 예제에서 사용자 지정 GameSettingsIcon 을 만들려면 Windows LottieGen 도구를 통해 Lottie JSON 파일(표식 포함)을 실행하여 애니메이션 코드를 C# 클래스로 생성합니다.

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

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

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

정상
포인터오버
누름

이러한 상태 이름을 사용하여 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 추가

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

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

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");
}

UWP 및 WinUI 2

중요

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

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

UWP 앱을 위한 AnimatedIcon에는 WinUI 2가 필요합니다. 설치 지침을 비롯한 자세한 내용은 WinUI 2를 참조하세요. 이 컨트롤에 대한 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 />