通过

将它组合在一起

  • 项目

计时、缓动、方向性和重力协同工作，形成 Fluent 运动的基础。 每个操作都必须在其他人的上下文中考虑，并在应用的上下文中适当地应用。

下面是在应用中应用 Fluent 动作基础知识的 3 种方法。

  • 隐式动画
    参数更改中的值之间的自动加温和计时，以使用标准化值实现非常简单的 Fluent 动作。
  • 内置动画
    系统组件（如通用控件和共享运动）默认为“Fluent”。 以与其隐含用法一致的方式应用了基础元素。
  • 遵循指导建议的自定义动画
    有时系统尚未为方案提供精确的运动解决方案。 在这种情况下，请使用基线基础建议作为你体验的起点。

转换示例

功能动画

方向向前退出：
淡出：150m；缓动：默认加速方向为向前进入：
向上滑动 150px：300 毫秒；缓动：默认减速

方向向后退出：
向下滑动 150px：150 毫秒；缓动：默认加速方向为向后进入：
淡入：300 毫秒；缓动：默认减速

对象示例

300 毫秒运动

方向扩张：
形成：300 毫秒；缓动：标准

方向收缩：
形成：150 毫秒；缓动：默认加速

示例

打开 WinUI 3 库应用并查看操作中的隐式转换。

WinUI 3 库应用包括大多数 WinUI 3 控件、特性和功能的交互式示例。 通过 Microsoft Store 获取应用，或在 GitHub 上获取源代码

隐式动画

隐式动画是一种通过在参数更改期间自动实现旧值和新值之间的内插来实现 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

此示例展示了如何使用 Opacity 属性和转换，使按钮在控件启用时淡入，在控件禁用时淡出。

<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 App SDK 和 WinUI 3 的应用优化的，但通常适用于使用 WinUI 2 的 UWP 应用。 有关特定于平台的信息和示例，请查看 UWP API 参考。

本部分包含在 UWP 或 WinUI 2 应用中使用该控件所需的信息。

隐式动画需要 Windows 10 版本 1809 (SDK 17763) 或更高版本。