计时和缓动

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

示例

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

标准动画持续时间值

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

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

Fluent 运动中的缓动

缓动是操作对象移动速度的一种方法。 它是将所有 Fluent 运动体验绑定在一起的纽带。虽然比较极端,但系统中使用的缓动有助于统一对象在整个系统中移动时的物理感觉。 这是模仿现实世界的一种方法,让运动中的物体感觉自己属于自己的环境。

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

将缓动应用于运动

这些缓动将帮助你获得更自然的感觉,并且是我们用于 Fluent 运动的基线。

快进缓出

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

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

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

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

减速缓动

缓出快进

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

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

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

加速缓动