통합

타이밍, 감속/가속, 방향, 무게는 함께 작동하여 Fluent 동작의 기초를 형성합니다. 각각은 다른 것의 컨텍스트에서 간주되고 앱의 컨텍스트에서 적절하게 적용되어야 합니다.

앱에서 Fluent 동작을 적용하는 3가지 방법은 다음과 같습니다.

• 암시적 애니메이션
  표준화된 값을 사용하여 매우 간단한 Fluent 동작을 달성하기 위해 매개 변수 변경에서 값 간의 자동 트윈 및 타이밍입니다.
• 기본 제공 애니메이션
  공용 컨트롤 및 공유 동작과 같은 시스템 구성 요소는 "기본적으로 Fluent"입니다. 기본은 묵시적 사용과 일관된 방식으로 적용됩니다.
• 지침 권장 사항에 따른 사용자 지정 애니메이션
  시스템에서 시나리오에 대한 정확한 동작 솔루션을 아직 제공하지 않는 경우가 있을 수 있습니다. 이러한 경우 기본 권장 사항을 사용 환경에 대한 시작 지점으로 사용합니다.

전환 예제

개체 예제:

예제

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

암시적 애니메이션

암시적 애니메이션은 매개 변수를 변경하는 동안 이전 값과 새 값 사이를 자동으로 보간하여 Fluent 동작을 수행하는 간단한 방법입니다.

다음 속성에 대한 변경 내용에 암시적 애니메이션 효과를 적용할 수 있습니다.

• UIElement

  • Opacity
  • 회전
  • Scale
  • 번역

• 테두리, ContentPresenter 또는 패널

  • 배경

변경 내용이 암시적으로 애니메이션 효과를 줄 수 있는 각 속성에는 해당 전환 속성이 있습니다. 속성에 애니메이션 효과를 주려면 해당 전환 속성에 전환 유형을 할당합니다. 이 표에서는 전환 속성과 각 속성에 사용할 전환 형식을 보여줍니다.

이 예제에서는 불투명도 속성 및 전환을 사용하여 컨트롤이 활성화될 때 단추를 페이드 인하고 비활성화될 때 페이드 아웃하는 방법을 보여줍니다.

<Button x:Name="SubmitButton"
        Content="Submit"
        Opacity="{x:Bind OpaqueIfEnabled(SubmitButton.IsEnabled), Mode=OneWay}">
    <Button.OpacityTransition>
        <ScalarTransition />
    </Button.OpacityTransition>
</Button>

public double OpaqueIfEnabled(bool IsEnabled)
{
    return IsEnabled ? 1.0 : 0.2;
}

UWP 및 WinUI 2

암시적 애니메이션에는 Windows 10, 버전 1809(SDK 17763) 이상이 필요합니다.

관련된 문서

• 동작 개요
• 타이밍 및 감속
• 방향 및 무게