함께 가져오기Bringing it together

타이밍, 감속/방향성 및 무게는 함께 작동 하 여 흐름 동작의 기반을 형성 합니다.Timing, easing, directionality, and gravity work together to form the foundation of Fluent motion. 각는 다른 항목의 컨텍스트에서 고려 되 고 앱의 컨텍스트에서 적절 하 게 적용 되어야 합니다.Each has to be considered in the context of the others, and applied appropriately in the context of your app.

앱에서 흐름 동작 기본 사항을 적용 하는 세 가지 방법은 다음과 같습니다.Here are 3 ways to apply Fluent motion fundamentals in your app.

암시적 애니메이션 표준화 된 값을 사용 하 여 매우 간단한 흐름 동작을 수행 하기 위해 매개 변수의 값 사이에 자동 트윈 및 시간이 변경 되었습니다.Implicit animation Automatic tween and timing between values in a parameter change to achieve very simple Fluent motion using the standardized values.

기본 제공 애니메이션 시스템 구성 요소 (예: 공용 컨트롤 및 공유 동작)는 "기본적으로 흐름"입니다.Built-in animation System components, such as common controls and shared motion, are "Fluent by default". 기본은 암시 된 사용량과 일관 된 방식으로 적용 됩니다.Fundamentals have been applied in a manner consistent with their implied usage.

지침 권장 사항에 따라 사용자 지정 애니메이션 시스템에서 시나리오에 대 한 정확한 동작 솔루션을 아직 제공 하지 않는 경우가 있을 수 있습니다.Custom animation following guidance recommendations There may be times when the system does not yet provide an exact motion solution for your scenario. 이러한 경우 기본 권장 사항을 사용 환경에 대 한 시작 지점으로 사용 합니다.In those cases, use the baseline fundamental recommendations as a starting point for your experiences.

전환 예제Transition example

함수 애니메이션

방향 전달:Direction Forward Out:
페이드 아웃: 150m; 감속/가속: 기본 에서 방향이 앞 으로 빨라집니다.Fade out: 150m; Easing: Default Accelerate Direction Forward In:
위로 밀기 150px: 300ms; 감속/가속: 기본 감속Slide up 150px: 300ms; Easing: Default Decelerate

역방향 방향:Direction Backward Out:
Slide down 150px: 150ms; 감속/가속: 기본 방향으로 뒤로 이동 합니다.Slide down 150px: 150ms; Easing: Default Accelerate Direction Backward In:
페이드 인: 300ms; 감속/가속: 기본 감속Fade in: 300ms; Easing: Default Decelerate

개체 예Object example

300ms 동작

방향 확장:Direction Expand:
증가: 300ms; 감속/가속: 표준Grow: 300ms; Easing: Standard

방향 계약:Direction Contract:
증가: 150ms; 감속/가속: 기본 가속화Grow: 150ms; Easing: Default Accelerate

예제Examples

XAML controls gallery

XAML 컨트롤 갤러리 앱이 설치 되어 있는 경우 여기를 클릭 하 여 앱을 열고 동작의 암시적 전환을 확인하세요.If you have the XAML Controls Gallery app installed, click here to open the app and see Implicit Transitions in action.

암시적 애니메이션Implicit Animations

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

암시적 애니메이션은 매개 변수를 변경 하는 동안 이전 값과 새 값 사이를 자동으로 보간 하 여 흐름 동작을 달성할 수 있는 간단한 방법입니다.Implicit animations are a simple way to achieve Fluent motion by automatically interpolating between the old and new values during a parameter change.

다음 속성에 대 한 변경 내용에 암시적으로 애니메이션 효과를 적용할 수 있습니다.You can implicitly animate changes to the following properties:

변경 내용이 암시적으로 적용 될 수 있는 각 속성에는 해당 하는 전환 속성이 있습니다.Each property that can have changes implicitly animated has a corresponding transition property. 속성에 애니메이션 효과를 주려면 해당 전환 속성에 전환 유형을 할당 합니다.To animate the property, you assign a transition type to the corresponding transition property. 다음 표에서는 전환 속성과 각 속성에 사용할 전환 형식을 보여 줍니다.This table shows the transition properties and the transition type to use for each one.

애니메이션 속성Animated property Transition 속성Transition property 암시적 전환 유형Implicit transition type
UIElement 불투명도UIElement.Opacity OpacityTransitionOpacityTransition ScalarTransitionScalarTransition
UIElement.RotationUIElement.Rotation RotationTransitionRotationTransition ScalarTransitionScalarTransition
UIElement.ScaleUIElement.Scale ScaleTransitionScaleTransition Vector3TransitionVector3Transition
UIElement.TranslationUIElement.Translation TranslationTransitionTranslationTransition Vector3TransitionVector3Transition
테두리. 배경Border.Background BackgroundTransitionBackgroundTransition BrushTransitionBrushTransition
ContentPresenterContentPresenter.Background BackgroundTransitionBackgroundTransition BrushTransitionBrushTransition
Panel. 배경Panel.Background BackgroundTransitionBackgroundTransition BrushTransitionBrushTransition

이 예제에서는 불투명도 속성 및 전환을 사용 하 여 컨트롤이 활성화 될 때 단추를 페이드 아웃 하 고 비활성화 된 경우 페이드 아웃 하는 방법을 보여 줍니다.This example shows how to use the Opacity property and transition to make a button fade in when the control is enabled and fade out when it's disabled.

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