综合运用

  • 项目

计时、缓动、方向性和引力协同工作，构成了 Fluent 运动的基础。 必须对上述要素进行综合考虑，然后在应用上下文中适当应用。

以下是在应用中应用 Fluent 运动基础的 3 种方法。

隐式动画 参数更改中的值之间的自动补间和计时，旨在使用标准化的值实现非常简单的 Fluent 运动。

内置动画 系统组件（如公共控件和共享运动）“默认为 Fluent”。 以与其隐含用法一致的方式应用了基础元素。

自定义动画遵循指南建议 有时系统可能尚未为你的场景提供确切的运动解决方案。 在这种情况下，请使用基线基础建议作为你体验的起点。

切换示例

功能性动画

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

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

对象示例

300 ms 运动

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

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

示例

WinUI 库

如果已安装 WinUI 2 库 应用，请单击此处 打开该应用，并查看隐式转换的运行情况。

隐式动画

隐式动画需要 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

此示例展示了如何使用 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;
}