Share via

통합

  • 아티클

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

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

암시적 애니메이션 - 표준화된 값을 사용하여 매우 간단한 Fluent 동작을 수행하기 위해 매개 변수의 값 사이의 자동 트윈 및 타이밍이 변경되었습니다.

기본 제공 애니메이션 - 시스템 구성 요소(예: 공용 컨트롤 및 공유 동작)는 "기본적으로 Fluent"입니다. 기본은 묵시적 사용과 일관된 방식으로 적용됩니다.

참고 자료 권장 사항에 따른 사용자 지정 애니메이션 - 시스템이 시나리오에 대한 정확한 동작 솔루션을 아직 제공하지 않는 경우가 있습니다. 이러한 경우 기본 권장 사항을 사용 환경에 대한 시작 지점으로 사용합니다.

전환 예제

functional animation

방향 앞 - 밖:
페이드 아웃: 150m, 감속/가속: 기본 가속 방향 앞 - 안:
위로 밀기 150px: 300ms, 감속/가속: 기본 감속

방향 뒤 - 밖:
아래로 밀기 150px: 150ms, 감속/가속: 기본 가속 방향 뒤 - 안:
페이드 인: 300ms, 감속/가속: 기본 감속

개체 예제:

300ms motion

방향 확장:
증가: 300ms, 감속/가속: 표준

방향 계약:
증가: 150ms, 감속/가속: 기본 가속

예제

WinUI Gallery

WinUI 2 Gallery 앱이 설치되어 있는 경우, 여기를 클릭하여 앱을 열고 실행 중인 암시 동작을 확인하십시오.

암시적 애니메이션

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

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

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

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

애니메이션 속성 전환 속성 암시적 전환 유형
UIElement.Opacity OpacityTransition ScalarTransition
UIElement.Rotation RotationTransition ScalarTransition
UIElement.Scale ScaleTransition Vector3Transition
UIElement.Translation TranslationTransition Vector3Transition
Border.Background BackgroundTransition BrushTransition
ContentPresenter.Background BackgroundTransition BrushTransition
Panel.Background BackgroundTransition BrushTransition

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

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