학습
학습 경로
Use advance techniques in canvas apps to perform custom updates and optimization - Training
Use advance techniques in canvas apps to perform custom updates and optimization
AnimatedIcon 컨트롤은 사용자 상호 작용 및 시각적 상태 변경에 대한 응답으로 애니메이션 이미지를 재생합니다.
아이콘에 애니메이션을 적용하여 자습서의 다음 단추와 같은 UI 구성 요소에 주의를 끌거나 아이콘과 연결된 작업을 흥미로운 방식으로 반영할 수도 있습니다.
사용자 지정 애니메이션은 Adobe AfterEffects를 사용하여 만들 수 있으며, WinUI 응용 프로그램에서 애니메이션 아이콘으로 사용할 수 있도록 Lottie-Windows 라이브러리를 사용하여 렌더링할 수 있습니다. 자세한 내용은 이 문서의 후반부에 있는 Lottie를 사용하여 AnimatedIcon에 대한 애니메이션 콘텐츠 만들기를 참조하세요.
다음 예제에서는 Adobe AfterEffects에서 만들어지고 Lottie를 통해 렌더링된 기본 애니메이션 검색 아이콘을 보여줍니다.
사용자가 단추 위로 마우스를 가져가거나 클릭할 때와 같이 컨트롤과 사용자의 상호 작용에 대한 응답으로 컨트롤의 아이콘을 애니메이션화 해야 하는 경우 AnimatedIcon 컨트롤을 사용합니다.
애니메이션이 시각적 상태 전환에 의해 트리거되지 않고 루프에서 재생되거나, 한 번만 재생되거나, 일시 중지될 수 있는 경우에는 AnimatedIcon을 사용하지 마세요. 대신 AnimatedVisualPlayer를 사용합니다.
아이콘이 아니거나 컨트롤이 IconElement 또는 IconElementSource 속성을 지원하지 않는 경우에는 AnimatedIcon을 사용하지 마세요. 대신 AnimatedVisualPlayer를 사용합니다.
애니메이션 아이콘이 필요하지 않은 경우에는 대신 FontIcon, SymbolIcon 또는 BitmapIcon을 사용합니다.
AnimatedIcon은 요소 또는 IconElement가 필요한 모든 위치에서 사용할 수 있는 IconElement(예: NavigationViewItem.Icon)이며 State 속성을 통해 제어됩니다.
AnimatedVisualPlayer는 재생 및 일시 중지와 같은 메서드를 통해 제어되며 응용 프로그램의 어디에서나 사용할 수 있는 보다 일반적인 애니메이션 플레이어입니다.
AnimatedIcon에 대한 애니메이션 정의는 AnimationVisualPlayer에 대한 애니메이션을 정의하는 프로세스와 동일하게 시작됩니다. 추가할 아이콘에 대한 Lottie 파일을 만들거나 가져오거나 LottieGen을 통해 해당 파일을 실행해야 합니다. LottieGen은 C++/WinRT 클래스의 코드를 생성합니다. 그런 다음, AnimatedIcon을 인스턴스화하고 사용할 수 있습니다.
참고
AutoSuggestBox 컨트롤은 LottieGen 도구를 사용하여 생성된 AnimatedVisuals.AnimatedFindVisualSource 클래스를 사용합니다.
애니메이션 정의에서 마커를 정의하여 재생 시간 위치를 나타낼 수도 있습니다. 그런 다음 AnimatedIcon 상태를 이러한 마커로 설정할 수 있습니다. 예를 들어 Lottie 파일에 "PointerOver"로 표시된 재생 위치가 있는 경우 AnimatedIcon 상태를 "PointerOver"로 설정하고 애니메이션을 재생 위치로 이동할 수 있습니다.
"Foreground"라는 Lottie 애니메이션에서 색 속성을 정의하면 AnimatedIcon.Foreground 속성을 사용하여 색을 설정할 수 있습니다.
중요
이 문서의 정보 및 예제는 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와 함께 사용하려면 XAML의 별칭(여기서는 muxc
를 사용)을 사용하여 프로젝트에 포함된 Windows UI 라이브러리 API를 표현합니다. 자세한 내용은 WinUI 2 시작 섹션을 참조하세요.
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
<muxc:AnimatedIcon />
WinUI 3 갤러리 앱에는 대부분의 WinUI 3 컨트롤, 특징, 기능의 대화형 예제가 포함되어 있습니다. 앱을 Microsoft Store 에서 다운로드하거나 GitHub에서 소스 코드를 가져오세요.
다음 예제에서는 PointerEntered 이벤트에 애니메이션화된 뒤로 아이콘을 표시하는 뒤로 단추를 보여줍니다.
AnimatedBackVisualSource
는 LottieGen 명령줄 도구를 사용하여 만든 클래스입니다.<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의 공통 상태를 자동으로 설정합니다( 이러한 마커가 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=""/>
</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 파일에 마커를 정의할 수 있습니다. 마커는 다음과 같이 정의할 수도 있습니다.
AnimatedIcon 상태를 매핑하는 데 사용되는 정확한 알고리즘은 마커 재생 위치로 변경됩니다.
다음 예제에서는 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}]
다음 예제는 사용자가 프롬프트 메시지 수락을 클릭하는 단추입니다.
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");
}
Windows developer 피드백
Windows developer은(는) 오픈 소스 프로젝트입니다. 다음 링크를 선택하여 피드백을 제공해 주세요.
학습
학습 경로
Use advance techniques in canvas apps to perform custom updates and optimization - Training
Use advance techniques in canvas apps to perform custom updates and optimization