通过

Windows app中的动画

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

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

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

转换示例

功能动画

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

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

对象示例

300 毫秒运动

方向扩展：
增长：300毫秒；缓动曲线：标准

方向合同：
扩展：150 毫秒；缓动：默认加速效果

隐式动画

隐式动画是一种通过在参数更改期间自动实现旧值和新值之间的内插来实现 Fluent 运动的简单方法。

打开 WinUI 3 案例库应用并查看隐式转换的实际效果

WinUI 3 示例集图标 WinUI 3 示例库应用包含 WinUI 控件和功能的交互式示例。 从 Microsoft Store 或浏览 GitHub 上的源代码获取应用。

可以对以下属性进行隐式动画更改：

每个可以进行隐式动画更改的属性都有相应的“切换”属性。 若要对属性进行动画处理，需要将转换类型分配给相应的“转换”属性。 下表显示了过渡属性以及每个属性要使用的过渡类型。

动画属性 过渡属性 隐式切换类型
UIElement.Opacity 透明度过渡 ScalarTransition （标量转换）
UIElement.Rotation RotationTransition （旋转过渡） ScalarTransition （标量转换）
UIElement.Scale ScaleTransition （缩放过渡） Vector3Transition
UIElement.Translation（用户界面元素翻译） 翻译过渡 Vector3Transition
边框.背景 背景过渡 BrushTransition
ContentPresenter.Background 背景过渡 BrushTransition
面板.背景 背景过渡 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;
}
  • Last updated on