综合运用Bringing it together

计时、缓动、方向性和引力协同工作,构成了 Fluent 运动的基础。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.

以下是在应用中应用 Fluent 运动基础的 3 种方法。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:
Slide 150: 300ms;缓动:默认减速Slide up 150px: 300ms; Easing: Default Decelerate

反向方向:Direction Backward Out:
向下滑动150: 150ms;缓动:默认 的加速方向:Slide down 150px: 150ms; Easing: Default Accelerate Direction Backward In:
淡入: 300ms;缓动:默认减速Fade in: 300ms; Easing: Default Decelerate

对象示例Object example

300 ms 运动

方向展开: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 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. 背景Border.Background BackgroundTransitionBackgroundTransition BrushTransitionBrushTransition
System.windows.controls.contentpresenter>ContentPresenter.Background BackgroundTransitionBackgroundTransition BrushTransitionBrushTransition
Panel. 背景Panel.Background BackgroundTransitionBackgroundTransition BrushTransitionBrushTransition

此示例演示如何使用 Opacity 属性和过渡使按钮在控件启用时淡入,并在禁用时淡出。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;
}