计时和缓动

  • 项目

虽然运动以现实世界为基础，但我们同时也是一个数字媒体，提供你期待的速度和效果。

示例

WinUI 库

如果已安装 WinUI 2 库 应用，请单击此处 打开该应用，并查看缓动函数的运行情况。

标准动画持续时间值

WinUI 提供了一组在整个平台控件中使用的标准动画持续时间。 也可以在构建自定义情节提要动画时使用这些命名资源。

ThemeResource 名称 Value
ControlNormalAnimationDuration 250 毫秒
ControlFastAnimationDuration 167 毫秒
ControlFasterAnimationDuration 83 毫秒

Fluent 运动的缓动

缓动是对对象的移动速度进行操作的方法。 它是将所有 Fluent 运动体验绑定在一起的纽带。虽然比较极端，但系统中使用的缓动有助于统一对象在整个系统中移动时的物理感觉。 这是模拟现实世界的一种方式，让运动中的对象感觉好像与其所在的环境融为一体。

从框架的右下角显示一个圆圈的简短视频，并在框架左上角附近停止。

对运动应用缓动

这些缓动将帮助你实现更自然的感觉，而且是我们用于 Fluent 运动的基准。

快进缓出

cubic-bezier(0, 0, 0, 1)

用于正在进入场景（导航或生成）的对象或 UI。

一旦到达现场，对象会遇到极端的摩擦力，这会减慢对象至静止。由此产生的感觉是，对象从很远的地方行进，以极快的速度进入，或者正在迅速恢复到静止状态。

即使它前面有一个无响应时刻，传入对象的速度也会导致产生一种速度快且响应迅速的效果。

减速缓动

缓出快进

cubic-bezier(1 , 0 , 1 , 1)

用于正在退出场景的 UI 或对象。

对象获得动力并获得动量，直到它们达到转义速度。由此产生的感觉是，对象正在尽最大努力避开用户，并为新内容的进入腾出空间。

加速缓动